PWA

什么是PWA

PWA全称Progressive Web App，即渐进式WEB应用。

1、可以添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏
2、实现离线缓存功能，即使用户手机没有网络，依然可以使用一些离线功能
3、实现了消息推送

Manifest实现添加至主屏幕

{
  "name": "一个PWA示例", // 必填 显示的插件名称
  "short_name": "PWA Demo", // 可选  在APP launcher和新的tab页显示，如果没有设置，则使用name
  "description": "The app that helps you understand PWA", //用于描述应用
  "display": "standalone", // 定义开发人员对Web应用程序的首选显示模式。standalone模式会有单独的
  "start_url": "/", // 应用启动时的url
  "theme_color": "#313131", // 桌面图标的背景色
  "background_color": "#313131", // 为web应用程序预定义的背景颜色。在启动web应用程序和加载应用程序的内容之间创建了一个平滑的过渡。
  "icons": [ // 桌面图标，是一个数组
    {
      "src": "/public/img/logo.png",
      "sizes": "144x144",
      "type": "image/png"
    }]
}

Manifest参考文档：https://developer.mozilla.org/zh-CN/docs/Web/Manifest

service worker实现离线缓存

image.png

特点：

：运行于浏览器后台，不受页面刷新的影响，可以监听和截拦作用域范围内所有页面的 HTTP 请求。
：网站必须使用 HTTPS。除了使用本地开发环境调试时(如域名使用 localhost)
：单独的作用域范围，单独的运行环境和执行线程
：不能操作页面 DOM。但可以通过事件机制来处理
：事件驱动型服务线程

浏览器支持情况

image.png

生命周期

image.png

消息推送

image.png

步骤一、提示用户并获得他们的订阅详细信息
步骤二、将这些详细信息保存在服务器上
步骤三、在需要时发送任何消息

不同浏览器需要用不同的推送消息服务器。以 Chrome 上使用 Google Cloud Messaging 作为推送服务为例，第一步是注册 applicationServerKey(通过 GCM 注册获取)，并在页面上进行订阅或发起订阅。每一个会话会有一个独立的端点（endpoint），订阅对象的属性(PushSubscription.endpoint) 即为端点值。将端点发送给服务器后，服务器用这一值来发送消息给会话的激活的 Service Worker （通过 GCM 与浏览器客户端沟通）。

捕获用户的点击

 self.addEventListener('notificationclick', function (event) {
    console.log(event);
    event.notification.close(); //关闭通知
    event.waitUntil(
        // 获取所有clients
        self.clients.matchAll().then(function (clients) {
            if (!clients || clients.length === 0) {
                return;
            }
            clients.forEach(function (client) {
                // 使用postMessage进行通信
                client.postMessage(action);
                console.log("post a message");
            });
        })
    );
});

Service Worker与client通信

到目前为止，我们已经可以顺利得给用户展示提醒，并且在用户操作提醒后准确捕获到用户的操作。然而，还缺最重要的一步——针对不同的操作，触发不同的交互

 self.addEventListener('notificationclick', function (event) {
    event.waitUntil(
        // 获取所有clients
        self.clients.matchAll().then(function (clients) {
            if (!clients || clients.length === 0) {
                return;
            }
            clients.forEach(function (client) {
                // 使用postMessage进行通信
                client.postMessage(action);
                console.log("post a message");
            });
        })
    );
});

App Shell 模型

App Shell 架构是构建 PWA 应用的一种方式，它通常提供了一个最基本的 Web App 框架，包括应用的头部、底部、菜单栏等结构。顾名思义，我们可以把它理解成应用的一个「空壳」，这个「空壳」仅包含页面框架所需的最基本的 HTML 片段，CSS 和 javaScript，这样一来，用户重复打开应用时就能迅速地看到 Web App 的基本界面，只需要从网络中请求、加载必要的内容。我们使用 Service Worker 对 App Shell 做离线缓存，以便它可以在离线时正常展现，达到类似 Native App 的体验。

image.png