Uw website omzetten naar een progressive web app

Uw website omzetten naar een PWA (geteste code) | We.Inc

Maak elke website installeerbaar en offline bruikbaar: een manifestgenerator, een geteste service worker, een installatieknop, de beperkingen op iPhone en de setup voor Vite of Next.js.

Uw website omzetten naar een progressive web app

Om een website om te zetten naar een progressive web app, serveert u haar via HTTPS, voegt u een manifest.webmanifest toe met een name, start_url, weergavemodus en iconen van 192 en 512 pixels, linkt u die vanaf elke pagina en registreert u een service worker die bestanden cachet voor offline gebruik. Chromium-browsers bieden dan installatie aan; Safari-gebruikers voegen haar toe via Deel.

De drie onderdelen van een PWA

Onderdeel
Wat het doet

Naam, iconen, kleuren en hoe de app opent

Service worker (sw.js)
Cachet bestanden zodat pagina's offline laden

HTTPS
Vereist voor service workers en installatie

Vul het formulier in om een manifest en de head-tags om te plakken te krijgen, en kopieer daarna de service worker en het installatiescript. De worker op deze pagina hebben we in een echte browser met verbroken netwerk gedraaid voordat we hem publiceerden.

Maak iconen van 192 en 512 pixels, plus een maskable versie met het logo binnen de middelste 80 procent.
Genereer het manifest met het formulier, sla het op als manifest.webmanifest in de root van de site en plak de head-tags in elke pagina.
Sla sw.js, offline.html en het registratiescript op, en zet uw kernbestanden in PRECACHE.
Open Chrome DevTools, paneel Application: kijk bij Manifest naar installatieproblemen en bij Service workers naar de draaiende worker. Vink Offline aan en herlaad om te testen.
Wijzigt u gecachete bestanden, verhoog dan VERSION zodat terugkerende bezoekers de nieuwe krijgen.

Serveer sw.js vanuit de root van de site. Een worker beheert alleen pagina's in of onder zijn eigen map.
Cache sw.js zelf niet met lange HTTP-cacheheaders; browsers controleren het bestand op updates.
Houd de precachelijst kort. Alles erin wordt bij het eerste bezoek gedownload.
Vertel mensen op iPhone hoe ze installeren: Deel, dan Zet op beginscherm. Er is geen prompt om te activeren.
Test offline door ook uw lokale server te stoppen naast het vakje Offline, zodat de eigen requests van de worker ook mislukken.

Veelgestelde vragen

Heeft een PWA een service worker nodig om installeerbaar te zijn?

In de huidige Chrome niet: een geldig manifest, HTTPS en wat interactie van de gebruiker zijn genoeg voor de installatieoptie. U wilt toch een worker, want zonder worker toont de geïnstalleerde app offline de foutpagina van de browser.

Werken PWA's op iPhone?

Ja, met beperkingen. Safari-gebruikers installeren via het menu Deel, er is geen install prompt-event en pushmeldingen werken alleen voor een site die op het beginscherm is gezet op iOS 16.4 of later. Offline caching werkt wel.

Waarom verschijnt mijn installatieknop nooit?

beforeinstallprompt wordt alleen in Chromium-browsers afgevuurd, alleen als aan de installatiecriteria is voldaan en niet als de app al is geïnstalleerd. Kijk in het onderdeel Manifest van het paneel Application in DevTools voor de reden.

Hoe controleer ik een PWA nu Lighthouse geen PWA-score meer heeft?

Lighthouse 12 heeft de PWA-categorie geschrapt. Gebruik het paneel Application in Chrome DevTools: de weergave Manifest toont installatiefouten en problemen met iconen, en de weergave Service workers toont registratie, updates en een schakelaar Offline.

Hoe werk ik een PWA bij na een release?

Wijzig de cache-VERSION in sw.js. De browser ziet de gewijzigde worker, installeert hem en de activate-stap verwijdert de oude caches. Met skipWaiting en clients.claim neemt de nieuwe worker het over bij de volgende keer laden.

Cache-first of network-first

Cache-first antwoordt vanuit de cache en gaat alleen naar het netwerk voor dingen die nog niet zijn opgeslagen. Het is snel en geschikt voor bestanden waarvan de inhoud onder dezelfde naam nooit verandert, zoals gehashte scripts, lettertypen en iconen.
Network-first vraagt het de server en gebruikt de cache alleen als dat mislukt. Het past bij HTML-pagina's, waar een oude kopie na een update mensen zou verwarren. De worker hierboven gebruikt beide: network-first voor het laden van pagina's, cache-first voor al het andere.

Veelgemaakte fouten

