Hoe u een PWA publiceert in de App Store en Google Play

Een progressieve webapp (PWA) is een website die vanuit de browser kan worden geïnstalleerd. Dat is handig, maar de meeste klanten zoeken apps nog steeds in de App Store en Google Play. Als uw PWA al goed werkt op een telefoon, kunt u deze voor beide winkels verpakken zonder deze te herschrijven.

Het addertje onder het gras is dat de twee winkels webgebaseerde apps heel anders behandelen. Google heeft een officiële route voor PWA's. Apple doet dat niet, en het beoordelingsteam verwacht meer dan een opnieuw verpakte website. Deze gids behandelt de realistische opties, de regels die er toe doen, en een checklist om een ​​PWA te laten beoordelen.

Waarom überhaupt een PWA in de appstores publiceren?

Een PWA geeft gebruikers al een installatieprompt, een startschermpictogram en een ervaring op volledig scherm. Winkelvermeldingen voegen dingen toe die een browserinstallatie niet kan:

• Discovery. Mensen zoeken in de winkels naar producten zoals die van jou, en een vermelding geeft je een pagina die daar scoort.
• Trust. Een winkelvermelding met recensies en een geverifieerde uitgever is een sterker signaal dan 'Toevoegen aan startscherm' op een website.
• Betrouwbare installatie. Op de iPhone is het installeren van een PWA vanuit de browser verborgen in het deelmenu. Een winkelinstallatie is één tik.
• Native kanalen. Een verpakte app kan pushmeldingen en deep links via het platform gebruiken in plaats van afhankelijk te zijn van wat de browser blootlegt.

Niets van dit alles betekent dat u de PWA moet opgeven. De website blijft het product; de winkel-apps zijn een andere manier om het te bereiken. Lees voor de afwegingen tussen een PWA, een WebView-app en een volledig native build PWA versus native versus WebView.

Optie 1: vertrouwde webactiviteit voor Google Play

Google Play ondersteunt PWA's via a Vertrouwde webactiviteit (TWA). Een TWA is een Android-app die uw PWA op volledig scherm opent met behulp van de door de gebruiker geïnstalleerde Chrome-browser, in plaats van een ingebedde WebView. Volgens de documentatie van Chrome verifiëren de app en de website elkaar met Digital Asset Links, wat bewijst dat beide van dezelfde ontwikkelaar komen.

Hulpmiddelen zoals Noppenfolie (een opdrachtregelprogramma) en PWABuilder het Android-project voor u genereren en bouwen. De gebruikelijke stappen zijn:

1. Zorg ervoor dat uw PWA een geldig web-app-manifest, een bereikbare start-URL via HTTPS en pictogrammen heeft.
2. Genereer het Android-project met Bubblewrap of PWABuilder.
3. Publiceer een Digital Asset Links-bestand op uw domein zodat de app kan worden geverifieerd.
4. Bouw een ondertekende Android App Bundle en upload deze naar de Google Play Console.

Dingen die u moet weten voordat u deze route kiest:

• De ervaring is afhankelijk van het feit of Chrome is geïnstalleerd en up-to-date is op het apparaat. Als de verificatie mislukt of Chrome niet beschikbaar is, kunnen gebruikers een browserwerkbalk zien.
• De host-app kan uw webinhoud, cookies of lokale opslag niet rechtstreeks lezen. Communicatie met native code is beperkt.
• Je hebt nog steeds een Play Console-account, een winkelvermelding, een privacybeleid en de testvereisten nodig die Google op nieuwe persoonlijke accounts toepast. Ons publicatiegids loopt daar doorheen, inclusief de gesloten testregel.

Een TWA past goed als u vertrouwd bent met opdrachtregelprogramma's en alleen Android nodig heeft.

Optie 2: DIY-wrapper voor iOS

Apple heeft geen TWA-equivalent. Om een ​​PWA in de App Store te plaatsen heb je een native iOS-app nodig die deze laadt, meestal via WKWebView. De DIY-versie ziet er als volgt uit:

