Utone
PWA功能
2019/06/14 Code JavaScript

PWA

介绍

PWA(Progressive Web App), 即渐进式 web 应用。PWA 本质上是 web 应用,目的是通过多项新技术,在安全、性能、体验等方面给用户原生应用的体验。而且无需像原生应用那样繁琐的下载、安装、升级等操作。

打开chrome://inspect/#service-workers可查看 chrome 当前运行的 service worker

核心技术

Service Worker 是 PWA 的核心技术

特性

  • 基于 HTTPS 环境,这是构建 PWA 的硬性前提
  • 是一个独立的 worker 线程,独立于当前网页进程,有自己独立的 worker context
  • 可拦截 HTTP 请求和响应,可缓存文件,缓存的文件可以在网络离线状态时取到
  • 能向客户端推送消息
  • 不能直接操作 DOM
  • 异步实现,内部大都是通过 Promise 实现

Service Worker 生命周期

注册–安装–激活

注册

告诉浏览器 serviceworkerJS 文件存放在什么位置,浏览器下载、解析、执行。

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker
      .register('/sw.js')
      .then(function(registration) {
        // 注册成功
        console.log('ServiceWorker registration successful with scope: ', registration.scope)
      })
      .catch(function(err) {
        // 注册失败:(
        console.log('ServiceWorker registration failed: ', err)
      })
  })
}

安装

注册结束后,触发 install 事件,进行安装。

var CACHE_VERSION = 'sw_v8'
var CACHE_FILES = ['/js/jquery/min.js', '/js/zui/min.js', '/js/chanzhi.js']
self.addEventListener('install', function(event) {
  event.waitUntil(caches.open(CACHE_VERSION).then(cache => cache.addAll(CACHE_FILES)))
})

激活

当安装成功后,serviceworker 就会激活,这时就会处理 activate 事件回调 (提供了更新缓存策略的机会)。并可以处理功能性的事件 fetch (请求)、sync (后台同步)、push (推送)。

self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys().then(function(keys) {
      return Promise.all(
        keys.map(function(key, i) {
          if (key !== CACHE_VERSION) {
            return caches.delete(keys[i])
          }
        })
      )
    })
  )
})

Service Worker 缓存功能

安装时,service worker 将我们指定的静态资源进行缓存(即预缓存),与此同时,service worker 还可以拦截 HTTP 请求相应,做到动态缓存

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      if (response) {
        return response
      }
      var requestToCache = event.request.clone()
      return fetch(requestToCache).then(function(response) {
        if (!response || response.status !== 200) {
          return response
        }
        var responseToCache = response.clone()
        caches.open(CACHE_VERSION).then(function(cache) {
          cache.put(requestToCache, responseToCache)
        })
        return response
      })
    })
  )
})

PWA 添加横幅,增加用户使用率

  1. https://lavas.baidu.com/doc/engage-retain-users/add-to-home-screen/app-install-banners
  2. https://github.com/electron-react-boilerplate/electron-react-boilerplate
请杯咖啡呗~
支付宝
微信
本文作者:Utone
版权声明:本文首发于Utone的博客,转载请注明出处!