According to one article published by CNBC, in January of this year, around three-quarters of the world will use just their smartphones to access the internet by 2025.
If we take in consideration these stats, you should consider to build a new website or redesign the existing one, that take in consideration the principles of the PWA (Progressive Web Application) architecture.
But, what is a PWA?
A Progressive Web App (PWA) is a hybrid of a regular web page and a mobile application.
A PWA combines features offered by most modern browsers with the benefits of the mobile experience. A PWA is built using standard web technologies, including HTML, CSS, and JavaScript.
The functionalities offered by a PWA includes working offline, push notifications to the mobile device, device hardware access and enabling creating user experiences similar to native applications.
By instance you can add a PWA to the home screen of your phone in the same way you do with your mobile apps.
Why should you build a PWA?
There is a website pwastats.com, in it you can find the stats of all the most famous companies which are using PWA.
It was impressive to find out how many companies have improved the performance of their website, as a result of convert their sites into a PWA, in most cases this boost to the performance was more than 100%.
Among the improvements, a Progressive Web App can cut load times, allow users to navigate offline, increase the time spent on the website, increase revenue, can be much smaller than a mobile app, and much more.
Who is already using PWA?
It’s interesting to see the companies which already have a PWA, some of the world’s biggest tech companies such as Twitter, Instagram, Uber, Pinterest, Forbes, Alibaba and much more.
How to convert my WordPress into PWA
As almost everything in WordPress, you can add PWA functionalities with Plugins and Themes.
First, we have to choose a mobile first and responsive Theme, among them we have the official WP themes: Twenty Nineteen & Twenty Seventeen. However there are many free themes that you can use.
Among the PWA plugins we can use:
Super Progressive Web Apps: It is a 5 stars plugin, which is compatible with the latest version of WordPress and offer an easy configuration, a responsive support, clean uninstall and a community ready to help with any problem. That is the plugin we use in this blog.
PWA for WP & AMP: This is another 5 stars plugin. It brings the power of the Progressive Web Apps to the WP & AMP to take the user experience to the next level!
You can give the APP-like experience to your audience which will get your website to their home screen and works instantly like an app with offline support.
This plugin is also compatible with the latest version of WordPress and offer often updates.
PWA for WP: This is a 5 stars plugin. It turns your WP website into a PWA. To offer that functionality this plugin create two files, “Manifest” and “ServiceWorker” in your website.
Manifest file is a json file that contain the configuration of the web applications. ServiceWorker is a JavaScript file that controls PWA’s functions. To start your PWA, you must configure those two files from the configuration screen of the plugin.
You can fine-tune the cache, such as expiration date, time and URL exclusion. By excluding some URLs, like a new arrival information, data acquisition destination in Ajax, this plugin can keep PWA data fresh.
This plugin is also compatible with the latest version of WP.
How to set up Super Progressive Web Apps plugin
After you install the plugin as you usually do and after you activate the plugin a new option show up over the left options called “SuperPWA” as it is shown with an arrow below, click there:
And you will see this options:
Be sure you properly fill out the options with your appropriate values.
In case it is not clear for you, I’m describing the most important values to configure:
Application Name: This is the name the PWA will show in your smartphone.
Application Short Name: This parameter is used when there is insufficient space to display the full name of the application.
Description: It could be empty, but it is important because it will help the user to find out about what is your PWA.
Application Icon: This will be the icon of your app when installed on the phone. Must be a PNG image exactly 192×192 in size. By default it is a WordPress logo. You can change it for the logo of your website.
Splash Screen Icon: This icon will be displayed on the splash screen of your app on supported devices. Must be a PNG image exactly 512×512 in size. By default it is also a WordPress logo. I recommend change it for the logo of your website.
Start Page: Specify the page to load when the application is launched from a device. In my case it is the about me page.
Offline Page: Offline page is displayed when the device is offline and the requested page is not already cached. If the page does not exist, please add a new page and add a suitable message.
Orientation: Set the orientation of your app on devices. In the case of a blog website, the portrait orientation is better.
Display: Display mode decides what browser UI is shown when your app is launched. It is better you keep the default setting of “Standalone”.
After you set up this minimum requirements, save the changes and now your WordPress website will behave as a native app on mobile devices.