De worker registreren vanaf een pad in een submap zoals /js/sw.js, waardoor hij beperkt blijft tot pagina's onder /js/.
Vergeten VERSION te wijzigen, zodat terugkerende bezoekers wekenlang oude CSS en scripts houden.
Responses van andere sites of foutresponses cachen. De worker hierboven slaat cross-origin requests over en bewaart alleen geslaagde responses voor assets.
Alleen in Chrome testen. Open de site op een iPhone om te zien wat Safari-gebruikers echt krijgen.

Wat u krijgt, en de beperkingen op iPhone

Installeren geeft uw site een eigen icoon en een venster zonder adresbalk. Een service worker voegt offline pagina's toe. Push heeft beide nodig, en Apple staat het alleen toe voor sites die de gebruiker op het beginscherm heeft gezet.

Wat een PWA kan, per platform

Functie
Chrome / Edge (desktop, Android)
Safari op iPhone en iPad
Firefox

Installeren op beginscherm of desktop
Ja, met een installatieprompt
Ja, handmatig: Deel, dan Zet op beginscherm
Android: ja. Desktop: beperkt, controleer uw versie

Eigen installatieknop (beforeinstallprompt)
Ja
Nee
Nee

Offline met een service worker
Ja
Ja
Ja

Webpushmeldingen
Ja
Alleen voor een site op het beginscherm, iOS 16.4 of later
Ja

Blijvende opslag
Ja, kan bij ruimtegebrek worden gewist
In Safari-tabbladen kan door scripts geschreven opslag worden gewist na 7 dagen browsergebruik zonder bezoek; apps op het beginscherm houden hun eigen telling bij
Ja, kan bij ruimtegebrek worden gewist

Synchronisatie op de achtergrond
Ja
Nee
Nee

Een werkende service worker

Drie bestanden laten een site offline werken: de worker, een terugvalpagina en een paar regels om hem te registreren. We draaiden precies deze bestanden op localhost in Chromium: de worker werd geïnstalleerd, de cache vulde zich, en met de server gestopt laadde de homepage uit de cache terwijl een nooit bezochte pagina offline.html toonde.

sw.js: een minimale service worker die offline werkt

Pagina's proberen eerst het netwerk zodat mensen verse inhoud zien, vallen dan terug op een gecachete kopie en daarna op offline.html. Bestanden zoals CSS, scripts en iconen komen eerst uit de cache. Door VERSION te wijzigen verwijdert de volgende activate-stap de oude caches.

offline.html: de terugvalpagina

Houd haar op zichzelf staand: inline styles en geen externe bestanden, want verder is er misschien niets bereikbaar als ze verschijnt.

Een installatieknop

app.js: registreer de worker en toon een installatieknop

Het beforeinstallprompt-event wordt alleen in Chromium-browsers afgevuurd (Chrome, Edge, Samsung Internet, Opera). Safari en Firefox sturen het nooit, dus daar blijft de knop verborgen en gebruiken mensen het eigen menu van de browser.

Installatiecriteria van nu

Chrome eist niet langer een service worker voordat het installatie aanbiedt; het manifest en de onderdelen hieronder zijn wat het controleert. Lighthouse 12 heeft de PWA-categorie verwijderd, dus controleer de installeerbaarheid in Chrome DevTools: paneel Application, dan Manifest, waar eventuele problemen onder Installability staan.

De installatievereisten van Chrome

Vereiste
Detail

HTTPS
Veilig geserveerd. localhost telt als veilig om te testen.

Naam in het manifest
name of short_name

Iconen in het manifest
Minstens een icoon van 192 px en een van 512 px

Aanwezig in het manifest

fullscreen, standalone, minimal-ui of window-controls-overlay

Ontbreekt of false

Interactie
De bezoeker heeft minstens één keer op de pagina geklikt of getikt en er wat tijd doorgebracht

Setups voor Vite en Next.js

Vite: vite-plugin-pwa

Installeer met npm i -D vite-plugin-pwa. De plugin schrijft het manifest en genereert tijdens de build een Workbox-service worker, dus u schrijft sw.js niet met de hand. Zet de iconen in public/.

Next.js App Router: app/manifest.ts

Next.js serveert dit bestand op /manifest.webmanifest en voegt de link-tag voor u toe. Voor offline ondersteuning zet u de sw.js van hierboven in public/ en registreert u hem vanuit een kleine client component.

Next.js: registreer public/sw.js vanuit een client component

Render dit één keer in app/layout.tsx. Sla registratie over in development zodat een gecachete build uw wijzigingen niet verbergt.

Naam van de app

Korte naam (onder het icoon)

Start-URL

Map met iconen

Themakleur

Achtergrondkleur

Kopiëren

Manifestgenerator

Weergave

Een maskable icoon toevoegen

Sla uw iconen op als icon-192.png en icon-512.png (en icon-512-maskable.png) in de map met iconen.

Uw website omzetten naar een progressive web app

Uw website omzetten naar een PWA (geteste code) | We.Inc