Turn your WordPress site into a Progressive Web App(PWA)
A Progressive Web App(PWA) is a web app with the latest web technologies, capabilities to behave just like any native mobile app and in the process, delivering an app-like experience to users. They have superior web experience.
Progressive Web Apps are installed on the phone just like any other normal app and are accessible from the home screen. These apps are reliable, fast and engaging.
PWAs load instantly and have low tendencies of showing down sour regardless of the state of the network. They respond quickly to users' interactions, less janky scrolling. Just any natural app on a device, they have an immersive user experience.
Making your Wordpress site a PWA is important because it grows user's engagement and increases conversions of new users. Users who visit your website will come back by launching the app right from their home screen. They are bound to experience an instant loading.
Super Progressive Web Apps is WordPress that can make it easy for you to convert your WordPress website into a Progressive Web App instantly. It is reliable and easy to configure because it needs no programming skill to be able to set it up.
Once installed, users browsing your website from their supported mobile device will see a “Add To Home Screen” notice (from the bottom of the screen) and will be able to ‘install your website’ on the home screen of their device. Every page visited is stored locally on their device and will be available to read even when they are offline.
How to turn your WordPress site into a progressive web app
Let's use the WordPress installing process
- Login your Wordpress website Admin
- Inside the Dashboard, Click on Plugin > Add New
- Search for "Super Progressive Web Apps"
- Click "Install Now" and then "Activate" Super Progressive Web Apps
The nest thing is to customize your progressive web app so as to make it look the way you want it to be.
Customizing your PWA through the Super Progressive Web App
- Select the SuperPWA from your Admin dashboard
- Set a Background Color for the splash screen to be shown when your PWA is opened on a mobile device.
- Set the Application Icon. This will be the icon of your PWA when it is added to the home screen in a mobile device. The icon must be a PNG image and exactly 192 x 192 pixels in size[failure to adhere to this may make the app not to work].
- Set the Offline Page. This page will be displayed if the user is offline and the page he requested is not cached already. Ideally, you should create a dedicated WordPress page and set it here. Within the page you create, you could add a note that reads, “It looks like you are offline and the page you requested is not available right now. Please check back again once you are online.”.
- Click “Save Settings”.
Now, load your website URL from a supported device lets say chrome 62 or higher in an Android phone.
You are expected to see a pop-up that has the application Icon and a button reading "ADD TO HOME SCREEN". Once the button is clicked the PWA will be added to the home screen of the device. You will have to wait for some minutes to allow it to install just like any other native app.
After installing, go to the device home screen and load the app from there, disconnect the device from the internet and open your PWA again. This time, you should be able to see all the pages that where previously browsed by you.
NOTE:
Your website must have an SSL certificate installed running on https instead of HTTP.
Make sure your browser cache if in case it fails to work.
Drop a comment if in case you encounter any problem during the installation and customization.
Posted from my blog with SteemPress : http://247creaks.com/blog/turn-your-wordpress-site-into-a-progressive-web-apppwa/