PWA配置教程

PWA

一、PWA 简介

一个新的前端技术，PWA（全称：Progressive Web App ）也就是说这是个渐进式的网页应用程序。
是 Google 在 2015 年提出，2016年6月才推广的项目。是结合了一系列现代Web技术的组合，在网页应用中实现和原生应用相近的用户体验。

PWA官网：https://developers.google.com/web/progressive-web-apps/

1.1 PWA关键技术

Service Worker （可以理解为服务工厂）
Manifest （应用清单）
Push Notification（推送通知）
Service Worker

1.2 浏览器支持：

顺便带一句：目前只能在 HTTPS 环境下才能使用SW，因为SW 的权利比较大，能够直接截取和返回用户的请求，所以要考虑一下安全性问题。
事件机制
功能(还是比较逆天的)
后台数据的同步
从其他域获取资源请求
接受计算密集型数据的更新，多页面共享该数据
客户端编译与依赖管理
后端服务的hook机制
根据URL模式，自定义模板
性能优化
消息推送
定时默认更新
地理围栏

1.3 生命周期：

Parsed （解析成功）：首次注册 SW 时，浏览器解决脚本并获得入口点，如果解析成功，就可以访问到 SW 注册对象，在这一点中我们需要在 HTML 页面中添加一个判断，判断该浏览器是否支持 SW 。
Installing （正在安装）：SW 脚本解析完成之后，浏览器会尝试进行安装，installing 中 install 事件被执行，如果其中有 event.waitUntil ( ) 方法，则 installing 事件会一直等到该方法中的 Promise 完成之后才会成功，如果 Promise 被拒绝，则安装失败，SW会进入 Redundant（废弃）状态。
Installed / Waiting （安装成功/等待中）：如果安装成功，SW 将会进入这个状态。
Activating （正在激活）：处于 waiting 状态的 SW 发生以下情况，将会进入 activating 状态中：当前已无激活状态的 worker 、 SW脚本中的 self.skipWaiting（）方法被调用（ ps： self 是 SW 中作用于全局的对象，这个方法根据英文翻译过来也能明白什么意思啦，跳过等待状态）、用户已关闭 SW 作用域下的所有页面，从而释放了当前处于激活状态的 worker、超出指定时间，从而释放当前处于激活状态的 worker
Activated （激活成功）：该状态，其成功接收了 document 全面控制的激活态 worker 。
Redundant （废弃）：这个状态的出现时有原因的，如果 installing 事件失败或者 activating 事件失败或者新的 SW 替换其成为激活态 worker 。installing 事件失败和 activating 事件失败的信息我们可以在 Chrome 浏览器的 DevTools 中查看
一个很不错的全面介绍sw的教程：https://www.villainhr.com/page/2017/01/08/Service%20Worker%20%E5%85%A8%E9%9D%A2%E8%BF%9B%E9%98%B6

1.4 Manifest

Web App Manifest 是一个 W3C 规范，它定义了一个基于 JSON 的 List 。Manifest 在 PWA 中的作用有：

能够将你浏览的网页添加到你的手机屏幕上
在 Android 上能够全屏启动，不显示地址栏（由于 Iphone 手机的浏览器是 Safari ，所以不支持哦）
控制屏幕横屏 / 竖屏展示
定义启动画面
可以设置你的应用启动是从主屏幕启动还是从 URL 启动
可以设置你添加屏幕上的应用程序图标、名字、图标大小

1.5 Push Notification

Push 和 Notification 是两个不同的功能，涉及到两个 API 。

Notification 是浏览器发出的通知消息。
Push 和 Notification 的关系，Push：服务器端将更新的信息传递给 SW ，Notification： SW 将更新的信息推送给用户。

二、PWA 注册

2.1 添加注册事件

在网页中添加如下内容：

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

2.2 添加 PWA 应用清单信息

在网页头部加入：

<link rel="manifest" href="./manifest.json">

然后在同一目录下新建 manifest.json 文件如下：

