Tech giants Microsoft and Google are pushing progressive web applications (PWAs) as the standard for their app stores. They have independently, and through joint effort, found ways to turn existing web apps into PWAs, and to wrap them to be supported on different platforms. These technologies have been combined into one code-free tool:
Meet PWABuilder.
What is PWABuilder?
PWABuilder is a tool to turn web apps into PWAs that comply with the W3C’s Web App Manifest standard. You can use it either online at https://www.pwabuilder.com/ or download it from their GitHub repository and run it in your terminal.
TIP: Read the story behind the tool in this blog post by Microsoft’s PWA advocate @justinwillis96. Their starter app just so happens to use the Vaadin router.
Who made it?
PWABuilder was founded by Microsoft and is currently developed as a community-driven, open-source project. Google has since contributed their Bubblewrap CLI that runs under the hood to package PWAs as TWAs for the Play Store.
What can you do with it?
By simply providing the URL, you can turn an existing web app (running locally or deployed to the cloud) into a PWA and/or wrap it for different platforms.
How is a PWA different from a normal web app?
Although PWAs still run in the browser like any web app, they look and feel like native applications. They can be installed, scale visually to fill the screen space of any platform and even support offline functionality! Compared to regular web apps, they utilize two new technologies:
- Web app manifest
A web app manifest is a `JSON` file that describes the app to the browser and tells it how to behave when installed on a device. A typical web app manifest includes the name, icons and URL of the web app.
- ServiceWorker
A service worker is an event-driven JavaScript file that delivers “app-like” features, such as push messages, without consuming resources on the device.
Read the PWA Handbook for more information about the hows and whys of a PWA.
What else do I need to submit my PWA to app stores?
Every app store has their own requirements. These include, but are not limited to:
-
- Visual assets: Such as app store icons and screenshots of the app.
- Review: Either a manual review or automated testing (or both).
- Developer account: You often need to be a verified developer before you can submit your app for review.
- Guidelines: Local restrictions and accessibility requirements may apply.
- Software: Mandatory build tools such as Xcode for Mac.
Always read the recommendations and requirements for the individual app store before submitting for review!
Does PWABuilder work with Vaadin web apps?
The short answer is yes. The slightly longer answer? Also yes. Let me explain:
PWABuilder can be used to turn a web app into a PWA and then to package it for app store deployment. However, since Vaadin apps can easily be turned into PWAs directly in the code with the @PWA annotation, you might only need the latter feature.
You can therefore use PWABuilder to just download a wrapped package of your Vaadin PWA that you can then configure and submit to the most popular app stores. The PWA Builder currently supports wrapping for:
- Microsoft Store
- Google Play Store
- Samsung Store
Build your own PWA with Vaadin by following our comprehensive Modern Web App tutorial series or try PWABuilder by submitting your Vaadin PWA to the Microsoft, Google and Apple app stores.