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.
1. Setting up PWA in the Editor
You can set up the PWA feature from the Settings menu in the Editor.
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 Progressive Web Apps Offline Caching, the content of your website will be stored locally in the visitor's mobile device memory, enabling them to browse your site while offline.
Ticking Enable 'Add to Home Screen' Prompt 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 site, prompting them to add it to their home screen. Please note that this functionality is currently not supported on iOS.
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 site on their home screen by manually bookmarking it via the mobile device browser.
1.1. 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.
1.2. Customizing the home screen icon and title
You can define a title and icon 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 is the same as for the splash screen.
2. A few things to be aware of when using PWA