en en en da en en sv en da tr da da da da da da tl en tl da da en en sv fr de de fr fr fr sv en fr en ja fr de fr es nb fr de en en sv en en en en en en en en en da pt pt pt pt pt en pt pt da da da da da da da da da da nb da da en da en da sv da da da sv da nb nb en da da da da en nl da sv da en
Angular 6 pwa: Progressive Web App – NerdGirl
Forbud fører sjældent noget godt med sig
(Last Updated On: 25. juli 2018)
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:
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)
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"})
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.
Posted in Webudvikling Tagged angular 6, manifest, pwa, service worker
Angular 6 http: Kommunikation med api
I gang med Angular 13 på Linux
Brug af grep kommandoen
Installer Asbru Connection Manager på Fedora
Installer DBeaver på Fedora
Node Package Manager (npm)
Linux: Afvikle en kommando som en anden bruger
MariaDB: Slå generel log til midlertidigt
Udskift nouveau driver med NVIDIA på Fedora 33 – og fortryd
Skab overblik over dine DMARC rapporter
Kategorier Vælg kategori Aftensmad Akrylmaling Bagværk Computer Dessert Fotografi Generelt Grød Hakket oksekød Hobby Hvidkål Ikke kategoriseret Internet IT Krop og sind PHP Pizza Politik Samfund Server Tips & Tricks Vegansk Webudvikling
Arkiver Vælg måned august 2022 april 2022 marts 2022 oktober 2021 maj 2021 marts 2021 februar 2021 januar 2021 december 2020 november 2020 oktober 2020 august 2020 juli 2020 juni 2020 marts 2020 januar 2020 december 2019 november 2019 oktober 2019 august 2019 juni 2019 april 2019 februar 2019 december 2018 oktober 2018 september 2018 juli 2018 juni 2018 maj 2018 april 2018 februar 2018 januar 2018 december 2017 oktober 2017 september 2017 august 2017 juli 2017 juni 2017 maj 2017 april 2017 januar 2017 december 2016 november 2016 oktober 2016 september 2016 januar 2016 december 2015 november 2015 oktober 2015 september 2015
Proudly powered by WordPress | Theme: chichi by xtianmark.