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 Control Panel. It’s located under the “Advanced” 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.

Custom Domain

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, 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”.

Share Settings

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 Advanced > App Share Settings and click “Restore System Default URLs” 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.
​

META Tags

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 these 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!

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:

Still have questions? No problem! Reach out to us and we’d be happy to help :)