← Back to all articles

Engineering / Guide

Packaging Modern Web Apps for App Stores with PWABuilder

How to validate baseline PWA requirements, configure web manifests and service workers, and package web applications for Google Play and Microsoft Store.

Sep 2024•5 min read

PWABuilder is an open source tool that allows developers to package their PWAs for publishing to various stores, including Microsoft, Google Play, Meta Quest, and the iOS App Store.

Prerequisites

If your web app meets a few baseline PWA requirements, you can use PWABuilder to validate, score, and package your application for stores.

Your PWA needs to:

If your app meets these requirements, you can package with PWABuilder.

Resource: https://docs.pwabuilder.com/#/builder/quick-start

Converting Existing Web Apps to PWAs

If you have an existing web app that you want to convert to a progressive web app, you can use PWABuilder Studio to add the necessary pieces to your app.

  1. Install PWA Builder vscode extension: The PWABuilder Code extension is available within Visual Studio Code in the extensions tab. If you search for PWABuilder Studio or PWABuilder
  2. Add web manifest: https://docs.pwabuilder.com/#/studio/existing-app?id=add-a-web-manifest
  3. Generate service worker: https://docs.pwabuilder.com/#/studio/existing-app?id=add-a-service-worker
  4. Generate icon: https://docs.pwabuilder.com/#/studio/existing-app?id=generate-icons or you can create your own here: https://favicon.io/favicon-generator/
  5. Deploy PWA Web App using GitHub (https://docs.pwabuilder.com/#/starter/publish?id=github-pages ) or other hosting providers

Validating and Generate Package for store

  1. Visit https://www.pwabuilder.com/ and add the URL of your website there:

pwa-1.png

  1. Wait until the process done, they will validate and check if our app is ready to push to store e.g. google play store
  2. They will give us some suggestions that we can improve

pwa-2.png

  1. We need to check that and make sure we have already added the settings that are required for our web app. That have a GUI that can help us edit the manifest file for the PWA settings

pwa-3.png

  1. After that, we can download the package for our app

pwa-4.png

  1. Then we need to deploy our assetlink.json that we get from the package: https://docs.pwabuilder.com/#/builder/android?id=publish
  2. For uploading our app to google play store we can follow this: https://docs.pwabuilder.com/#/builder/android?id=_2-upload-your-app-to-the-google-play-store and https://developers.google.com/codelabs/pwa-in-play#3
  3. I cannot check any further for that because I didn’t have google play store account, because I need to purchase to create account:

pwa-5.png

Conclusion

  1. PWABuilder is only a tool that help us to create PWA
  2. They have a pre-setup template that we can use to build a PWA
  3. Even if we don't want to use their template because they didn’t use react.js, we can still use their tools to guide us to set up the PWA in our current app e.g. validating and editing our manifest.json file.
  4. PWABuilder enables developers to quickly and easily to generate store uploadable packages for the Microsoft, Google Play, and iOS App stores.