The Progressive Web Apps Tab is where you can manage your Progressive Web App’s (PWA) settings. In this article we’ll go over the different sections of the Progressive Web Apps tab.
In this tab you can:
You can access the Progressive Web Apps tab in the side menu of the App Dashboard. It’s located under the “Users” tab.
Note: in order for the Progressive Web Apps tab to appear, your app will need to be on one of our paid plans.
Next we’ll go over the different areas of the Progressive Web Apps tab and what you can do in them.
The custom domain section allows you to enter in a custom domain to use for your PWA. In order to do this, you’ll need to set up a cNAME in your domain’s DNS settings and point it to pwa.appdocumentation.com. If you need help with how to add a cNAME to your DNS settings, GoDaddy has a great article on that which you can access here.
If you’re using a different service than GoDaddy, then we recommend reaching out to them for instructions on how to do this in their system as every domain hosting company has a slightly different system.
Once you have set up the cNAME, enter in the full URL that you’re going to use in the “Domain” box and click “Save”.
The share settings are where you can grab the HTML5 link for the PWA version of your app. The HTML5 link is the default link that’s generated for the PWA version, and the Promo Page is a promotional page that we provide for you to use if you would like.
If these don’t display for you automatically, go to Settings -> Share Settings and click “Restore System Defaults” then “Save”. Once that’s done the HTML5 and Promo Page URL should be generated for you.
Certificate Request Form
If you decide to use a custom domain for your PWA, you can add a layer of security to it with a SSL certificate. You will need to fill out the Certificate Request Form first:
Then follow the steps above it to generate your SSL certificate.
Once you’ve generated the SSL certificate you can upload it to the App Dashboard in the Certificate Request Form section.
Since PWAs are web-based, you can use the PWA’s HTML META tag. The META tag is allows people to display certain information about a website, or in PWA’s case, an app. It can help users find your PWA quicker through terms or key phrases that you set up in the PWA’s description. Here’s a visual example of a META tag in work:
Doing a search for “example page” you’ll see the term “example” in bold. This is a keyword that helps differentiate this site from other pages that use the term “example”. The better the app description is, the better your chances are of having your PWA appear at the top of search engines’ results. To set up a description for your PWA, all you need to do is type it in the “Description” box, and enter in the URL that you’re going to use for your PWA.
Social Media Tag
Along with setting up the main META tag for your PWA, you can also adjust some parts of the way that your PWA’s information is shown in Facebook and Twitter when your PWA is recommended, liked, or shared on the platforms. You can edit this information in the “Social Media Tag” section. We have areas for Facebook:
As well as Twitter:
Once you have completed setting up this information, make sure you click “Save” at the bottom of the page.
Congratulations! You now know how to use the Progressive Web Apps tab!