concept

Progressive Web Apps are Progressive Web applications that run in modern browsers and exhibit superpowers. Support discoverability, installability, offline operation, message push and other APP specific capabilities, this project encapsulated the above functions in the simplest way.

SIMPLE-PWA

Simple-pwa is an example project of PWA on VUE. PWA is an incremental Web application concept that does not depend on any framework, and VUE is just an implementation vehicle.

View the PWA push message server implementation

demo

Use The latest Version of Chrome (>5.0).

directory

  • Task list to view all configurable items
  • Offline browsing
  • Push notification
  • Tools: Performance tool LightHouse, SW Toolkit

Operation process

Pwa work relies on Service workers (sw).

Task List -> SW Register -> SW Listener/agent

  1. Json and register.js for registering sw.
  2. Register.js will then detect navigator.serviceWorker and register sw.js;
  3. Finally sw.js continuously listens and proxies for SW events.

Note: This project uses copy-webpack-plugin and sw-precach-webpack-plugin to compile and generate files under/SRC /sw into the root directory of the project. So using the < % = htmlWebpackPlugin. Files. PublicPath % > variable gain

index.html:


      
<html>
  <head>.<! -- Manifest -->
    <link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath %>manifest.json">
  </head>
  <body>.<! -- Service Worker register -->
    <! -- without webpush -->
    <script src="<%= htmlWebpackPlugin.files.publicPath %>register.simple.js"></script>
    <! -- with webpush -->
    <! -- <script src="<%= htmlWebpackPlugin.files.publicPath %>register.js"></script> -->
  </body>
</html>
Copy the code

register.js:

if (navigator.serviceWorker) {
  navigator.serviceWorker.register('/sw.js')
    .then(function (registration) {
      console.log('Registered events at scope: ', registration)
    })
    .catch(function (err) {
      console.log('ServiceWorker registration failed: ', err)
    })
}
Copy the code

sw.js:

self.addEventListener('some event', e => {
  // do something
})
Copy the code

Work rules

Add to the home screen

Add to the home screen can be installed, the following conditions must be met:

  1. The manifest.json file is required
  2. The manifest file needs to start the URL(start_URL)
  3. The manifest file needs at least 144×144 PNG ICONS
  4. The site is using a Service Worker running over HTTPS (or localhost), even if the SW is activated
  5. Users need to visit the site at least twice, and not more than five minutes between visits

{
  "name": "PWA Lite"."short_name": "PWA"."display": "standalone"."start_url": "/"."theme_color": "#ffffff"."background_color": "#ffffff"."icons": [{"src": "./static/appicon_144.png"."sizes": "144x144"."type": "image/png"
    },
    {
      "src": "./static/appicon_96.png"."sizes": "96x96"."type": "image/png"
    },

    {
      "src": "./static/appicon_48.png"."sizes": "48x48"."type": "image/png"}}]Copy the code

In chrome Developer Tools:

  1. Application/Manifest checks manifest.json validity
  2. Application/Service Workers Check the current SW status
  3. Select “Update on reload” when debugging Application/Service Workers

Additions to the home screen are only shown once, which is inconvenient during debugging. However, if you use Chrome to debug, check chrome://flags/#bypass-app-banner-engagement checks Check ignore so that each visit will be displayed.

Offline browsing

There are many caching modes available in SW.

When sw is activated, you can listen for fetch events in sw.js and intercept and process any requests:

If the request matches the cache, the cache result is returned. Otherwise, the request is initiated
self.addEventListener('fetch', e => {
  e.respondWith(
    caches.match(e.request).then(response= > {
      if(response ! =null) {
        return response
      }
      return fetch(e.request.url)
    })
  )
})
Copy the code

In chrome Developer Tools:

  1. Application/Cache/Cache Storage View the Cache list
  2. If sw intercepts successfully, you can see “from ServiceWorker” in the Network size column
  3. If you check Offline in Network and refresh the page, you can see that the visited page is still accessible without “not connected to the Internet”, which is the power of offline browsing

About the browser cache pattern

  1. From Memory Cache memory that exists only when the browser is running, such as Base64 image data and static resources, but cannot be controlled
  2. From Disk Cache A hard disk that is cached for a long time, such as static resources, and cannot be controlled
  3. From ServiceWorker SW agent, fully controllable

Being pushed

notification

The notification push must meet the following conditions:

  1. Sw is in the Activated state
  2. User permission notification
  3. The dialog box asking the user whether to allow will be displayed only once. You can click the I icon in the Chrome address bar and change the “Notification” item to “Use global Default Settings (ask)” to initiate the query dialog box
  4. Users will get the subscription object after they allow it, and the endpoint points to Google’s push server, so global scaling is required when receiving it

// The server pushes events
self.addEventListener('push', e => {
  // do something
}

// Push message dialog box click the event
self.addEventListener('notificationclick', e => {
  // do something
}
Copy the code

start

github

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build
Copy the code