PWA - progresivní webová aplikace v telefonu
Říkali jste si někdy, že by bylo skvělé mít určité informace kdykoli k dispozici v telefonu? Třeba otevírací dobu obchodů, ordinační dobu lékaře, postup zapnutí/vypnutí stroje, rozvrh hodin, důležité termíny, atd.?
PWA fungují jak na Androidu, tak i na iOS (za splnění dalších podmínek), moje ukázková aplikace se chová jako PWA jen na Androidu.
S PWA aplikací je to nejen možné, ale i snadné. Použijeme pro začátek již hotovou, plně funkční PWA aplikaci, ve které stačí na webu změnit obsah za svůj a poté ji nainstalovat do telefonu nebo tabletu.
PWA - progresivní webové aplikace - jsou moderním trendem. Spojují výhody mobilních aplikací a běžných webových stránek. V článku si ukážeme hotovou ukázkovou PWA aplikaci a návod, jak změnit její obsah za vlastní a nainstalovat ji do telefonu. Aplikace bude fungovat i offline, tj. bez připojení k internetu.
Co budeme potřebovat?
Pro vyzkoušení, co je vlastně PWA zač, stačí jen telefon s Androidem a v něm prohlížeč Chrome.
Běžnou znalost HTML (a přípdně CSS), není potřeba umět programovat, není nutné znát JavaScript.
Potřebujeme: PC s prohlížečem Chrome, mobilní telefon/tablet (přiměřeně starý), bezplatný účet na repl.it
1. krok, ukázková PWA aplikace
Pokud chcete jen otestovat, co vlastně PWA je a jak se chová, načtěte si v telefonu/tabletu v prohlížeči Chrome tuto stránku s ukázkovou PWA aplikací (důležitý je protokol https). Po jejím načtení se dole zobrazí panel s textem "Přidat aplikaci ... na plochu", stačí se panelu dotknout a PWA se nainstaluje. Pokud to z nějakého důvodu nestihnete, z pravého horního menu prohlížeče (tři tečky pod sebou) vyberte Přidat na plochu. Vše ukazují následující dva obrázky:
Na ploše telefonu/tabletu po chvilce přibude nová ikona s názvem PWA Quasar. Nastavte telefon do módu letadlo nebo jen zakažte datové přenosy a aplikaci spusťte. Bude funkční i bez připojení.
2. krok, chci si vložit vlastní obsah
Máte-li zájem, můžete si vložit vlastní obsah, tj. text, tabulku, obrázek, ...
2. 1 Repl.it
Vytvořte si účet na repl.it, je to zdarma; repl nabízí (kromě jiného) možnost psaní webových stránek s jejich hostováním. Abyste mohli použít moji ukázkovou PWA, otevřete si další prázdnou záložku (tab) v Chromu a zadejte tuto URL adresu: https://repl.it/@Pablo74/PWA-template-Quasar
V horní části okna klepněte na tlačítko fork a tento ukázkový repl by se měl vložit mezi vaše vlastní, tj. půjde vám editovat.
2. 1 Úpravy, tj. vlastní obsah
Přečtěte si důkladně postup v souboru CZ info.md
Aplikace zobrazuje tři stránky, jsou dostupné přes menu v levém horním rohu.
Názvy stránek (tj. to co se zobrazí v menu) jsou v souboru index.html mezi tagy <q-item-section></q-item-section>
Obsah stránek je v souboru index.html uvnitř tagu <template id=""> (před ním je komentář).
Např. stránka Info je mezi <template id="info"></template>, před ní je komentář <!-- template PageInfo -->
Další úpravy jsou popsány v souboru CZ info.md
3. krok, zprovoznění vlastní PWA aplikace
Máte vlastní obsah, názvy stránek, text v záhlaví a zápatí, upravenou šířku menu atd. a tedy i finální PWA aplikaci. Než ji nainstalujete, nezapomeňte:
a) v souboru manifest.json změnit název aplikace
b) v souboru service-worker.js přidat kompletní cestu k souborům (obrázky), které jste přidali do aplikace - aby byly k dispozici i offline
c) při libovolné změně obsahu libovolného souboru je nutné v souboru service-worker.js změnit číslo verze v proměnné cacheVersion
Protože jste si vytvořili svůj vlastní repl, je adresa vaší PWA apliace odlišná od této ukázkové. V telefonu načtěte svoji PWA aplikaci z URL, které vidíte na PC v replu v pravém náhledovém okně (ne URL přímo zobrazenou v adresním řádku Chromu!).
Nejako mi unika prakticky vyznam takejto aplikacie. Ak som to spravne pochopil su to akekolvek offline informacie, ktore si tam ulozime.
Ale aky je rozdiel od roznych zapisnikov, ktore nam umoznuju to iste?
Hodí se např. v situaci, kdy se info moc často nemění -nebo- když tu informaci má mít k dispozici více lidí (ve škole, ve firmě, v zájmovým kroužku). Obsahem může být třeba návod ke konkrétnímu zařízení, rozvrh hodin, podklady pro výuku ve škole, otevírací doba obchodů...
Prostě: podle vkusu každého soudruha
Nechci prudit, ani nic podobného
Ale na poznámky s možností sdílet je s různými kontakty máme dobrou, odzkoušenou aplikaci:
EVERNOTE.
Sdílet je lze napříč platformamy (telefon, tablet, pc...)
jo, super, ale to je (síťové) řešení o level jinde, navíc jsi závislý na třetí straně.
V okamžiku, kdy máš např. velkou offline dokumentaci v HTML, kterou si chceš v klidu číst, tak to vypadá jako poměrně vhodné a jednoduché řešení. V podstatě analogie HTA dokumentů z IE.
S PWA robím ale tento clanok sa mi nepáči a viacero vecí je tam vysvetleno nepresne a nevhodné príklady. Navyse v podstate nič nevysvetluje. V 3jke krok b a c som nikdy nepotreboval robiť v žiadnej svojej PWA a to môžem jak přidávat podstranky tak menit obsah, a nemam problem. V podstate si nevysvetlil ale ani zaklad PWA a poriadne ani na čo to slúži, neni to len o offline. Navise ten service worker je nechutne napísaný. Sry, ale musel som toto napsat.
Čo sa týka konkrétne service-workeru tak kvalitné sú trebárs v examploch tu: https://github.com/GoogleChrome/samples/tree/gh-pages/service-worker s malými úpravami dokážeš vytvoriť service-worker kde sa nemusíš starať o zapisovanie ciest k súborom ani o zmeny verzie cashe.
Díky za tip, to se hodí. Jen mi je trochu divný, že ty příklady jsou starý přes tři roky; to je v této oblasti obecně strašně dlouho.
Tak ono v rámci service-workeru sa samotné jadro a časti install, active, fetch moc nezmenili ani za tie 3 roky. V podstate všetko funguje skoro zhodne rovnako.
Ešte inak celkom dobre na prečítanie je https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook
No vždyť jo, nic nevysvětluju. Je to nabídnuto k použití. Ten s-w jsem získal z nějakýho oficiálního tutoriálu, už ale nevím kde. Nestudoval jsem to do hloubky, to je fakt.
No chýb je tam hodne, trebárs kdybys do stránky implementoval niečo, čo by vyžadovalo inú HTTP metódu než GET, napríklad POST, DELETE, PUT atd, tak by sa ti to zrúbalo. Taktiež u CORS to je problematické. V prípadne basic example u googlu tam je to vyriešené. AJ díky
if (event.request.url.startsWith(self.location.origin)) {...}
aj samotný active funguje dosť rozdielne. A zároveň je tam navyše implementovaný aj runtime cashe.
Ja som si ten basic od googlu ešte modifikoval tak, že nemusím vôbec riešiť cesty k súborom aby som zapisoval do filesToCache a ani nemusím ručne prepisovať cashe.