Web technology has exploded in recent years

  • Webpack, rollup and other packaging tools

  • Babel, PostCSS translation tools

  • TypeScript and other shells are translated into javascript programming languages

  • React, Angular, Vue, and other modern Web front-end frameworks

  • Isomorphism JavaScript

The Web app experience is still poor

  • Network latency caused by downloading web resources

  • Web applications rely on the browser as an entry point

  • There is no good offline usage plan

  • There is no good notification scheme

The emergence of the PWA

  • Significantly improve application loading speed

  • Web applications can be used offline

  • Web apps can be added to the home screen just like native apps

  • Web applications can initiate push notifications when they are not activated

  • The ability to integrate Web applications with operating systems has been further improved

The advantage of the PWA

  • Add to the home screen as prompted or manually

  • Full screen open, not trapped in the browser UI

  • When you cannot access the network, you can perform as if you were a native application

  • Initiate push notifications as if they were native

PWA model will set off the third revolution technology of Web application model and bring web technology into a new era, just like Ajax which came out of the blue about 20 years ago and responsive design which swept the mobile Internet about 10 years ago

PWA key technology

  • Web App Manifest

    1. Carrying the heavy responsibility of web application and operating system integration capability

  • Service Worker

    1. The first attempt to take a Web application offline

    2. Offline support is achieved by submitting a cache file manifest to the LocalServer module

  • Application Cache

    1. Second attempt to take the Web application offline

    2. Build on LocalServer

    3. Disadvantages: unprogrammable, unable to clear cache, almost no routing mechanism

This is the dawn of the Service Worker

1. Third attempt to take the Web application offline

2. Programmable Web workers

3. Act as a client agent between the browser and the network, intercepting, processing, and responding to HTTP requests as they pass through

4. With the Cache Storage API, you can freely manage the Cache of HTTP request file granularity

The life cycle of the Service Worker

Service Worker installation

self.oninstall = e => {

  e.waitUntil(
    caches.open('installation')
      .then(cache => cache.addAll(
        [
          '/'.'./styles.css'.'./script.js')))}Copy the code

The Service Worker uses offline caching

self.onfetch = e => {
  const fetched = fetch(e.request)
  const cached = caches.match(e.request)

  e.respondWith(
    fetched.catch(_=>cached)  
  )
}

Copy the code

Caching policies for Service workers

The Service Worker summary

Service Worker is the core technology that supports PWA and will bring about the offline first architecture revolution

Push Notification

  1. With the advent of Push APIS, Push services have the ability to Push messages for Web applications

  2. The Push Api does not depend on the Web application and browser UI to survive, so even when the Web application and browser are not opened by the user, the background process can Push messages and call the Notification Api to notify the user

conclusion

PWA technology can be expected in the future, as the front end, it is necessary for us to master this technology, in the next few years, is bound to become your core competitiveness, old iron, quickly learn

Cloud.tencent.com/developer/s…