SuperPWA – turn your WordPress website into an APP instantly

PetitQ WordPress Tutorial 2023-7-03 3.52K zero three

Collection

PWA is the abbreviation of Progressive Web App, which translates into progressive enhanced web applications. It is a concept proposed by Google in 2016 and a web technology launched in 2017. The purpose is to use the provided standardized framework on the mobile end to realize the progressive web application with a user experience similar to the native application in the web application. We can install it in Chrome, as shown:

The mobile terminal will also prompt you to install it. How to implement this function? If you use WordPress, you can instantly support PWA on the website with only one plug-in, which is SuperPWA. There are many WordPress plug-ins that support PWA in the background, but SuperPWA is used by the largest number of people and is easy to use. Besides, the uninstallation of plug-ins is also very clean and does not write to the database, so this plug-in is a little reassuring.

1： Installation

You can search SuperPWA in the plug-in library in the background of WordPress to find:

It is estimated that the PWA in the middle is also good, and many people use it, but we still use SuperPWA. After all, we have used it and know how to do it.

Want to be here? contact us bar

2： Settings

After the installation and enabling, we need to set the plug-in. The most important thing is to set the application icon and the startup screen icon:

Application icon: This will be the icon of your application installed on your phone. It must be 192x192 pixels of the same PNG image.
Startup screen icon: This icon will be displayed on the initial screen of applications on supported devices. It must be 512x512 pixels of the same PNG image.

The application name should be written as the name of your own website, and the rest should be set by default. After setting, it will look like this:

After setting, save. The plug-in will automatically help our wordpress website generate PWA supporting applications. It is the appearance introduced at the beginning. It can be installed in the browser.

3： ADD-ONS

We see that the plug-in also has an add ons option, which can be selected as appropriate, such as selecting the Apple touch icon: as shown in the figure:

Of course, it doesn't matter if you don't choose either. Free, free, free!

4： Effect

The effect of PC end installation:

After installation, an APP will be generated on the desktop.

Mobile terminal: After opening the website with chrome, the installation option will pop up at the bottom:

Select Install, and then an APP will be generated on the mobile phone desktop. Well, I think it's pretty good.

5： Summary

At present, many blogs and websites support PWA. It is very simple for Wordpress sites to support PWA. You can download a PWA plug-in. If you are not a WordPress site, you have to set it yourself.

As for understanding PWA in depth, you can search the document for yourself. Although PWA is very interesting, it is not as good as expected, but it is also OK to play.