PWA integratie.
Vanaf Angular 6 verloopt de PWA-integratie zeer vlotjes. Je hoeft enkel nog wat eigenschappen aan te passen en automatisch gegenereerde icoontjes te vervangen.
PWA toevoegen.
$ ng add @angular/pwa
Bekijk de output van de terminal even. Er zijn een aantal bestanden toegevoegd en enkele bestanden aangepast.
Zie: https://angular.io/guide/service-worker-config
- ngsw-config.json (toegevoegd)
Dit is het configuratiebestand voor de service worker. Hierin komt o.a. welke bestanden je gaat cachen voor offline gebruik. - src/manifest.json (toegevoegd)
Het manifest-bestand geeft informatie over de web-app (zoals de naam, de auteur, iconen, een beschrijving, ...).
Het manifest-bestand bevat ook meer details over hoe de web-app op het startscherm van een apparaat wordt geïnstalleerd.
Zie: https://developers.google.com/web/fundamentals/web-app-manifest/ - src/assets/icons/icon-XxX.png (toegevoegd)
Icoontjes in verschillende groottes. Elk apparaat kiest zelf welk icoon hij gebruikt op zijn startpagina, in de menubalk, op het splash-screen, enz...
De default icoontjes gaan we dadelijk aanpassen. - angular.json (aangepast)
"serviceWorker": true toegevoegd aan de configuratie. Hierdoor weet de compiler dat hij moet rekening houden met een service worker. - package.json (aangepast)
"@angular/service-worker toegevoegd aan de dependencies. - src/app/app.module.ts (aangepast)
ServiceWorkerModule geïmporteerd en toegevoegd aan de imports-array. - src/index.html (aangepast)
Binnen de head-tag is een link naar het manifest-bestand toegevoegd en werd de meta-tag theme-color toegevoegd.
Merk op dat de kleur tweemaal gedefinieerd wordt! Eenmaal als meta-tag in het html-document en eenmaal in manifest.json.
Het verschilt tussen beide, wordt hier beschreven.
PWA lokaal testen
Een PWA werkt ENKEL als de site via https wordt aangeboden, met uitzondering van
localhost.
De service worker wordt ook pas geïntegreerd als je de site voor productie build. Via ng serve
lukt het
niet.
Om de build-versie van de site lokaal te testen, installeer je best een lokale webserver. Wij gebruiken hiervoor de zeer eenvoudige http-server die we globaal installeren.
$ npm i -g http-server
Onze werkomgeving is klaar en nu kunnen we de service worker testen en controleren of de site offline ook nog beschikbaar is.
- Maak een productieversie van de site
$ ng build --prod
- Open een tweede terminalversie en start de webserver:
(De optie -c-1 betekent dat de browser deze site niet mag cachen.)
$ http-server -c-1 dist/projectTMK
- Voer nu vanuit Chrome een volledige audit uit.
Onze PWA-audit scoort 91%, met als enige opmerking dat we niet via https gaan.
- Upload de site naar je hosting en voer dezelfde audit uit. Ziehier het resulaat via localhost (links) en via de
externe hosting (rechts)
Offline caching
Het enige dat de service worker voorlopig implementeert, is offline caching. Dit kan je testen vanuit de Application tab in de Chrome console.
- Open in Chrome het tabblad Application.
- Vink Offline aan en vernieuw de pagina.
- Controleer of alle links in de website blijven werken.
Site automatisch vernieuwen bij nieuwe build
Het is natuurlijk ook handig dat je de gebruiker erop attent maakt dat de site werd aangepast. Ofwel kan je de nieuwe versie volledig automatisch herladen (zie video), ofwel toon je binnen de pagina een melding zodat de gebruiker zelf kan beslissen of hij de site nu of later vernieuwt.
- Open app.component.ts en wijzig de code binnen de constructor.
Merk op dat we SwUpdate en OnInit bovenaan de pagina importeren en vervolgens in AppComponent implementeren (lijn 5) en in de constructor (lijn 7) injecteren. Wat en waarom we services injecteren komt later uitgebreid aan bod.
- Wijzig bijvoorbeeld de h4-tag in src/app/todo/todo.component.html.
- Maak een nieuwe Productie-build.
- Vernieuw de pagina http://localhost:8080/.
- Ziehier het resultaat:
- Upload de pagina naar Firebase en test het resultaat.
