Uw website omzetten in een PWA van hoge kwaliteit

U kunt uw website omzetten in een volledig functionele PWA (Progressive Web Application) in een lunchpauze! In dit artikel nemen wij je mee door het volledige proces van begin tot eind.

Stap 1: Een rapportkaart maken in PWA Builder

Eerst wilt u controleren of uw website beschikt over de functies en metagegevens die grote PWA's nodig hebben.

1. Ga naar PWA Builder-
2. Voer de URL in van de website die u wilt converteren naar een PWA en klik op Start
3. PWA Builder geeft een PWA-rapportkaart weer die aangeeft welke functies uw website heeft en niet heeft.

Stap 2: Uw PWA-rapportkaart controleren

Uw PWA-rapportkaart bevat de score van uw website, met een maximumscore van 100. Scores zijn gebaseerd op drie categorieën functies.

Manifesteren

PWA evalueert het webtoepassingsmanifest van uw website als deze beschikbaar is en identificeert velden of waarden die vereist, aanbevolen en optioneel zijn. U kunt uw score verbeteren door ontbrekende waarden toe te voegen door het manifestbestand te bewerken en opnieuw te publiceren, of door de online manifesteditor te gebruiken.

Waarschuwing

Wijzigingen die zijn aangebracht in de online manifesteditor, worden niet naar uw website gepubliceerd. De wijzigingen die u aanbrengt, worden alleen gebruikt door PWA Builder bij het maken van uw PWA.

Vereiste waarden moeten aanwezig zijn, anders kan de PWA-bouwer uw PWA niet maken. Vereiste velden zijn onder andere het hebben van een manifest, pictogrammen, naam, korte naam en een start_url.

Aanbevolen velden zijn niet vereist, maar zijn belangrijk voor de gebruikerservaring van uw PWA. Het wordt sterk aanbevolen om alle aanbevolen waarden op te geven, hoewel PWA Builder zonder deze een PWA kan maken. Aanbevolen waarden zijn onder andere weergavemodus, achtergrondkleur van welkomstscherm, beschrijving, afdrukstand, schermopnamen, pictogram met hoge resolutie, maskerbaar pictogram, categorieën en snelkoppelingen.

Optionele velden zijn niet vereist, maar kunnen indien van toepassing worden opgegeven. Optionele velden bevatten een leeftijdsclassificatie en gerelateerde toepassingen.

Dienstmedewerker

Een service worker draait op de achtergrond om de uitgebreide functionaliteiten van web-apps mogelijk te maken, waar anders 404-fouten zouden optreden. Voor PWA Builder is een servicemedewerker vereist om uw PWA te maken, maar als u er geen hebt, kunt u een van de verschillende vooraf gebouwde servicemedewerkers van PWA Builder gebruiken. Een vooraf samengestelde servicemedewerker gebruiken:

1. Kies het tabblad Service Worker-opties in het menu.
2. Selecteer de juiste servicemedewerker in de gecureerde lijst. Houd er rekening mee dat er veel vooraf gedefinieerde opties zijn; Zorg ervoor dat u de servicemedewerker kiest die het meest geschikt is voor uw specifieke use-case.
3. Nadat u de servicemedewerker hebt geselecteerd die u wilt gebruiken, keert u terug naar uw PWA-rapportkaart.

Veiligheid

Voor alle PWA Builder's die zijn gebouwd met PWA Builder zijn drie beveiligingsprotocollen vereist.

1. Uw site moet HTTPS gebruiken.

2. Uw site moet een bijbehorend HTTPS-certificaat hebben.

   Als uw website geen HTTPS-certificaat heeft, kunt u publiceren naar Azure om ingebouwde HTTPS-ondersteuning te krijgen. U kunt ook gratis hulpprogramma's van derden gebruiken, zoals Letsencrypt waarmee u gratis een HTTPS-certificaat kunt verkrijgen.

3. Uw site mag geen gemengde inhoud bevatten. Gemengde inhoud is wanneer een pagina die via HTTPS wordt geleverd, resources bevat die zijn geladen via HTTP. Met gemengde inhoud wordt de beveiliging van HTTPS en uw PWA aangetast.

Stap 3: Belangrijke informatie verzamelen uit het Partnercentrum

U hebt verschillende gegevens uit uw Partnercentrum-account nodig om uw PWA te maken. Als u geen MSA hebt, klik hier voor instructies over hoe u aan de slag kunt. U moet zich ook inschrijven voor het Windows Developer Program.

Als u dit nog niet hebt gedaan, moet u uw PWA-app maken door een nieuwe naamte reserveren. Zodra u uw naam hebt gereserveerd, klikt u op de Start uw inzending knop om een nieuwe appinzending te maken.

Klik vervolgens op het tabblad Productbeheer en selecteer productidentiteit. Op de identificatiepagina van het product worden de pakket-ID, de uitgevers-ID en de weergavenaam van uw uitgever weergegeven. Sla deze waarden op en keer terug naar PWA Builder.

Stap 4: Uw PWA genereren met PWA Builder

U hebt nu alles wat u nodig hebt om uw PWA op PWA Builder te maken. Ga terug naar de PWA Builder-site en klik op de knop Genereren.

PWA Builder vraagt u om de informatie die u in stap 3 hebt verkregen in het Partnercentrum. Vul de waarden in en klik op Genereren.

Zodra PWA Builder uw PWA heeft gemaakt, wordt deze automatisch door uw browser gedownload. Uw PWA is verpakt in een .zip bestand dat zes bestanden bevat.

Het bestand msix is het hoofd-app-pakket van uw PWA. Met dit bestand wordt uw PWA geïnstalleerd op de computer van de gebruiker.

Het bestand appx is een klassiek app-pakket. Het wordt gebruikt om uw PWA te installeren op oudere versies van Windows. Zie klassieke app-pakketten voor meer informatie.

Stap 5: Uw app-pakketten verzenden naar de Microsoft Store

Deze pakketten kunnen op dezelfde manier naar de Microsoft Store worden verzonden als andere apps die zijn verpakt als een MSIX-bestand. Zie App-inzendingenvoor meer instructies voor het indienen van uw PWA-pakketten in de Store.