There are three major evolution paths for browsers:
  • Webization of applications
  • Mobile Web applications
  • Web operation systematization
What is the PWA?

PWA stands for Progressive Web App. It literally means “progressive +Web application”. It’s easy to understand for Web applications, which are our normal Web pages today, so what PWA supports first is a Web page. As for “progressive” **:

  • For Web application developers, PWA provides an incremental transition from a normal site to a Web application. Taking an incremental approach can reduce the cost of retrofitting your site so that it supports new technologies over time rather than all at once.
  • From a technical point of view, PWA technology is also an evolutionary process, gradually evolving on the technical level, such as better device feature support, continuous optimization of smoother animation, continuous page loading faster, continuous implementation of native application features.

PWA definition: IT is a set of ideas that incrementally enhance the advantages of the Web and progressively reduce the distance from native applications or applets through technical means

What are Web pages missing from native applications?
  • Lack of offline usage
  • Lack of ability to push messages
  • There is a lack of a primary entry point, which is to install a Web application on the desktop and open it directly from the desktop when needed, rather than having to open it through a browser every time.
What is PWA’s solution to these shortcomings?
  • Try to solve the problem of offline storage and message push by introducing Service workers
  • The first level entry problem was solved by introducing manifest.json
What is a Service Worker?

The main idea of a Service Worker is to add an interceptor between the page and the network to cache and intercept requests.

What does a Web Worker do?

In order to avoid JavaScript taking up too much of the main thread of the page, the purpose of WebWorker is to make JavaScript run outside the main thread of the page. However, since there is no DOM environment of the current page in WebWorker, So you can only execute some DOM-independent JavaScript scripts in a Web Worker and return the results to the main thread through the postMessage method. So in Chrome, a Web Worker is actually a new thread that starts in the rendering process, and its life cycle is associated with the page

== Let it run outside the main thread “is a core idea of the Service Worker from the Web Worker. = =

What are the design ideas of Service workers?
  • architecture

Service workers need to add storage function on the basis of Web workers. In addition, the Service Worker needs to serve multiple pages, so it cannot be bound to a single page. Therefore, in the current Chrome architecture, the Service Worker runs in the browser process, because the browser process has the longest life cycle. So all pages can be serviced for the lifetime of the browser

  • Being pushed

Message push is also implemented based on Service workers. Because the browser page may not be started when the message is pushed, the Service Worker is needed to receive the message pushed by the server and present the message to the user in a certain way.

  • security

Service workers use HTTPS protocol, because the communication data using HTTPS is encrypted, even if the data is intercepted, the data content cannot be cracked, and HTTPS has a verification mechanism, so it is easy for both parties to know whether the data is tampered with.

What are the additional features of the PWA?

PWA also provides a manifest.json configuration file that allows developers to customize the desktop icon, display name, and startup mode, as well as Settings such as the splash screen and color of the page theme.