1. Maak een Xcode-project op een Mac.
2. Laad uw PWA in een webweergave en voeg pictogrammen, een startscherm en navigatie toe.
3. Schrijf u in voor het Apple Developer Program en registreer een bundel-ID.
4. Onderteken, archiveer en upload de build naar App Store Connect via de toolchain van Apple.
5. Test met TestFlight, vul de lijst en privacyantwoorden in en verzend deze ter beoordeling.

PWABuilder kan een iOS-project als uitgangspunt genereren, maar je kunt het nog steeds zelf openen en ondertekenen, waarvoor een Mac en Xcode nodig zijn. We gaan dieper in op dat proces in hoe je een website naar een iOS-app converteert zonder Xcode of een Mac.

Het grotere probleem is niet technisch. Het gaat erom of de app wordt geaccepteerd, wat we hierna bespreken.

Wat Apple verwacht van een PWA-wrapper

De App Review Guidelines van Apple zeggen dat een app "functies, inhoud en gebruikersinterface moet bevatten die hem verder brengen dan een opnieuw verpakte website" (richtlijn 4.2). Een PWA geladen in een kale webweergave is precies het soort inzending waarop de richtlijn is gericht.

Andere punten die de moeite waard zijn om te weten:

• Richtsnoer 4.2.2 zegt dat apps, afgezien van catalogi, niet in de eerste plaats marketingmateriaal, webknipsels, contentaggregators of een verzameling links mogen zijn.
• Richtlijn 2.1 verwacht een definitieve, werkende build- en demo-inloggegevens als uw app een login heeft.
• Richtsnoer 4.2.6 zegt dat apps die zijn gemaakt op basis van een gecommercialiseerd sjabloon of app-generatieservice worden afgewezen, tenzij ze rechtstreeks worden ingediend door de aanbieder van de app-inhoud. Publiceer onder uw eigen ontwikkelaarsaccount, niet onder dat van een leverancier.

Er bestaat geen formule die goedkeuring garandeert, en geen enkel instrument kan dit beloven. Wat u kunt doen, is reviewers een reden geven om een ​​echte app te zien: native navigatie, pushmeldingen waarvoor gebruikers zich aanmelden, werkende deep links en een gepolijste laad- en offline-ervaring. Voor een volledig overzicht van de beoordelingsregels, zie Apple Richtlijn 4.2: zal Apple een website-app afwijzen?.

Optie 3: Gebruik een converter voor beide winkels

Een converter zoals SiteTo.App doet de verpakking voor beide platforms vanaf uw URL. U voert het adres van uw website in, stelt de app-naam, het pictogram, de kleuren, het opstartscherm en de navigatie in, bekijkt een voorbeeld op uw telefoon en vraagt ​​een build aan.

Gebaseerd op hoe het product vandaag de dag werkt:

• Android-builds kunnen worden geproduceerd als APK of AAB.
• iOS-builds worden ondertekend met uw Apple Developer-account en afgeleverd bij TestFlight in uw App Store Connect-account, waarna u ze ter beoordeling kunt indienen.
• Pushmeldingen worden ingesteld via Firebase.
• De website blijft de bron van de waarheid, dus wijzigingen die u op internet verzendt, bereiken app-gebruikers zonder een nieuwe winkelrelease.
• De prijs bedraagt ​​eenmalig $ 29 voor Android, $ 79 voor iOS of $ 99 voor beide. De kosten voor Apple- en Google-ontwikkelaarsaccounts zijn gescheiden.

SiteTo.App behandelt uw PWA als een website: het laadt uw openbare URL in de app. Of PWA-specifieke functies zoals caching van servicemedewerkers, offlinepagina's of de webinstallatieprompt zich binnen de app-shell gedragen, hangt af van de webweergave die de app gebruikt. Test ze dus in de preview in plaats van ervan uit te gaan. Pushmeldingen in de app worden geconfigureerd via Firebase in plaats van via de webpush van uw PWA.

