Komentáře k článku

OffTheRoad: Píšeme offline aplikaci s HTML5

V posledních týdnech jsme se setkávali na Zdrojáku u článků o technologiích počítaných do rodiny HTML5. Ukázali jsme si, jak HTML5 napomáhá sémantice, probrali jsme nové možnosti videa a audia a ukázali jsme si i některá API, s nimiž přichází moderní prohlížeče. Je tedy vhodný čas si to vše shrnout.

Zpět na článek

27 komentářů k článku OffTheRoad: Píšeme offline aplikaci s HTML5:

  1. Radek Hulán

    hezký článek

    Výborný článek, taková praktická sumarizace a implementace těch předchozích. Díky :)

  2. heptau

    Na iPhone to bohuzel nefunguje

    Moc pekny clanek. Ovsem je videt ze se to na kazdem prohlizeci chova jinak – na iPhone v off-line rezimu mi to neuklada zpravy do fronty. Mohlo by to byt zpusobeno i tim, ze v off-line rezimu nezjistit polohu z GPS (v on-line rezimu ji zjisti z vysilace wifi/gsm) – jsem v tuto chvili pod strechou. Az budu mit vic casu a moznost vyjit ven tak se na to zkusim podivat.
    Co se tyce off-line rezimu, tak s tim jsem take bojoval, nakonec jsem se dostal do stavu, kdy jsem cisloval vsechny soubory. Pozdeji jsem si o tom precetl neco vic a doufal ze pujde cache obnovit pouzitim window.applica­tionCache.upda­te(), ale k tomu vyzkouset jak se to bude chovat jsem se uz nedostal.

    1. Martin MalýAutor příspěvku

      Re: Na iPhone to bohuzel nefunguje

      Já se k window.appli­cationCache.up­date() dostal, a právě u téhle metody jsem se zasekl na velmi dlouho. Totiž: ona metoda (FF3.6) sice načítá manifest, ovšem mezi ní a souborem na serveru leží ještě HTTP cache (v prohlížeči, v serveru a leckdy i jinde). A pokud tuhle nepotlačíte, tak bohužel – metoda update() se totiž (alespoň ve FF3.6) spokojila i s odpovědí 304 a pravděpodobně nežádala o necachovanou verzi. Nakonec se mi osvědčila kombinace s „vymazáním lokálně uložených dat“ (ve FF3.6 to je Možnosti – Rozšířené – Síť – Úložiště režimu offline), pak si prohlížeč zaručeně sahal pro nový manifest. Ale jak říkám: Každý prohlížeč se bude chovat naprosto jinak.
      V Safari *by to mělo* fungovat, ovšem jestli to bude fungovat zrovna v té verzi, co je ve vašem iPhone, to je ve hvězdách.

  3. juraj

    javascript

    Kto píše ten Javascriptový kód? Výraz !JSON v prehliadačoch, ktoré JSON nepodporujú, vyhodí ReferenceError. Správny zápis by vyzeral !window.JSON, alebo !(„JSON“ in window), alebo kontrola pomocou typeof. Podobnú chybu robíte aj vo vašom detektore podpory HTML5, máte tam !!FileReader, minimálne IE8 na tom vyhodí chybu.
    Tiež nepovažujem za šťastný nápad siahať akémukoľvek elementu na atribút style, jednoduchšia by bola aplikácia, keby ste jedným riadkom kódu nastavili documentElementu nejakú triedu a všetky zobrazenia či nezobrazenia prvkov riešili v CSS.
    Prečo sa obsluha udalostí online a offline pripája dvakrát za sebou?
    Inak článok je celkom dobrý.

    1. Martin MalýAutor příspěvku

      Re: javascript

      Á, ten kód píše externí stážistka… :)
      Ne, napsal jsem to já a za !JSON se kaju. Kdesi jsem to objevil, zkusil, fungovalo… Díky za upozornění, upravil jsem to i v detektoru (ale divné, IE8 nic nehlásil).
      „Sahání na atribut style“ není v ukázce coby „čistá metoda“, ale coby metoda „rychlá“. Přepínání barev či viditelnosti není podstatou ukázky, proto jsem bez rozpaků zvolil tento „quick-and-dirty“ přístup, kde je jasně na první pohled vidět: Aha, element bude schován. Kdybych se nestyděl nalinkovat jQuery, tak tam bude $(„element“).hi­de(); Ale nešlo o to ukazovat metody skrývání prvků, pohybujeme se o úroveň výš, skrývání je nepodstatné, podstatnější je kombinace nových API (a odvážím se tvrdit, že i konkrétní kód, který s ním pracuje, je podružný)!
      Obsluha připojena dvakrát: Viz diskuse u příslušného článku – připojení pouze pomocí addEventListener v některých prohlížečích nefungovalo stoprocentně (a ani dvojnásobné nefunguje spolehlivě všude).

      1. juraj

        Re: javascript

        Ďakujem za odpoveď. Ale s tým IE8 je to zaujímavé, ja si spomínam na Error on page a Opera takisto vyhodí na takomto kóde výnimku. Hm.

      2. David Grudl

        Re: javascript

        Článek výborný! Navíc jsem ten vtípek s OffTheRoad postřehl až poměrně pozdě a pochvaloval si u prvních odstavců, jak ten Michal Bláha pěkně umí psát :-)
        V JavaScriptu mě trošku zarazila konstrukce !((‚localStorage‘ in window) && window[‚local­Storage‘] !== null) u které prostě nemohu přijít na to, jak se liší od prostého !window.local­Storage. Je to bug nebo záměr?

        1. Martin MalýAutor příspěvku

          Re: javascript

          Díky. Konstrukci jsem opsal od Pilgrima (http://diveintohtml5.org/detect.html sekce Detection), protože věřím, že ví co dělá a že má nějaký specifický důvod to dělat právě takhle (protože u jiných HTML5 vymožeností má test jednoduchý). Ano, vypadá to divně, ale jsou dvě možná vysvětlení: Buď se Pilgrim upsal a neopravil, nebo se setkal s nějakou nestandardností, o které nevím. Z nějakého důvodu je test stejně i v Modernizru (u local i session storage). Možná to je jen nějaký tradovaný omyl, možná to je reakce na nějakou specifičnost nějakého prohlížeče. Nemám na to to ověřovat, jestli chceš, prozkoumej to a poinformuj. Nebo – nejde okolo nějaký odborník na JS?

          1. David Grudl

            Re: javascript

            Asi tušíš, že „protože věřím, že ví co dělá a že má nějaký specifický důvod“ je přesně ten typ odpovědi, se kterým se nemohu spokojit. Díky za navedení na Modernizr, tam jsem našel odpověď: tested via the in operator because otherwise Firefox will throw an error: https://bugzilla.mozilla.org/show_bug.cgi?id=365772 if cookies are disabled
            Nicméně ta konstrukce s hranatýma závorkama a null je už zbytečná, stačilo by jen && window.localSto­rage.

            1. Martin MalýAutor příspěvku

              Re: javascript

              Takže jsem měl recht a vystačil jsem s vírou, že to je kvůli něčemu divnému. O konstrunkci se, Davide, nebudu dohadovat, a opět odpovím stejně: Nezkoušel jsem a nevím proč je to přesně takhle.
              Nicméně bych se obával napsat to jako && window.localStorage a z důvodu, o němž věřím, že je dobrý, bych použil && (!!window.local­Storage)

              1. David Grudl

                Re: javascript

                && window.localStorage a && (!!window.local­Storage) je totéž, pokud je to použito v podmínce if, naopak třeba v return by to bylo něco jiného.

                1. Martin MalýAutor příspěvku

                  Re: javascript

                  Řídím se zásadou, že než si pamatovat kde mohu použít jiný zápis, je pro mne jednodušší používat všude stejný. Takže si pamatuju, že kde chci použít objekt na místě pravdivostní hodnoty, tam dám dvojí negaci, i když by tam být nemusela. Připadá mi to v téhle situaci jako „závorka navíc“ – nemusí být, ale přispěje srozumitelnosti. U zápisu !!window.storage vidíš, že nejde o data v objektu, ale o to udělat z něj pravdivostní hodnotu.

                  1. David Grudl

                    Re: javascript

                    O tom není sporu, !!window.local­Storage je zcela v pořádku, zarazilo mě použití window[‚local­Storage‘] !== null, které je v kontextu tvého i Markova článku vybočením z normálu, takže jsem v tom popátral a zjistil, že vzniklo jen jako důsledek otrockého přepisu z Modernizr. Peace!

                    1. Martin MalýAutor příspěvku

                      Re: javascript

                      Tak ještě zbývá dodat, proč to autoři Modernizru takhle napsali… Peaceoir!

                      1. David Grudl

                        Re: javascript

                        Protože mají název ‚localStorage‘ v konstantě, tak museli použít hranaté závorky. A v konstantě to mají kvůli lepší minifikaci. Ta za všechno může!

                        1. Daniel Steigerwald

                          Re: javascript

                          Což je ovšem mimifikace na prd. Mimifikovaný soubor je sice menší.. o to hůř ho ale pak GZIP kompresí. True story.

  4. PetrP

    Re: OffTheRoad: Píšeme offline aplikaci s HTML5

    Ukázka mi nefunguje v žádném prohlížeči. Který bych měl použít?
    Opera 10.60 a Chrome 5.0.375.126 ne­funguje detekce offline.
    Firefox 3.6.8 nefungu­je vůbec.

    1. Kentusák

      Re: OffTheRoad: Píšeme offline aplikaci s HTML5

      V Opeře 10.60 mi online/offline funguje, ale nezařazuje to zprávy do fronty. (Může být způsobeno konfliktním UserJS, nebo nějakým mým nastavením, dost se v tom vrtám).
      Ve Firefoxu 3.6.6 to funguje bezchybně.
      Chromium (nějaký dnešní nightbuild) se mi nepodařilo přepnout do offline módu (ani jsem po tom nějak moc nepátral).
      Docela rád bych se na to podíval podrobněji, ale moc práce a málo času :(

  5. Segeda

    N900 a offline aplikace

    Dobrý den,
    děkuji za názorný článek.
    Akorát bych se chtěl zeptat (i když to sem možná nepatří), jak znovu spustit aplikaci na N900 bez připojení. Odjel jste na místo, kde není 300 km kolkolem vůkol GSM signál a …?
    Děkuji

    1. Martin MalýAutor příspěvku

      Re: N900 a offline aplikace

      Dobrý den,
      odpověď je: „… a klikl jsem si na ploše na ikonu, kterou jsem si tam předtím vytvořil pomocí Vytvořit zástupce na ploše. To otevře prohlížeč s patřičnou URL, která je v AppCache, takže se aplikace načte odtamtud.“ Nebo bych mohl otevřít prohlížeč a zadat URL/vzít z Favorites… Pokud je pro to URL záznam v AppCache, čte se z AppCache.

      1. Segeda

        Re: N900 a offline aplikace

        Dobrý den,
        děkuji za odpověď.
        Asi je to tím pátkem třináctým, či snad rukama gramlavýma, však mně se nechce aplikace nikdy z AppCache načíst. Vždycky MicroB chce připojení na net a když nevyberu, tak zahlasí chybu spojení. I když podle http:///ukazky­.zdrojak.cz/html5/ je AppCache k dispozici.

        1. Martin MalýAutor příspěvku

          Re: N900 a offline aplikace

          No, to je právě ukázka toho, co jsem psal na konci – že si prohlížeče vykládají podporu AppCache různě. Já to zkusil i ve Firefoxu pro Maemo, a tam to funguje, takže je to zatím spíš Proof-Of-Concept než reálně použitelná věc. Bohužel… Musíme nějakou dobu počkat, až bude podpora skutečná, ne jen deklarovaná.

    1. Martin MalýAutor příspěvku

      Re: Funkcia online()

      Máte na mysli to, co je v článku popsáno slovy „A právě ve funkci online, která je zavolaná po přechodu z offline do online, si zavoláme nějaké to „vysypání přichystaných zpráv z fronty“.“?

      1. George

        Re: Funkcia online()

        Sorry, trochu som to prehliadol. Pozeral som hlavne zdrojaky a tam nie je volana ta funkcia. Inak super clanok, vdaka…

Napsat komentář

Tato diskuse je již příliš stará, pravděpodobně již vám nikdo neodpoví. Pokud se chcete na něco zeptat, použijte diskusní server Devel.cz

Zdroj: https://zdrojak.cz/?p=3298