Progressive Web Apps (PWA) is a new technology that creates a middle ground between a website and a mobile app. They are installed on the phone like a normal app (web app) and can be accessed from the home screen. Users can come back to your website by launching the app from their home screen and interact with your website through an app-like interface! Every time a page is visited it is cached locally on their device, and it will still be accessible offline.
To use this AMP plugin for WordPress, you’ll first want to navigate to Plugins -> Add New in your dashboard. Search for ” PWA for WP & AMP “, and install and download the plugin
Once you install and activate this plugin it will redirect to the PWA setting panel.
Basic Setup of PWA.
- Application Name: The name of PWA that would like to show when a user adds PWA to their home screen.
- Application Short Name: When insufficient space to display the full name of the application, which we mentioned at Application Name.
- Description: It won’t have any impact on the user-end. But it will be helpful if you are posting the websites manifest at some Progressive Web Apps listing directories.
- Application Icon: This will be the icon of your PWA app when installed on the phone. It must be a PNG format image with 192px*192px in size.
- Splash Screen Icon: The icon to be shown when the PWA is opened on any supported devices. It must be a PNG format image with 512px*512px in size.
- Offline Page: The page which is displayed when the device is offline. And requested page is not already cached or viewed from the browser. If you can add a customized page mentioning something like a message “Your Internet is Offline, check the internet connection”. It will help users to get a more clear idea of the use case.
- 404 Page: 404 pages are displayed and the requested page is not found. Current 404 page is
- Start Page: The page which loads when the application is launched from a device when tapping the icon.
- Orientation: Set the orientation of your app on devices
- Display: The mode which decides what browser UI is shown when your app is launched
- Similarly, you can click on the Design option in which you can set the background color and Theme color.
Anyone browsing the site on a supported mobile device will see the ‘Add To Home Screen’ notice and will be able to add the website brand icon on their home screen, just like a real mobile app.
That’s it for this tutorial!
We hope we’ve clear your doubts in case If you have any feedback or questions, Just contact us here and we are always available for you.
