PWA 介绍

PWA（Progressive web apps，渐进式 Web 应用）运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。
Progressive Web Apps 是 Google 提出的⽤前沿的 Web 技术为⽹⻚提供 App 般使⽤体验的⼀系列⽅案。但是作为⼀个 web 应⽤，它可以 断⽹使⽤、推送消息、发送通知、从桌⾯启动，当然还包括 Web 应⽤的优势：免安装、快速开发、依赖浏览器跨平台(⽀持包括Edge在内的各种主流PC/⼿机浏览器)。

AMP， （Accelerated Mobile Pages，意为“加速移动页面”）是Google带领开发的开源项目，目的是为提升移动设备对网站的访问速度。AMP大致可分为AMP HTML、AMP JS和AMP Cache三部分

  • 响应式，应用界面可以兼容多种设备；比如，桌面、移动端、平板。
  • 应用化，交互体验接近native应⽤。
  • 网络低依赖， ⽆⽹络或者低速⽹络下依然可以使⽤。
  • 延续性，借助推送功能，能够维持⽤户粘性。
  • 可安装， 可以被安装到主屏，这样⽤户随时可以从主屏启动应⽤。
  • 可被发现， 被视为⼀个独⽴应⽤，⽽且可以被搜索。
  • 可更新， 当⽤户重新联⽹时，可以更新内容。
  • 安全， 可以使⽤HTTPS来防⽌内容伪造和中间⼈攻击。
  • 渐进性， 所有⽤户都可以使⽤，浏览器⽆关。

  • 兼容url， 可以通过url传播。

    核心技术

    构建、离线、存储、环境
    利⽤“App Shell”⽅法设计和构建应⽤、应⽤能够离线⼯作、存储供稍后离线使⽤的数据、代理的https服务器、Chrome 52 或更⾼版本。

  • 离线， service worker。它是⼀个在浏览器后台运⾏的脚本，与⽹⻚不相⼲，专注于那些不需要⽹⻚或⽤户互动就能完成的功能。它主要⽤于 操作离线缓存。

  • 应用壳， App Shell。App Shell，顾名思义，就是“壳”的意思，也可以理解为“⻣架屏”，说⽩了就是在内容尚未加载完全的时候，优先展示⻚⾯的结构、占位图、主题和背景颜⾊等，它们都是⼀些被强缓存的 html， css和javascript。
  • 混存， 前端混存介质。利⽤orm操作缓存的库？offline.js实现数据的互通。
  • https， 测试环境、开发环境。http-server -c-1 # 注意设置关闭缓存 ngrok http 8080。

service worker
作用：通过拦截⽹络请求，使得⽹站运⾏得更快，或者在离线情况下，依然可以执⾏。也作为其他后台功能的基础，⽐如消息推送和背景同步。

  1. 属于JavaScript Worker，不能直接接触DOM，通过postMessage接⼝与⻚⾯通信。
  2. 不⽤的时候会终⽌执⾏，需要的时候⼜重新执⾏，即它是事件驱动的。
  3. 只在HTTPs协议下可⽤，这是因为它能拦截⽹络请求，所以必须保证请求是安全的。
  4. 有⼀个精⼼定义的升级策略,内部⼤量使⽤Promise。

service worker 生命周期

  1. INSTALLING 正在安装阶段。

此阶段处于Service Worker被注册的时候。在这个阶段， Service Worker的install() ⽅法将会被执⾏，声明的资源即将被加⼊缓存。

  1. INSTALLED 安装完成阶段

当 Service Worker 完成其初始化安装之后就会进⼊到这个阶段。在这个阶段，它是⼀个“有效但尚未激活的 worker”，等待着客户端对其进⾏激活使⽤。我们可以在这个阶段告知⽤户， PWA 已经可以进⾏升级了。

  1. ACTIVATING 正在激活阶段

当客户端已⽆其它激活状态的 Service Worker、或者脚本中的skipWaiting() ⽅法被调⽤、或者⽤户关闭了该 Service Worker 作⽤域下的所有⻚⾯时，就会触发ACTIVATING 阶段。在这个阶段中， Service Worker脚本中的activate() 事件会被执⾏，此时可以清除掉过期的资源，并将进⼊下⼀个“激活完成阶段”。

  1. ACTIVETED 激活完成阶段

此时 Service Worker 已经被激活并⽣效，可以开始控制⽹站的资源请求了。此时 Service Worker内的fetch 和message 事件已经可以被监听。

  1. REDUNDANT 废弃阶段

当安装失败，激活失败或者当前 Service Worker被其他 Service Worker 替换时，就会进⼊这个阶段，此时 Service Worker 将失去对⻚⾯的控制。

工程实践

PWA 的核⼼可谓是 Service Worker，任何⼀个PWA都有且只有⼀个service-worker.js ⽂件，⽤于为Service Worker添加资源列表，进⾏注册、激活等⽣命周期操作。但是在webpack构建的项⽬中，⽣成⼀个serviceworker.js 可能会⾯临很多的问题。
⽂件的版本戳： webpack⽣成的资源多会⽣成⼀串hash， Service Worker的资源列表⾥⾯需要同步更新这些带hash的资源；
sw.js⽂件的版本号：每次更新代码，都需要通过更新service-worker.js ⽂件版本号来通知客户端对所缓存的资源进⾏更新，（但使⽤明确的版本号会更加合适）。

业界成熟方案

LAVAS，基于Vue 的PWA 解决方案，帮助开发者快速搭建PWA 应用，解决接入PWA 的各种问题。
什么是workbox？

  1. workbox这个库和构建⼯具的集合使⽤了servicework 的 fetchevent 和cache API，可以很容易地在⽤户的设备上本地存储您的⽹站⽂件。
  2. 让您的⽹站离线访问。
  3. 提⾼重复访问的负载性能，即使您不想完全离线，也可以使⽤workbox 在本地存储和提供常⽤⽂件，⽽不是从⽹络中存储和提供。
  4. 迅速集成进workbox-webpack-plugin

🔚 2020-7-12