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:
|
1 |
$ ng add @angular/pwa --project mitProjekt |
Husk blot at udskifte “mitProjekt” med navnet på din app/projekt.
Output fra ovenstående ser nogenlunde således ud:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
Installing packages for tooling via npm. npm WARN bootstrap@4.1.1 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself. npm WARN bootstrap@4.1.1 requires a peer of popper.js@^1.14.3 but none is installed. You must install peer dependencies yourself. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"}) + @angular/pwa@0.6.8 added 2 packages in 22.659s Installed packages for tooling via npm. CREATE ngsw-config.json (392 bytes) CREATE src/assets/icons/icon-128x128.png (1253 bytes) CREATE src/assets/icons/icon-144x144.png (1394 bytes) CREATE src/assets/icons/icon-152x152.png (1427 bytes) CREATE src/assets/icons/icon-192x192.png (1790 bytes) CREATE src/assets/icons/icon-384x384.png (3557 bytes) CREATE src/assets/icons/icon-512x512.png (5008 bytes) CREATE src/assets/icons/icon-72x72.png (792 bytes) CREATE src/assets/icons/icon-96x96.png (958 bytes) CREATE src/manifest.json (1067 bytes) UPDATE angular.json (6453 bytes) UPDATE package.json (2728 bytes) UPDATE src/app/app.module.ts (3532 bytes) UPDATE src/index.html (381 bytes) |
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.