Angular 6 pwa: Progressive Web App

PWA (Progressive Web App) er navnet på en W3C standard der gør en hjemmeside endnu mere mobilvenlig og giver brugeren en følelse af at benytte en “rigtig” app.:

    • Offline caching ved hjælp af service workers, dvs. din web app om nødvendigt også kan fungere uden en internetforbindelse.
    • Et manifest der definerer splash screen, ikoner, navn og hvorvidt app’en skal afvikles i fuld skærm.
    • Installering på hjemmeskærmen så din app kan åbnes med tryk på et ikon, ligesom en egentlig app.
    • Web notifikationer der gør det muligt at sende meddelelser til brugeren, endda i baggrunden, ligesom en egentlig app.

Det lyder omstændeligt, og det har det også været tidligere. Men i Angular 6 er det blot at spørgsmål om:

Husk blot at udskifte “mitProjekt” med navnet på din app/projekt.

Output fra ovenstående ser nogenlunde således ud:

Nu kan du så overskrive ikonerne med dine egne. Husk blot at gemme dem i de angivne størrelser. Det er bedst hvis du har et logo i svg format, som du kan åbne i f.eks. Inkscape og herfra eksportere til de forskellige størrelser.

Næste gang du bygger din app til produktion, vil systemet oprette filen ngsw_worker.js i dist folderen. Den dannes ud fra ngsw_config.json som findes i roden af dit projekt.

Der er 2 ting du skal være opmærksom på i den forbindelse.:

1) Service worker tager ikke højde for baseHref

Lige pt. tages der ikke højde for baseHref. Hvis du benytter den i dit projekt, skal du derfor, efter du har bygget, åbne main[...].js  og rette stien til worker filen fra absolut til relativ:

Dvs fra /ngsw_worker.js til ./ngsw_worker.js

2) Indsæt serviceworker i angular.json

@angular/pwa føjer kun serviceworker til standard “production” sektionen i angular.json. Jeg har oprettet en konfiguration for hvert sprog og her skal jeg derfor selv manuelt tilføje "serviceWorker": true ellers bliver ngsw_worker.js ikke genereret i dist/, når app’en bygges.

Læs mere her: Angular – Getting started with service workers

Note: Jeg har benyttet RealFaviconGenerator.net til at konfigurere manifest.json og tilpasse ikoner. Den zip fil der herefter dannes, skal pakkes ud i src/ mappen i dit projekt. Herefter tilpasser du manifest.json iht. site.webmanifest og sletter sidstnævnte. Alle de nye filer der nu findes under src/ skal herefter føjes til architect -> build -> options -> assets i angular.json.