{
    "name": "应用名称",
    "short_name": "应用名称",
    "display": "standalone",
    "icons": [
        {  "src": "/512.png", "type": "image/png", "sizes": "512x512"  },
        {  "src": "/256.png", "type": "image/png", "sizes": "256x256"  },
        {  "src": "/128.png", "type": "image/png", "sizes": "128x128"  },
        {  "src": "/_64.png", "type": "image/png", "sizes": "64x64"  }
    ],
    "start_url": "/",
    "background_color":"#F9F9F9",
    "theme_color": "#3A3F51"
}

注：以上信息根据实际情况修改。

三、Service Worker 配置

3.1 Service Worker 简单配置参考模板

在网页同目录新建 sw.js 文件如下：

//缓存空间名称
var CACHE_VERSION = 'sw_v1';
//需缓存的文件
var CACHE_FILES = [
  '/',
  '/aaa.html',
  '/bbb.jpg'
];

//监听安装事件
self.addEventListener('install', function (event) {
  event.waitUntil(
    caches.open(CACHE_VERSION)
    .then(cache => cache.addAll(CACHE_FILES)
      .then(() => self.skipWaiting())
    ));
});

//监听激活事件
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]);
        }
      }));
    })
  );
});

//不缓存策略
self.addEventListener('fetch', function(event) {});

注：以上为只缓存已定义的文件，不缓存其他。

3.2 Service Worker 更多缓存策略

3.2.1 不缓存策略

注：其余配置与上文简单配置内容一致，此策略与上文一致。

//不缓存策略
self.addEventListener('fetch', function(event) {});

3.2.2 总是更新策略

注：其余配置与上文简单配置内容一致，仅需将 fetch 事件修改如下。

//总是更新策略
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.open(CACHE_VERSION).then(function(cache) {
      return fetch(event.request).then(function(response) {
        cache.put(event.request, response.clone());
        return response;
      });
    })
  );
});

3.2.3 先缓存后更新策略

注：其余配置与上文简单配置内容一致，仅需将 fetch 事件修改如下。

//先缓存后更新策略
self.addEventListener('fetch', function (event) {
  event.respondWith(
    caches.open(CACHE_VERSION).then(function (cache) {
      return cache.match(event.request).then(function (response) {
        var fetchPromise = fetch(event.request).then(function (networkResponse) {
          cache.put(event.request, networkResponse.clone());
          return networkResponse;
        })
        return response || fetchPromise;
      })
    })
  );
});

3.2.4 最佳策略

这里，我们简单的通过文件类型这个点来进行划分，优先情况是缓存 js/css 文件。这样通过在 FILE_LISTS 添加想要缓存的文件类型即可。之后，我们只要在 message 中更新原来的 document 即可。
注：此策略与上文简单配置配置内容不一致，以下为该策略配置示例：

//最佳策略
var CURRENT_CACHES = {
  prefetch: 'prefetch-cache-v' + 1,
};
var FILE_LISTS = ['js','css','png'];

var goSaving = function(url){
  for(var file of FILE_LISTS){
    if(url.endsWith(file)) return true;
  }
  return false;
}

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(resp) {
      return resp || fetch(event.request).then(function(response) {
          // 检查是否需要缓存
          var url = event.request.url;
          if(!goSaving(url))return response;
          console.log('save file:' + url);
          // 需要缓存,则将资源放到 caches Object 中
          return caches.open(CURRENT_CACHES.prefetch).then(function(cache) {
            console.log('update files like' + event.request.url);
            cache.put(event.request, response.clone());
            return response;
          });
        });
    })
  );
});
self.addEventListener('message',event =>{
  console.log("receive message" + event.data);
  // 更新根目录下的 html 文件。
  var url = event.data;
  console.log("update root file " + url);
  event.waitUntil(
    caches.open(CURRENT_CACHES.prefetch).then(cache=>{
        return fetch(url)
          .then(res=>{
            cache.put(url,res);
          })
    })
  )
});

更多文档请参阅官方网站。