A Progressive Web Apps je webová aplikace, která využívá výhody moderních funkcí prohlížeče a lze ji přidat na domovskou obrazovku, přičemž se chová stejně jako nativní aplikace.
V tomto tutoriálu vám krok za krokem ukážeme vše, co potřebujete vědět o PWA, s praktickými příklady a ukázkovou aplikací. Abychom nezačínali od nuly, použijeme aplikaci pro selfie, kterou jsme nedávno vytvořili, a uděláme ji progresivní.
Co je to progresivní webová aplikace
Progresivní webová aplikace se ve svém jádru nijak neliší od běžné webové stránky – je vytvořena z HTML, CSS a JavaScriptu a žije v prohlížeči. To, co PWA odděluje od běžných webů, je seznam 10 klíčových konceptů, které je třeba splnit. Zde jsou převzaté přímo z webu Google Developers.
- Bezpečné – Zobrazuje se prostřednictvím protokolu HTTPS, aby se zabránilo snoopingu a zajistilo se, že obsah nebyl zmanipulován.
- Progresivní – Pracují pro každého uživatele bez ohledu na volbu prohlížeče, protože jsou vytvořeny s progresivním vylepšováním jako základní princip.
- Responzivní – Přizpůsobí se každému tvaru:stolnímu počítači, mobilu, tabletu nebo čemukoli dalšímu.
- Nezávislé na připojení - Rozšířeno o servisní pracovníky pro práci offline nebo v sítích nízké kvality.
- Jako aplikaci – Díky interakcím a navigaci ve stylu aplikace se uživatel cítí jako aplikace, protože jsou založeny na modelu prostředí aplikace.
- Čerstvé - Vždy aktuální díky procesu aktualizace servisních pracovníků.
- Zjistitelné – Jsou identifikovatelné jako „aplikace“ díky manifestům W3C a rozsahu registrace servisního pracovníka, který umožňuje vyhledávačům je najít.
- Opětovné zapojení – Usnadněte opětovné zapojení pomocí funkcí, jako jsou oznámení push.
- Instalovatelné – Umožněte uživatelům „nechat si“ aplikace, které považují za nejužitečnější, na domovské obrazovce, aniž by se museli obtěžovat obchodem s aplikacemi.
- Propojitelné - Snadné sdílení prostřednictvím adresy URL a nevyžaduje složitou instalaci.
Dodržováním těchto pokynů zajistíte, že vaše aplikace bude dobře fungovat nejen při prohlížení v prohlížeči, ale také při samostatném spuštění prostřednictvím zástupce na domovské obrazovce. Možná se vám bude zdát formulace, kterou Google zvolil, poněkud matoucí, ale nebojte se, pravidla jedno po druhém vysvětlíme později v tutoriálu.
Co NENÍ progresivní webová aplikace
Koncept PWA by neměl být zaměňován s:
- Hybridní aplikace založené na Cordově
- Reagovat Native
- NativeScript
- Electron a NW.js
Všechny výše uvedené technologie obalují aplikace HTML a balí je do spustitelných souborů, ať už je to .apk , .exe nebo cokoli jiného, co je pak třeba stáhnout z příslušného obchodu s aplikacemi a nainstalovat do zařízení uživatele.
PWA nevyžadují instalaci a nejsou (zatím) dostupné na Google Play nebo iTunes App Store. Chcete-li stáhnout PWA, musíte jednoduše navštívit jeho webovou stránku a poté jej uložit na domovskou obrazovku jako zástupce. Vývoj a údržba samostatných verzí pro iOS a Android již není problém, ale je třeba vzít v úvahu podporu prohlížeče.
1. Bezpečné
Většina progresivních webových aplikací pracuje s nativními API a servisními pracovníky, technologiemi, které pracují s citlivými daty a je třeba s nimi zacházet opatrně. Proto musí být každý PWA obsluhován prostřednictvím připojení HTTPS.
Pokud nemáte přístup k serveru s certifikátem SSL, nejjednodušší způsob, jak spouštět projekty v zabezpečeném prostředí, je prostřednictvím stránek GitHub nebo podobné služby. Jakékoli úložiště GitHub může být hostováno přímo přes HTTPS a stránky GitHub i GitHub jsou zdarma pro veřejná úložiště.
Zde jsme se rozhodli hostit naše demo:https://tutorialzine.github.io/pwa-photobooth/.
Pro jednoduché testování na lokálním serveru můžete také vyzkoušet Ngrok. Je to malý nástroj, který vám umožní tunelovat jakýkoli aktuálně spuštěný localhost na zabezpečenou veřejnou adresu URL. Ngrok je zdarma a je k dispozici pro Windows, Mac a Linux.
2. Progresivní
V podstatě to znamená, že PWA by měly používat webové technologie, které jsou široce podporované a fungují stejně dobře v co největším počtu prohlížečů. Jak všichni víme, ve světě vývoje webu je to téměř nemožné, ale stále existují věci, které můžeme udělat, abychom pokryli větší uživatelskou základnu.
Například v naší aplikaci PhotoBooth používáme getUserMedia() API pro přístup k hardwarové kameře na zařízení. Jeho podpora v různých prohlížečích je značně nekonzistentní – Safari ji vůbec nepodporuje, prohlížeče, které ji podporují, potřebují předpony a liší se v použití.
Abychom zajistili, že naši aplikaci může skutečně používat více lidí, pokrýváme všechny předpony:
navigator.getMedia = (
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia
); Chybu zobrazíme také v případě, že nefunguje žádná z předpon:
if (!navigator.getMedia) {
displayErrorMessage("Your browser doesn't have support for the navigator.getUserMedia interface.");
}
else {
// Use Camera API
} Kde je to možné, měly by být poskytnuty záložní a polyfilly. Stejné principy platí pro kód CSS a HTML.
3. Responzivní
Aplikace by měla vypadat hezky na všech zařízeních bez ohledu na jejich velikost obrazovky. Naše aplikace má poměrně jednoduché uživatelské rozhraní, takže jsme k ovládání velikosti písma, odsazení, okrajů atd. použili pouze několik dotazů na média.
Nebojte se používat CSS knihovny a frameworky, jako je Bootstrap, protože opravdu usnadňují vytváření mřížek a vypořádávají se s typografií a obecnou odezvou.
4. Nezávislé na konektivitě
To je důležité. Použití servisních pracovníků umožňuje vaší aplikaci fungovat, i když není k dispozici připojení k internetu.
Některé aplikace lze uložit do mezipaměti pouze částečně:uživatelské rozhraní je uloženo v mezipaměti a dostupné offline, dynamický obsah stále potřebuje přístup k serveru.
Jiné, jako naše demo PhotoBooth, lze uložit do mezipaměti jako celek. Veškerý zdrojový kód a zdroje budou uloženy lokálně a aplikace bude fungovat offline i online úplně stejným způsobem. Zde je kód, díky kterému se kouzlo stane:
Nejprve musíme vytvořit soubor JavaScript pro servisního pracovníka a definovat logiku, která za ním stojí.
sw.js
// Install the service worker.
this.addEventListener('install', function(event) {
event.waitUntil(
caches.open('v1').then(function(cache) {
// The cache will fail if any of these resources can't be saved.
return cache.addAll([
// Path is relative to the origin, not the app directory.
'/pwa-photobooth/',
'/pwa-photobooth/index.html',
'/pwa-photobooth/assets/css/styles.css',
'/pwa-photobooth/assets/fonts/MaterialIcons-Regular.woff2',
'/pwa-photobooth/assets/js/script.js',
'/pwa-photobooth/assets/icons/ic-face.png',
'/pwa-photobooth/assets/icons/ic-face-large.png',
'/pwa-photobooth/manifest.json'
])
.then(function() {
console.log('Success! App is available offline!');
})
})
);
});
// Define what happens when a resource is requested.
// For our app we do a Cache-first approach.
self.addEventListener('fetch', function(event) {
event.respondWith(
// Try the cache.
caches.match(event.request)
.then(function(response) {
// Fallback to network if resource not stored in cache.
return response || fetch(event.request);
})
);
}); Potom musíme propojit tohoto servisního pracovníka s naším HTML.
index.html
<script>
// Register Service Worker.
if ('serviceWorker' in navigator) {
// Path is relative to the origin, not project root.
navigator.serviceWorker.register('/pwa-photobooth/sw.js')
.then(function(reg) {
console.log('Registration succeeded. Scope is ' + reg.scope);
})
.catch(function(error) {
console.error('Registration failed with ' + error);
});
}
</script> Nyní budou všechny soubory v našem projektu uloženy v prohlížeči uživatele. Jakékoli proměnné a objekty JavaScriptu by měly být také uloženy v localStorage nebo IndexDB, kde je to možné.
5. Jako v aplikaci
Při vytváření PWA se doporučuje řídit se konceptem návrhu nazývaným architektura aplikace. Zní to velmi složitě, ale v podstatě se to scvrkává na toto:aplikace je rozdělena na dvě hlavní součásti:shell a obsah .
Shell obsahuje všechny statické prvky uživatelského rozhraní, jako je záhlaví, nabídky, zásuvky atd. Když aplikaci ukládáme do mezipaměti, shell by měl být vždy uložen v zařízení, protože chceme, aby byl vždy dostupný. Tímto způsobem, když uživatel bez připojení k internetu otevře aplikaci, neuvidí prázdnou obrazovku ani běžícího dinosaura – uvidí rozhraní aplikace uložené v mezipaměti a příslušnou chybovou zprávu.
Obsah se nachází v shellu. Může být také uložen do mezipaměti, ale není to nutné, protože obsah je obvykle dynamický, často se mění a může se lišit při každém načtení stránky.
6. Čerstvé
Po uložení do mezipaměti se naše PWA vždy načte z místního úložiště. Pokud však změníme servisního pracovníka sw.js v žádném případě se při dalším načtení stránky stáhne a nainstaluje nová verze.
this.addEventListener('install', function(event) {
event.waitUntil(
caches.open('v1.0.1').then(function(cache) {
// ...
})
);
}); Pomocí aktualizací service worker můžeme znovu stáhnout zdroje, odstranit starou mezipaměť nebo úplně změnit logiku service worker. Více o procesu aktualizace SW se můžete dozvědět v tomto článku Google Developers – zde.
7. Zjistitelné
Přidáním webového manifestu do naší aplikace můžeme o něm poskytnout různé informace a změnit způsob, jakým se zobrazuje na zařízeních lidí. Umožňuje ukládání aplikací na domovskou obrazovku pomocí vlastní ikony, spouštění v samostatném okně prohlížeče a spoustu dalších skvělých věcí.
Webový manifest má podobu jednoduchého souboru JSON:
manifest.json
{
"name": "Progressive Web App: PhotoBooth",
"short_name": "PhotoBooth",
"description": "Simple Progressive Web App for taking selfies.",
"icons": [{
"src": "assets/icons/ic-face.png",
"type": "image/png",
"sizes": "72x72"
}, {
"src": "assets/icons/ic-face-large.png",
"type": "image/png",
"sizes": "144x144 256x256"
}],
"start_url": "index.html",
"display": "standalone",
"background_color": "#fff",
"theme_color": "#fff",
"orientation": "portrait"
} Většina vlastností je samozřejmých, takže se budeme zabývat pouze těmi důležitějšími. Chcete-li zobrazit úplný formát webového manifestu a všechna dostupná pole, přejděte sem.
- Krátký název – Toto je název, který bude mít naše aplikace po uložení na domovskou obrazovku.
- Ikony – řada ikon s různým rozlišením.
- Zobrazení – Určuje, jak bude aplikace otevřena. Vybrali jsme samostatné takže po spuštění se naše fotobudka zobrazí v okně na celou obrazovku bez jakékoli navigace prohlížeče nebo nabídek. Bude také považována za samostatnou aplikaci v multitaskingu.
Pro registraci manifestu jej musíme propojit s naším HTML:
<!-- Web Manifest --> <link rel="manifest" href="manifest.json">
Safari zatím nepodporuje standard Web Manifest, ale můžeme definovat chování podobné aplikaci pomocí této metaznačky specifické pro Apple:
<!-- Meta tag for app-like behaviour in iOS --> <meta name=”apple-mobile-web-app-capable” content=”yes”>
8. Opětovné zapojení
Oznámení push již nejsou omezena na nativní aplikace. Díky servisním pracovníkům a Push API mohou webové aplikace odesílat zprávy také na notifikační lištu Androidu. Ne všechny aplikace budou mít z této funkce prospěch, ale při správném používání mohou oznámení skutečně pomoci zaujmout uživatele.
Toto téma přesahuje rámec našeho tutoriálu, protože Push Notifications jsou poměrně komplikovaná a zaslouží si plnou lekci sama o sobě. Pokud stále chcete implementovat oznámení do své webové aplikace, zde jsou některé z nejlepších dostupných výukových zdrojů:
- Google Developers, Push Notifications:Včasná, relevantní a přesná – zde.
- Google Developers, Push Notifications on the Open Web – zde.
- MDN, pomocí rozhraní Push API – zde.
- Push.js, knihovna, která poskytuje čistší rozhraní API pro zpracování oznámení push – zde.
9. Instalovatelné
Ve výchozím nastavení lze jakoukoli webovou stránku ručně uložit na domovskou obrazovku pomocí Přidat na domovskou obrazovku z nabídky prohlížeče Chrome. Může však být poměrně obtížné přimět uživatele „instalovat“ naši aplikaci tímto způsobem, protože většina lidí o této funkci vůbec neví.
Naštěstí existuje způsob, jak vaše aplikace vyzvat uživatele k jejímu uložení pomocí jednoduchého vyskakovacího okna instalace. Aby se vývojářům zabránilo ve zneužití těchto vyskakovacích oken, neexistuje žádný způsob, jak je programově zobrazit. Místo toho se zobrazí samy, když aplikace splní řadu požadavků:
- Existuje platný webový manifest.
- Je nainstalován platný Service Worker.
- Aplikace je poskytována přes HTTPS.
Máme pokryto vše výše uvedené, takže když uživatel několikrát navštíví web naší aplikace, zobrazí se mu tato výzva:
Celý proces instalace naší aplikace je v této jednoduché výzvě. Instalace proběhne okamžitě a po uložení bude PhotoBooth k dispozici ke spuštění z ikony na domovské obrazovce a bude se chovat přesně jako nativní aplikace.
10. Propojitelné
Kdokoli s webovým prohlížečem má přístup k aplikacím PWA a lze je sdílet jednoduše prostřednictvím jejich adresy URL. K jejich nalezení nebo instalaci nejsou potřeba žádné nástroje třetích stran.
Pokud aplikace běží v samostatném režimu, je také vhodné přidat v aplikaci tlačítka pro sdílení, protože adresní řádek prohlížeče a nabídky nejsou viditelné.
Závěr
Naše PWA je nyní kompletní. Můžeme otestovat, jak dobře dodržuje pravidla PWA, pomocí oficiálního nástroje od Googlu s názvem Lighthouse. Znovu vytváří možné scénáře a důkladně testuje aplikaci. Zde je to, co nám říká o PhotoBooth:
Prošli jsme!
Pokud chcete najít další PWA ke hraní, přejděte na stránku pwa.rocks. Nabízejí pěknou sbírku her a užitečných nástrojů, které ukazují velkou sílu progresivních webových aplikací.