Angular - Service Worker

什么是 Service Worker

Service Worker本质上也是浏览器缓存资源用的，只不过他不仅仅是cache，也是通过worker的方式来进一步优化。

他基于h5的web worker，所以绝对不会阻碍当前js线程的执行

SwPush

通过 Angular Service Worker 订阅和收听 Web 推送通知。您可以将 SwPush 实例作为依赖项注入任何组件或服务。需要订阅时，要调用 SwPush.requestSubscription()，它会询问用户的权限。 该调用返回一个带有新的 Promise的推送订阅实例( Promise<PushSubscription> )。

Push API 和 Notification API

Push API 给予了Web应用程序接收从服务器发出的推送消息的能力，无论Web应用程序是否在用户设备前台，甚至刚加载完成。这样，开发人员就可以向用户投放异步通知和更新，从而让用户能更及时地获取新内容。

对于一个应用来说，要想要接收到推送消息，需要有一个被激活的 service worker。当 service worker 处于激活状态时，可以使用 PushManager.subscribe() 来订阅推送通知。

PushSubscription 的结果包含了应用需要发送的推送消息的所有信息：端点及发送数据需要的加密密钥。

Service worker 会在必要的时候启动并接收接下来的推送消息，传递给 ServiceWorkerGlobalScope.onpush 事件句柄。该方法允许将接收到的推送消息使用在应用上，例如通过显示一条通知（使用 ServiceWorkerRegistration.showNotification()）

每一个订阅对 service worker 来说都是唯一的。同时订阅的端点也是一个唯一的 功能性 URL：端点的信息是给应用发送信息的全部必要条件。所以端点地址需要保证隐私，否则其他应用也可以向你的应用发送消息。

激活一个 service worker 来提供推送消息会导致资源消耗的增加，尤其是电池。不同的浏览器对此有不同的方案——目前为止还没有标准的机制。Firefox 允许对发送给应用的推送消息做数量限制（配额）。该限制会在站点每一次被访问之后刷新。相比之下，Chrome 选择不做限制，但要求站点在每一次消息到达后都显示通知，这样可以让用户确认他们仍希望接收消息并确保用户可见性。

Notifications API

Notifications API允许网页控制向最终用户显示系统通知 —这些都在顶级浏览上下文视口之外，因此即使用户已经切换标签页或移动到不同的应用程序，也可以显示。该API被设计成与不同平台上的现有通知系统兼容。

Notifications API 规范对  ServiceWorker API指定了多个添加，以允许 service workers发送通知。

SwUpdate

SwUpdate 让我们能访问一些事件，这些事件会指出 Service Worker 何时发现了可用的更新或者一个更新何时可以被激活 —— 这意味着它现在可以通过更新后的版本提供服务了。

SwUpdate 服务支持四个独立的操作：

1. 获取出现可用更新的通知。如果要刷新页面，这些就是可加载的新版本。
2. 获取更新被激活的通知。这时候 Service Worker 就可以立即使用这些新版本提供服务了。
3. 要求 Service Worker 向服务器查询是否有新版本。
4. 要求 Service Worker 为当前标签页激活该应用的最新版本。

UpdateAvailableEvent:

只要有新的应用程序版本可用，就会发出 UpdateAvailableEvent 事件。

UpdateActivatedEvent:

每当应用程序更新到新版本时，都会发出 UpdateActivatedEvent 事件。

UnrecoverableStateEvent:

每当 Service Worker 用于为该客户端提供服务的应用程序版本处于不完整页面重新加载就无法恢复的损坏状态时，就会发出 UnrecoverableStateEvent 事件。

例如，Service Worker 可能无法从缓存或服务器中检索所需的资源。 如果将新版本部署到服务器并且浏览器部分清除了 Service Worker 缓存，删除了以前应用程序版本的一些文件，但不是全部，则可能会发生这种情况。

环境搭建：

使用 @angular/cli 12.0.3 所搭建的标准 Angular 项目

{
  "name": "service-worker-demo",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.0.3",
    "@angular/common": "~12.0.3",
    "@angular/compiler": "~12.0.3",
    "@angular/core": "~12.0.3",
    "@angular/forms": "~12.0.3",
    "@angular/platform-browser": "~12.0.3",
    "@angular/platform-browser-dynamic": "~12.0.3",
    "@angular/router": "~12.0.3",
    "rxjs": "~6.6.0",
    "tslib": "^2.1.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.0.3",
    "@angular/cli": "~12.0.3",
    "@angular/compiler-cli": "~12.0.3",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.7.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "typescript": "~4.2.3"
  }
}

在项目根目录输入

ng add @angular/pwa

如果报错就先安装@angular/pwa

npm install @angular/pwa

执行

ng build –prod

在dist/<project name>/ 使用http server启动项目

确定项目正常运行后断开服务再刷新，页面能够正常显示