Set up a Progressive Web App (PWA)

Allow visitors quick and seamless access to your website from mobile devices, even when they're offline. 

Progressive Web Apps (PWA) is a technology that bridges traditional websites and mobile applications. Adding the website to a mobile device's home screen enables visitors to engage with the website offline and without the browser user interface (the address bar) visible for a full-screen, near-native mobile application experience.

Visitors don't need to install or download anything on their mobile device in order to use this feature. 
 

  PWA technical and operational limitations

There are a number of limitations to the PWA feature that you need to be aware of before attempting to set it up. Read more in the section A few things to be aware of when using PWA at the end of this article and take note of the specific operating system limitations outlined throughout the article.

 

Setting up PWA in the Editor

Set up PWA from within the Editor by clicking the three dots in the top-right corner of the interface and selecting Settings.

a1.jpg

Select Progressive Web App (PWA) on the left-side menu.

p2.png


The primary benefit of PWA is the ability for visitors to browse your website even when they do not have access to the internet. If you tick Enable offline caching of website, the content of your website will be stored locally in the visitor's mobile device memory, enabling them to browse your website while offline. 

Ticking Enable 'Add to home screen' prompt to visitors will encourage the visitor to add your website to their home screen when they browse it from a mobile device. A bar will appear on their mobile device when browsing your website, prompting them to add it to their home screen. Please note that this functionality is currently not supported on iOS.

p3.png

If the visitor confirms, your website will be bookmarked on their device home screen alongside their other apps. 

If you leave this option unchecked, no prompt will show when visitors browse your website but they still have the option of adding your website on their home screen by manually bookmarking it via the mobile device browser.   

p4.png

 

Customizing the splash screen

The splash screen is a graphical element that displays in between a user has clicked on an app and it has finished launching. Splash screens are currently not supported on iOS. You're able to customize the appearance of this "loading screen" by inputting a name (max. 60 characters including spaces), adding a logo in .png format (min. size 512x512 pixels), and picking a background color. The name will appear under your logo in a white font color.

p5.png


Customizing the app title on the home screen

You can define a title for your website and thereby determine how it should appear once it's been added as an app on the user's home screen. Keep in mind that the title should be max. 12 characters including spaces. The logo used for displaying the app on the home screen is the same as for the splash screen. 

p6.png

 

A few things to be aware of when using PWA

Please be aware of the following as you're setting up PWA: 

  • Your website must have an SSL certificate (HTTPS) added for PWA to work.
  • Not all mobile operating systems and browsers support the entire suite of PWA features. Make sure to check compatibility in the specific operating system or browser's technical documentation. 
  • Only pages that have been visited while browsing the website online will be cached and made available for offline browsing. If, for example, a website contains the pages Home, About and Contact and only the Home page has been visited while online, the pages About and Contact have not been cached and can't be accessed offline with PWA when clicked. Instead, the mobile device will open these pages in the browser and access them as a regular web page.
  • Devices running Chrome for Android will only show the splash screen if your logo is minimum 512x512 pixels and uploaded in .png format.
  • Push notifications to users are not supported in the current version of PWA. 
  • PWA doesn't work on password protected pages.
Was this article helpful?
0 out of 0 found this helpful