Přidat článek mezi oblíbenéZasílat nové komentáře e-mailem 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:

[88126-02-pwa-a2h-small-png] [88127-03-pwa-manual-inst-small-png]

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.
[88128-01-repl-fork-png]

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!).

Jsou zobrazeny jen nové komentáře. Zobrazit všechny
Předmět Autor Datum
S PWA robím ale tento clanok sa mi nepáči a viacero vecí je tam vysvetleno nepresne a nevhodné príkl…
Mlocik97 15.10.2019 01:54
Mlocik97
Čo sa týka konkrétne service-workeru tak kvalitné sú trebárs v examploch tu: https://github.com/Goog…
Mlocik97 15.10.2019 15:44
Mlocik97
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é… nový
Pavel 15.10.2019 17:52
Pavel
Tak ono v rámci service-workeru sa samotné jadro a časti install, active, fetch moc nezmenili ani za… nový
Mlocik97 15.10.2019 17:54
Mlocik97
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…
Pavel 15.10.2019 17:51
Pavel
No chýb je tam hodne, trebárs kdybys do stránky implementoval niečo, čo by vyžadovalo inú HTTP metód… poslední
Mlocik97 15.10.2019 17:59
Mlocik97

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.

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.

Zpět na články Přidat komentář k článku Nahoru