This is the 19th day of my participation in the August More Text Challenge

A Service Worker is a Worker thread in the browser background that is independent of the main thread, so its processing power can be detached from the browser form without affecting page rendering performance. It can also implement functions such as push notification, background synchronization, request interception and cache management.

An overview of the Service Worker

Service Worker is a technology that appears along with PWA(Progressive Web App We) App launched by Google. It can realize functions comparable to native apps, such as message push, background loading, offline application and mobile terminal addition to the home screen. At the same time, it also has the experience characteristic of “no need to install and run out”. Although Service Worker has been included in W3C standards, its compatibility on various ends is not ideal. At present, most applications are still on chrom-based PC browsers.

Technical origin

We all know that JavaScript execution is single-threaded, and if one task consumes a lot of computing resources, it will block the execution of other tasks, which is the disadvantage of single-threaded execution. The Browser has introduced the Web Worker, which is a Worker thread separate from the main thread of the browser and can handle more complex calculations without worrying about whether this will negatively affect page rendering. On this basis, Service Worker adds the ability to manage offline cache, and its performance makes up for many defects of implementing offline cache by AppCache in HTML5. The Service Worker defines an event-driven lifecycle that allows any network request events on a page to be intercepted and processed, as well as access to caches and IndexedDB, which allows developers to develop more customized cache management policies to improve the Web experience in off-line weak networks.

The basic characteristics of

The following is a brief summary of Service workers.

  • Independent of the browser main thread, you cannot manipulate the DOM directly
  • It is available through LocalLost during development, but HTTPS support is required for deployment to an online environment.
  • Can monitor and intercept the network request of the whole site, so as to customize the request response control.
  • It is aborted when not in use and restarted when needed. So we cannot rely on the global state in its onMessage and OnFetch event listener handlers, which can be stored by accessing the IndexedDB API if necessary.
  • Promise is widely used to handle asynchrony
  • Being pushed
  • Background synchronization