The Progressive Web Apps Tab is where you can manage your Progressive Web App’s (PWA) settings. Read on to learn how to use this tab!

What is the Progressive Web Apps Tab?

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:

• Set up a custom domain for your PWA
• Grab the HTML5 Link and Promo Page URLs for your app
• Upload an SSL certificate for added security on your PWA
• Set up META tags for SEO (Search Engine Optimization) for your PWA
• Set up Open Graph META tags for Facebook and Twitter

How to access the Progressive Web Apps Tab

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.

What are the different sections of the Progressive Web App Tab and how do you use them?

Next we’ll go over the different areas of the Progressive Web Apps tab and what you can do in them.

The Domain Page

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

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

The META Tags Page

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