PWA (Progressive Web App), Chinese translation is “Progressive enhancement Web App”. It was proposed by Google in 2016 to enhance the user experience of Web, accelerate the loading speed, offline operation, message push, and can be added to the desktop on PC and mobile terminals, in a form similar to native applications.
Progressive Web App
In my 15 years of working experience, I have done PC desktop application development, mobile development, Web development, which found that Web development is almost the most extensive application range.
Web development is the most standard, and no matter what framework or server you use, you have to adhere to browser standards in the end.
In 2005, a wave of Ajax, coupled with the rapid improvement of network speed and hardware performance, a lot of desktop applications based on data management have been migrated to the Web. I believe that many people use task management system, OA, E-mail, social networking and news in their work are used through the Web.
Ajax
However, in the field of mobile terminals, the Development of the Web is not very good. In the early days, it was limited by wireless networks, mobile hardware, and developers’ mobile Web technology. The network and hardware are no longer a problem, but the experience of operating a Web APP in a browser is still very poor.
- First of all, entering an address is a hassle; Even with favorites, it’s not much better.
- Second, the gesture experience is not good, and often conflicts with the browser gesture, resulting in misoperation.
- Then, slowly, every time you have to wait to load, today’s users simply won’t tolerate that wait.
- What’s more, the small screen of the mobile phone is occupied by the address bar and menu of the browser. If the navigation of the Web App is built in, it will be very ugly together with the navigation of the browser.
- Finally, you have to be connected to the Internet, so you can’t use it offline, and even worse, when you submit an edited form, being disconnected from the network is a terrible thing.
PWA is the model to solve these problems.
What can the PWA do?
- It can be added to the system desktop or the home screen of a mobile phone (IOS is also supported, yes, there are many old sources on the web that IOS Safari is not supported, and in early March 2018, Apple announced IOS Safari support).
- It runs independently, without the browser’s address bar and other menus, and gestures are browser-independent.
- Through cache management, App Shell is realized. Some files will always be cached after the user loads them for the first time. When the user opens them next time, there is no need to request the network at all, which greatly improves the loading speed.
- By listening to the network and request processing, it is offline, and requests and data are not lost when the network suddenly ends.
Web developers who have had some experience with this should be feeling something.
So let’s talk a little bit about how does PWA do this
There are three core parts of PWA
- One is the manifest.json manifest file
- The other is service-worker
- The last Caches
Manifest.json is a standard JSON listing that defines attributes such as name, short_name, ICONS, start_URL, display, etc. They define names, ICONS, launch pages, and display modes that PWA adds to the home screen to specify how they will appear on the desktop.
A service worker is similar to a proxy in that it is a JS file that runs in the background thread once registered with JS on the Web. Developers can listen for install, activate, Fetch, push, sync, and message events in the service worker. For example, the FETCH event can be triggered when PWA applies the request network, and the developer can intercept the request by processing the FETCH event. Sync, for example, can be triggered when the network is reconnected. Developers can save their offline actions and then write their reconnected actions in Sync.
In addition, a service worker can operate Cache. Therefore, when registering a service worker for the first time, files that are not updated often can be mixed, such as global CSS, JS, images and main HTML. In this way, APP Shell is created. These cached files do not need to request the network.
Caches are not HTML5 Application Cache. Flexible use of Caches in Service workers is the focus of PWA development, such as creating App Shell as mentioned above, saving data when offline and then processing after sync is triggered when reconnecting to the Internet, and reading data saved in fetch event from cache in next request, etc. All use Caches.
Looking forward to it
Ajax has brought Web development into the so-called 2.0 era, let the Web in the desktop, replacing a lot of original desktop native development position, in the past a lot of winform, Qt and other desktop native programmers have thrown into the embrace of Web development.
In the mobile age, the Web seems to have been abandoned for a long time. While Web Apps, Hybrid and other models are gaining some ground for Web development on mobile, they are not elegant.
In other sources, I see a lot of comments expressing concern that PWA will eventually become Google’s own entertainment. I’ve thought about it, but if it solves the problem of mobile Web development, it should be a big hit.
Plus, it’s a standard pattern, not a product.
It was created by Google, but it doesn’t belong to Google alone. If other browsers and system vendors support it, it can be used by anyone who wants to use it.
Whether PWA is the best solution may not be certain, but Web probiogenesis is definitely one of the trends of the future.
This is just an introduction to the nature of the article, will soon update a development of the entry of the article, interested in the students support!