How to Distribute Your Progressive Web App (PWA) to Your Customers
In this article we’ll go over how to distribute the Progressive Web App (PWA) version of your app. PWAs are web apps that are initially accessed through the web, and with PWAs, your users essential "bookmark" your PWA to their device, instead of downloading it from an App Store.
Note: PWAs in general, whichever platform it is that generates them, have limitations on how certain features work. For example, there are limitations on how web views work because it's basically like viewing a website in another website in a browser which is why we recommend that you go with the native version of the app (the version that’s submitted to the app stores). If you would like to learn more about PWA’s limitations, you can do so here.
Keeping in mind that PWAs do have limitations, read on to learn how to distribute the PWA version of your app if you decide to use it.
How to Get Your PWA Out to Your Users
When you build an app, your PWA is being created simultaneously. Pretty cool, right? There are just a few steps you need to follow to get it to your users.
Step 1: Upgrade your account to a paid subscription
Step 2: Create a subdomain (also called a CName) for the custom domain you'd like to use for your PWA and point it to pwa.appdocumentation.com
Technically, you can just use the PWA/HTML5 link that’s automatically generated for you to distribute your app, but most people prefer to set up a custom domain for their PWA.
A custom domain, however, will let your users access and download your app right through your own domain/website through a link such as app.yourdomain.com.
To set up a subdomain (aka CName), you will do that through your domain hosting provider. You'll login and go to your DNS settings where you should be able to add a CName. It will look something like the picture below.
Note: Each hosting provider is a little different, so you might try Googling your provider name with "how to set up a cname".
Step 3: In the App Dashboard go to the “Domain” page found in the “Progressive Web Apps” tab
Go back to your app's control panel and access your PWA's domain settings.
Step 4: Enter the subdomain you created into the field
Scroll down to the "Custom Domain" section and enter the subdomain you created for your PWA and click Save.
(Optional) Step 5: Fill out your metadata information so that your app is more easily searched by search engines.
META tag is an HTML tag containing information for search engines about a specific app. META tags contain keywords or phrases alerting search engines of an app's content to be included in search results for users requesting related information. You can do this in the META Tags page.
(Optional) Step 6: Upload your SSL certificate
Uploading your SSL will add extra security to your PWA via HTTPS to prevent snooping and to ensure content hasn't been tampered with. To do so, simply follow the instructions at the bottom of the “Domain” page:
If you would like to learn more about the Progressive Web Apps tab, you can do so here.
How Your Users can Download/Save Your App to their Devices
Now that you know how to set up your PWA, lets go over how users will add it to their phones.
Step 1: Have them open their phone’s browser and go to the PWA via your custom domain (or the PWA/HTML5 link generated for you if you haven't created one)
Step 2: Have them tap on this button in the browser
Step 3: Have them select “Add to Home Screen”
Step 4: Have them give it a name (it should automatically use the app icon name that you set up in the App Dashboard) then click “Add"
They can now access your app from their phone’s home screen just like any other app.
In addition to this article, we recommend checking out the following related articles so that you have a better insight into how to use the system to its fullest advantage:
- What Is The Progressive Web Apps Tab?
- What Are Progressive Web Apps (PWAs) and What Are Their Limitations
Still have questions? No problem! Reach out to us and we’d be happy to help :)