Progressive Web Apps

前端工程

Manifest

Manifest 包含了与应用相关的一系列信息，manifest 在页面的头部引入

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

Manifest 支持的键

有三个键是必须的：

• manifest_version：manifest.json 的版本
• version：附加组件的版本
• name：附加组件的名称

Service Worker

在启用 Service Worker 之前必须注册，Service Worker 启用之后可以拦截客户端的请求

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js');
}

ServiceWorker 继承自 Worker，除此以外还有以下属性

• scriptURL：表示 Service Worker 脚本的 URL
• state：表示 Service Worker 的运行状态，其值可以是 installing, installed, activating, activated, redundant。可以通过 statechange 事件来监听状态的变化。

ServiceWorkerGlobalScope

在 Service Worker 脚本内 this 和 self 均指向 ServiceWorkerGlobalScope 对象。ServiceWorkerGlobalScope 对象有以下属性：

• clients：包含所关联的 Client 对象，clients.claim() 方法可以将该 client 作为域中所有页面的 service worker。
• registration：包含一个 ServiceWorkerRegistration 对象，这个对象包含了与 Service Worker 状态相关的信息
• caches：包含所关联的 CacheStorage 对象，表示客户端缓存

它有几个常用的事件：

• install：当 Service Worker 将要被安装时触发
• active：当 Service Worker 被启用时触发
• fetch：当客户端尝试请求网络资源时触发

FetchEvent

fetch 事件的事件对象

• isReload：当用户点击刷新按钮触发该事件时为 true，否则为 false
• request：触发这个事件的 Request 对象
• clientId：包含客户端 id
• respondWith()：接受一个 Promise 对象作为参数，以其 PromiseValue 来响应这个请求
• waitUntil()：接受一个 Promise 对象作为参数，延长该事件的生命周期直到 Promise 完成

ExtendableEvent

active 和 install 事件的事件对象

waitUntil()：接受一个 Promise 对象作为参数，延长 Service Worker 的生命周期直到 Promise 完成

Cache

Cache 对象由 caches.open() 方法产生，这个方法接受缓存的名字，打开这个缓存，如果不存在则会创建一个新的 Cache，这个方法返回一个 Promise 对象

Cache 内缓存的形式为 Request 对象和 Response 对象的对象对，它有以下方法，其中的 request 参数既可以是 Request 对象，也可以是 URL 字符串

• match(request, option)：返回一个 Promise，其 PromiseValue 为与之匹配的第一个 Response 对象，没有匹配的则为 undefined
• matchAll(request, option)：返回一个 Promise，其 PromiseValue 为与之匹配的所有 Response 对象组成的数组
• add(request)：发出一个请求，将 Request 和收到的 Response 保存到 Cache 中
• addAll(requests)：发出数组中所有请求，将 Request 和收到的 Response 保存到 Cache 中
• put(request, response)：将一组 Request 和 Response 保存到 Cache 中
• delete(request, options)：删除一条记录
• keys(request, options)：返回一个 Promise，其 PromiseValue 为与之匹配的所有 Request 对象组成的数组。不传入 request 参数则会得到所有 Request 对象