Hoe je je Progressive Web App publiceert en bijwerkt

Je PWA

Je app kan ook een Progressive Web App zijn, of PWA: een website die werkt als een app, in elke browser, op een telefoon of een computer, zonder store. Zo publiceer (activeer) je hem en houd je hem actueel.

Alles begint in ‘Publish my project’, bovenaan elke pagina. Je PWA is direct klaar, zonder vereisten.

Vóór het publiceren

Geef je PWA vóór het publiceren een icoon. In ‘My App’, ‘App icon’, Custom is dat het ‘Apple Touch Icon’, onder PWA.

Open daarna in de zijbalk Publish, PWA, Publish: de pagina ‘PWA publication’.

Met vijf optionele stappen ga je verder: je eigen domeinnaam, zoekmachineoptimalisatie, webpushmeldingen, een kaartsleutel en een sitemap. Geen ervan is verplicht.

Een waarschuwing meldt wanneer een functie in een PWA iets extra's nodig heeft: hier vraagt een functie met geolocatie een API-sleutel.

Redirection bepaalt waar bezoekers heen gaan als je je PWA ooit uitschakelt.

Je PWA publiceren

Klaar? Klik op ‘Publish my PWA’.

GoodBarber genereert je PWA. Dat duurt een paar minuten.

Je PWA staat online, op een eigen adres. Volg de link of scan de QR-code met je telefoon.

Wil je hem uitschakelen, dan klik je op Disable: bezoekers gaan dan naar wat je in Redirection koos.

In ‘Publish my project’ staat je PWA nu op Live.

Je PWA openen

Open het adres in elke browser. Op een computer verschijnt je app als website.

Op een telefoon ziet hij er precies uit als je app.

Bezoekers kunnen hem ook installeren: in het menu van Chrome is dat ‘Install and create shortcut’.

Een tik op Install… en je icoon staat tussen hun apps… en opent op volledig scherm, als een native app.

Je PWA bijwerken

Wijzig nu iets in je app: in de header bijvoorbeeld de ‘Logo color’.

De preview toont het meteen… maar je PWA niet: die toont wat je het laatst publiceerde.

‘Publish my project’ toont nu ‘Update now’: er wachten wijzigingen op publicatie.

In Publish, PWA, Update toont ‘Live update’ de wijzigingen die met ‘Update now’ meegaan.

Andere, zoals een nieuwe extensie of machtiging, vereisen dat je PWA opnieuw wordt gebouwd: ze wachten hier tot je op ‘Rebuild my PWA’ klikt.

Open ‘Publish my project’ om je wijziging te publiceren, en klik op ‘Update now’… en bevestig.

Een paar seconden later is je project bijgewerkt.

Herlaad je PWA: de wijziging staat erin. Bezoekers zien die zodra ze hem weer openen.

Nieuwe content

Met content gaat het anders. Publiceer een artikel in een van je secties… en het staat meteen in je PWA, zonder update.

‘Publish my project’ toont nog ‘Project updated’. Voortaan publiceer je hier je wijzigingen.