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