U kunt converters vergelijken in onze beste gids voor website-naar-app-converters, en bekijk de kostenkant hoeveel het kost om van een website een app te maken. Als uw site op een specifiek platform draait, wordt de platformpagina's leg uit wat je voor die stapel moet controleren.

Welke route moet je nemen?

• Alleen Android, comfortabel met de opdrachtregel: een TWA via Bubblewrap of PWABuilder is een goed, officieel pad.
• iOS en je hebt een Mac en een ontwikkelaar die vertrouwd is met Xcode: een doe-het-zelf-wrapper geeft volledige controle, maar jij bent eigenaar van elke herbouw en de SDK-updates.
• Beide winkels, zonder eigen projecten te bezitten: een converter kost de minste moeite en je behoudt de website als product.
• Een PWA die sterk afhankelijk is van offline gedrag of achtergrondsynchronisatie: test zorgvuldig voordat u zich vastlegt, welke route u ook kiest.

Bereid uw PWA voor voordat u deze verpakt

Een winkelvermelding legt zwakke punten bloot die een browsertabblad verbergt. Voordat u gaat verpakken:

• Controleer of elk scherm reageert en bruikbaar is met aanraking en de terugbeweging van het systeem.
• Zorg ervoor dat inloggen, afrekenen en bestandsuploads in een ingesloten weergave werken, inclusief eventuele authenticatie van derden die een pop-up of omleiding opent.
• Voeg een privacybeleidspagina en een ondersteuningspagina toe die bereikbaar zijn zonder in te loggen.
• Bepaal welke externe links in de app worden geopend en welke in de browser worden geopend.
• Behandel offline- en foutstatussen met een duidelijk bericht in plaats van een leeg scherm.
• Verwijder alle berichten waarin gebruikers worden gevraagd 'deze app te installeren', aangezien ze dat al hebben gedaan.

De gereedheidscontrolelijst en kostenplanner kan u helpen gaten op te sporen voordat u gaat bouwen.

Winkelvermelding en controlechecklist

• Ontwikkelaarsaccounts zijn eigendom van uw bedrijf en niet van een aannemer.
• App-naam, pictogram en schermafbeeldingen tonen de echte app en komen overeen met de build.
• Het privacybeleid en de winkelprivacyantwoorden hebben betrekking op de website, analyses en betalingshulpmiddelen die in de app zijn geladen.
• De referenties van de reviewer werken en zijn opgenomen in de review-opmerkingen.
• De app voegt native waarde toe buiten de website, zoals navigatie, meldingen of deep links.
• Beide builds zijn getest op echte apparaten tijdens een nieuwe installatie.
• Er is iemand toegewezen om de beoordelingsberichten te bekijken en met details te reageren.

Veelgestelde vragen

Kan ik een PWA in de App Store publiceren zonder een native wrapper?

Nee. De App Store distribueert alleen native app-binaire bestanden. Een PWA moet in één pakket zijn verpakt en de verpakte app moet voldoen aan de richtlijnen van Apple.

Is een PWA toegestaan ​​op Google Play?

Ja. Google ondersteunt PWA's via vertrouwde webactiviteiten en u kunt ook een wrapper-app publiceren.

Blijft mijn PWA offline werken in de app?

Het hangt af van de route en de webweergave. Test offline gedrag in de preview of een testbuild in plaats van aan te nemen dat dit wordt overgedragen.

Heb ik een Mac nodig?

Voor een doe-het-zelf iOS-build, ja. Een converter bouwt de app voor je, maar voor App Store Connect heb je nog steeds een Apple Developer-account nodig.

Garandeert publicatie goedkeuring?

Nee. Apple en Google beslissen over elke inzending. Een betere vermelding en een meer app-achtige ervaring verbeteren uw kansen, maar kunnen het resultaat niet garanderen.

Volgende stappen

Als uw PWA gereed is, bekijk het als een app met SiteTo.App en test het op uw eigen telefoon voordat u een route bepaalt. Als u tevreden bent, beoordeelt u het prijzen en volg de handleiding maken en publiceren.