>

从入门到进阶

- 编辑:澳门新葡亰平台游戏 -

从入门到进阶

Service Worker入门

2015/03/26 · JavaScript · Service Worker

原文出处: Matt Gaunt   译文出处:[w3ctech

  • 十年踪迹]()   

原生App拥有Web应用通常所不具备的富离线体验,定时的静默更新,消息通知推送等功能。而新的Service workers标准让在Web App上拥有这些功能成为可能。

image

原文

Service Worker 是什么?

一个 service worker 是一段运行在浏览器后台进程里的脚本,它独立于当前页面,提供了那些不需要与web页面交互的功能在网页背后悄悄执行的能力。在将来,基于它可以实现消息推送,静默更新以及地理围栏等服务,但是目前它首先要具备的功能是拦截和处理网络请求,包括可编程的响应缓存管理。

为什么说这个API是一个非常棒的API呢?因为它使得开发者可以支持非常好的离线体验,它给予开发者完全控制离线数据的能力。

在service worker提出之前,另外一个提供开发者离线体验的API叫做App Cache。然而App Cache有些局限性,例如它可以很容易地解决单页应用的问题,但是在多页应用上会很麻烦,而Service workers的出现正是为了解决App Cache的痛点。

下面详细说一下service worker有哪些需要注意的地方:

  • 它是JavaScript Worker,所以它不能直接操作DOM。但是service worker可以通过postMessage与页面之间通信,把消息通知给页面,如果需要的话,让页面自己去操作DOM。
  • Service worker是一个可编程的网络代理,允许开发者控制页面上处理的网络请求。
  • 在不被使用的时候,它会自己终止,而当它再次被用到的时候,会被重新激活,所以你不能依赖于service worker的onfecth和onmessage的处理函数中的全局状态。如果你想要保存一些持久化的信息,你可以在service worker里使用IndexedDB API。
  • Service worker大量使用promise,所以如果你不了解什么是promise,那你需要先阅读这篇文章。

特别简的介

去年开始火遍南北的 PWA 技术落地情况有负重望,主要源于 safrai 对于这一技术支持不甚理想,不支持 mainfest 文件也不支持 service Worker

service worker 是一个特殊的 web Worker,因此他与页面通信和 worker 是一样的,同样不能访问 DOM。特殊在于他是由事件驱动的具有生命周期的 worker,并且可以拦截处理页面的网络请求(fetch),可以访问 cacheIndexDB

换言之 service Worker 可以让开发者自己控制管理缓存的内容以及版本,为离线弱网环境下的 web 的运行提供了可能,让 web 在体验上更加贴近 native。

前期准备

如下的基础知识:

  • Angular service workers介绍.

从5angular.0.0开始,在任意cli项目中,你可以很容易的开启Angular service worker。这文档是介绍怎么去在新的或旧的项目中启用Angular service worker。会通过一个简单的例子是展示service worker的行为与基本缓存。

Service Worker的生命周期

Service worker拥有一个完全独立于Web页面的生命周期。

要让一个service worker在你的网站上生效,你需要先在你的网页中注册它。注册一个service worker之后,浏览器会在后台默默启动一个service worker的安装过程。

在安装过程中,浏览器会加载并缓存一些静态资源。如果所有的文件被缓存成功,service worker就安装成功了。如果有任何文件加载或缓存失败,那么安装过程就会失败,service worker就不能被激活(也即没能安装成功)。如果发生这样的问题,别担心,它会在下次再尝试安装。

当安装完成后,service worker的下一步是激活,在这一阶段,你还可以升级一个service worker的版本,具体内容我们会在后面讲到。

在激活之后,service worker将接管所有在自己管辖域范围内的页面,但是如果一个页面是刚刚注册了service worker,那么它这一次不会被接管,到下一次加载页面的时候,service worker才会生效。

当service worker接管了页面之后,它可能有两种状态:要么被终止以节省内存,要么会处理fetch和message事件,这两个事件分别产生于一个网络请求出现或者页面上发送了一个消息。

下图是一个简化了的service worker初次安装的生命周期:

图片 1

兼容情况

safrai 已经于 2017年8月 开始了 service Worker 的开发。

image

目前浏览器PC支持情况如图

国内主要浏览器支持情况

android 设备在 4.4 版本使用 Chromium 作为内核,Chromium 在 40 对于 service worker 支持。国内浏览器包括微信浏览器在内基本已经支持 service Worker 这为提升体验提供了可能。service workerHTTP2 更加配哦,在将来基于它可以实现消息推送,静默更新以及地理围栏等服务。

在新项目中添加service worker

如果你要生成一个新的cli项目,你可以使用cli去配置Angular service worker:

ng new my-project --service-worker

--service-worker命令会去做所有的配置并添加需要依赖的包。想了解更多,可查看下面的关于如何在旧项目添加service worker的说明

在我们开始写码之前

从这个项目地址拿到chaches polyfill。

这个polyfill支持CacheStorate.match,Cache.add和Cache.addAll,而现在Chrome M40实现的Cache API还没有支持这些方法。

将dist/serviceworker-cache-polyfill.js放到你的网站中,在service worker中通过importScripts加载进来。被service worker加载的脚本文件会被自动缓存。

JavaScript

importScripts('serviceworker-cache-polyfill.js');

1
importScripts('serviceworker-cache-polyfill.js');

需要HTTPS

在开发阶段,你可以通过localhost使用service worker,但是一旦上线,就需要你的server支持HTTPS。

你可以通过service worker劫持连接,伪造和过滤响应,非常逆天。即使你可以约束自己不干坏事,也会有人想干坏事。所以为了防止别人使坏,你只能在HTTPS的网页上注册service workers,这样我们才可以防止加载service worker的时候不被坏人篡改。(因为service worker权限很大,所以要防止它本身被坏人篡改利用——译者注)

Github Pages正好是HTTPS的,所以它是一个理想的天然实验田。

如果你想要让你的server支持HTTPS,你需要为你的server获得一个TLS证书。不同的server安装方法不同,阅读帮助文档并通过Mozilla’s SSL config generator了解最佳实践。

了解前的了解

webWorker
fetch
cache
promise

在旧项目中添加service worker

添加步骤:

  1. 添加service worker的包依赖。
  2. 在cli配置中启用service worker。
  3. 导入和注册service worker。
  4. 新建配置文件,定义缓存的行为和其它设定。
  5. 编译项目。

使用Service Worker

现在我们有了polyfill,并且搞定了HTTPS,让我们看看究竟怎么用service worker。

生命周期

image

Service Workermain.js 进行注册,首次注册前会进行分析,判断加载的文件是否在域名下,协议是否为 HTTPS 的,通过这两点则成功注册。
service Worker 开始进入下一个生命周期状态 installinstall 完成后会触发 service Workerinstall 事件。 如果 install 成功则接下来是 activate状态, 然后这个 service worker 才能接管页面。当事件 active 事件执行完成之后,此时 service Worker 有两种状态,一种是 active,一种是 terminatedactive 是为了工作,terminated则为了节省内存。当新的 service Worker 处于 install/waitting 阶段,当前 service Worker 处于 terminated,就会发生交接替换。或者可以通过调用 self.skipWaiting() 方法跳过等待。
被替换掉的原有的 service WorkerRedundant 阶段,在 install 或者 activating 中断的也会进入 Redundant 阶段。所以一个 Service Worker 脚本的生命周期有这样一些阶段(从左往右):

[图片上传失败...(image-af3cfa-1511157771617)]

步骤1:添加service worker的包依赖。使用yarn包管理工具:

yarn add @angular/service-worker

如何注册和安装service worker

要安装service worker,你需要在你的页面上注册它。这个步骤告诉浏览器你的service worker脚本在哪里。

JavaScript

if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js').then(function(registration) { // Registration was successful console.log('ServiceWorker registration successful with scope: ', registration.scope); }).catch(function(err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); }); }

1
2
3
4
5
6
7
8
9
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(function(registration) {
    // Registration was successful
    console.log('ServiceWorker registration successful with scope: ',    registration.scope);
  }).catch(function(err) {
    // registration failed :(
    console.log('ServiceWorker registration failed: ', err);
  });
}

上面的代码检查service worker API是否可用,如果可用,service worker /sw.js 被注册。

如果这个service worker已经被注册过,浏览器会自动忽略上面的代码。

有一个需要特别说明的是service worker文件的路径,你一定注意到了在这个例子中,service worker文件被放在这个域的根目录下,这意味着service worker和网站同源。换句话说,这个service work将会收到这个域下的所有fetch事件。如果我将service worker文件注册为/example/sw.js,那么,service worker只能收到/example/路径下的fetch事件(例如: /example/page1/, /example/page2/)。

现在你可以到 chrome://inspect/#service-workers 检查service worker是否对你的网站启用了。

图片 2

当service worker第一版被实现的时候,你也可以在chrome://serviceworker-internals中查看,它很有用,通过它可以最直观地熟悉service worker的生命周期,不过这个功能很快就会被移到chrome://inspect/#service-workers中。

你会发现这个功能能够很方便地在一个模拟窗口中测试你的service worker,这样你可以关闭和重新打开它,而不会影响到你的新窗口。任何创建在模拟窗口中的注册服务和缓存在窗口被关闭时都将消失。

Install

install 存在中间态 installing 这个状态在 main.jsregistration注册对象中可以访问到。

/* In main.js */
// 重写 service worker 作用域到 ./
navigator.serviceWorker.register('./sw.js', {scope: './'}).then(function(registration) {  
    if (registration.installing) {
        // Service Worker is Installing
    }
})

安装时 service Workerinstall 事件被触发,这一般用于处理静态资源的缓存

service worker 缓存的静态资源

chrome PWA 演示实例

/* In sw.js */
self.addEventListener('install', function(event) {  
  event.waitUntil(
  // currentCacheName 对应调试工具中高亮位置,缓存的名称
  // 调用 `cache.open` 方法后才可以缓存文件
    caches.open(currentCacheName).then(function(cache) {
    // arrayOfFilesToCache 为存放缓存文件的数组
      return cache.addAll(arrayOfFilesToCache);
    })
  );
});

event.waitUntil() 方法接收一个 promise 对象, 如果这个 promise 对象 rejectedservice Worker 安装失败,状态变更为 Redundant。关于 cache 相关说明看下文。

步骤2:在cli配置中启用service worker:

要开启Angular service worker,cli必须在编译时生成Angular service worker的配置。要在旧项目中通知cli去做这一步,必须把.angular-cli.json文件里的 serviceWorker的值改成true

ng set apps.0.serviceWorker=true

Service Worker的安装步骤

在页面上完成注册步骤之后,让我们把注意力转到service worker的脚本里来,在这里面,我们要完成它的安装步骤。

在最基本的例子中,你需要为install事件定义一个callback,并决定哪些文件你想要缓存。

JavaScript

// The files we want to cache var urlsToCache = [ '/', '/styles/main.css', '/script/main.js' ]; // Set the callback for the install step self.addEventListener('install', function(event) { // Perform install steps });

1
2
3
4
5
6
7
8
9
10
11
// The files we want to cache
var urlsToCache = [
  '/',
  '/styles/main.css',
  '/script/main.js'
];
 
// Set the callback for the install step
self.addEventListener('install', function(event) {
    // Perform install steps
});

在我们的install callback中,我们需要执行以下步骤:

  1. 开启一个缓存
  2. 缓存我们的文件
  3. 决定是否所有的资源是否要被缓存

JavaScript

var CACHE_NAME = 'my-site-cache-v1'; var urlsToCache = [ '/', '/styles/main.css', '/script/main.js' ]; self.addEventListener('install', function(event) { // Perform install steps event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) { console.log('Opened cache'); return cache.addAll(urlsToCache); }) ); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = [
  '/',
  '/styles/main.css',
  '/script/main.js'
];
 
self.addEventListener('install', function(event) {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

上面的代码中,我们通过caches.open打开我们指定的cache文件名,然后我们调用cache.addAll并传入我们的文件数组。这是通过一连串promise(caches.open 和 cache.addAll)完成的。event.waitUntil拿到一个promise并使用它来获得安装耗费的时间以及是否安装成功。

如果所有的文件都被缓存成功了,那么service worker就安装成功了。如果任何一个文件下载失败,那么安装步骤就会失败。这个方式允许你依赖于你自己指定的所有资源,但是这意味着你需要非常谨慎地决定哪些文件需要在安装步骤中被缓存。指定了太多的文件的话,就会增加安装失败率。

上面只是一个简单的例子,你可以在install事件中执行其他操作或者甚至忽略install事件。

Installed / Waiting

安装完成待正在运行的 service Worker 交接的状态。
Service Worker registration 对象, 我们可以获得这个状态

/* In main.js */
navigator.serviceWorker.register('./sw.js').then(function(registration) {  
    if (registration.waiting) {
        // Service Worker is Waiting
    }
})

这是一个提示用户更新的好时机,或者可以静默更新。

步骤3:导入和注册service worker:

src/app/app.module.ts中:

import  {  [ServiceWorkerModule](https://angular.io/api/service-worker/ServiceWorkerModule)  }  from  '@angular/service-worker';  
import  { environment }  from  '../environments/environment';

@NgModule({ 
declarations:  [  AppComponent  ], 
imports:  [  
   BrowserModule,  
   ServiceWorkerModule.register('/ngsw-worker.js',  {enabled: environment.production})  
   ], 
   providers:  [ ],
   bootstrap:  [AppComponent]
 })  
export  class  AppModule  {  }

ngsw-worker.js文件是cli编译生成的service worker脚本,最后能在dist/里找到。

怎样缓存和返回Request

你已经安装了service worker,你现在可以返回你缓存的请求了。

当service worker被安装成功并且用户浏览了另一个页面或者刷新了当前的页面,service worker将开始接收到fetch事件。下面是一个例子:

JavaScript

self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response) { // Cache hit - return response if (response) { return response; } return fetch(event.request); } ) ); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }
 
        return fetch(event.request);
      }
    )
  );
});

上面的代码里我们定义了fetch事件,在event.respondWith里,我们传入了一个由caches.match产生的promise.caches.match 查找request中被service worker缓存命中的response。

如果我们有一个命中的response,我们返回被缓存的值,否则我们返回一个实时从网络请求fetch的结果。这是一个非常简单的例子,使用所有在install步骤下被缓存的资源。

如果我们想要增量地缓存新的请求,我们可以通过处理fetch请求的response并且添加它们到缓存中来实现,例如:

JavaScript

self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response) { // Cache hit - return response if (response) { return response; } // IMPORTANT: Clone the request. A request is a stream and // can only be consumed once. Since we are consuming this // once by cache and once by the browser for fetch, we need // to clone the response var fetchRequest = event.request.clone(); return fetch(fetchRequest).then( function(response) { // Check if we received a valid response if(!response || response.status !== 200 || response.type !== 'basic') { return response; } // IMPORTANT: Clone the response. A response is a stream // and because we want the browser to consume the response // as well as the cache consuming the response, we need // to clone it so we have 2 stream. var responseToCache = response.clone(); caches.open(CACHE_NAME) .then(function(cache) { cache.put(event.request, responseToCache); }); return response; } ); }) ); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }
 
        // IMPORTANT: Clone the request. A request is a stream and
        // can only be consumed once. Since we are consuming this
        // once by cache and once by the browser for fetch, we need
        // to clone the response
        var fetchRequest = event.request.clone();
 
        return fetch(fetchRequest).then(
          function(response) {
            // Check if we received a valid response
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }
 
            // IMPORTANT: Clone the response. A response is a stream
            // and because we want the browser to consume the response
            // as well as the cache consuming the response, we need
            // to clone it so we have 2 stream.
            var responseToCache = response.clone();
 
            caches.open(CACHE_NAME)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });
 
            return response;
          }
        );
      })
    );
});

代码里我们所做事情包括:

  1. 添加一个callback到fetch请求的 .then 方法中
  2. 一旦我们获得了一个response,我们进行如下的检查:
    1. 确保response是有效的
    2. 检查response的状态是否是200
    3. 保证response的类型是basic,这表示请求本身是同源的,非同源(即跨域)的请求也不能被缓存。
  3. 如果我们通过了检查,clone这个请求。这么做的原因是如果response是一个Stream,那么它的body只能被读取一次,所以我们得将它克隆出来,一份发给浏览器,一份发给缓存。

Activating

  • 当页面没有正在运行的 service Worker时;
  • service Worker脚本中调用了 self.skipWaiting 方法;
  • 用户切换页面使原有的 service Worker 释放;
  • 特定失效已过,释放因此原有的 service Worker 被释放

则状态变为 activating,触发 service workeractive 事件。

/* In sw.js */
self.addEventListener('activate', function(event) {  
  event.waitUntil(
    // Get all the cache names
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        // Get all the items that are stored under a different cache name than the current one
        cacheNames.filter(function(cacheName) {
          return cacheName != currentCacheName;
        }).map(function(cacheName) {
          // Delete the items
          return caches.delete(cacheName);
        })
      ); // end Promise.all()
    }) // end caches.keys()
  ); // end event.waitUntil()
});

install 事件中的 event.waitUntil 方法。当所接收的 promisereject 那么 serviceWorker 进入 Redundant状态。

步骤4: 新建配置文件, ngsw-config.json

angular cli需要名为ngsw-config.json的service worker配置文件。这文件定义了如何去缓存文件与数据资源。

你可以使用cli产生的通用配置版本

或者,将以下内容保存为src/ ngsw-config.json:

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html"
      ],
      "versionedFiles": [
        "/*.bundle.css",
        "/*.bundle.js",
        "/*.chunk.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }]
}

如何更新一个Service Worker

你的service worker总有需要更新的那一天。当那一天到来的时候,你需要按照如下步骤来更新:

  1. 更新你的service worker的JavaScript文件
    1. 当用户浏览你的网站,浏览器尝试在后台下载service worker的脚本文件。只要服务器上的文件和本地文件有一个字节不同,它们就被判定为需要更新。
  2. 更新后的service worker将开始运作,install event被重新触发。
  3. 在这个时间节点上,当前页面生效的依然是老版本的service worker,新的servicer worker将进入”waiting”状态。
  4. 当前页面被关闭之后,老的service worker进程被杀死,新的servicer worker正式生效。
  5. 一旦新的service worker生效,它的activate事件被触发。

代码更新后,通常需要在activate的callback中执行一个管理cache的操作。因为你会需要清除掉之前旧的数据。我们在activate而不是install的时候执行这个操作是因为如果我们在install的时候立马执行它,那么依然在运行的旧版本的数据就坏了。

之前我们只使用了一个缓存,叫做my-site-cache-v1,其实我们也可以使用多个缓存的,例如一个给页面使用,一个给blog的内容提交使用。这意味着,在install步骤里,我们可以创建两个缓存,pages-cache-v1和blog-posts-cache-v1,在activite步骤里,我们可以删除旧的my-site-cache-v1。

下面的代码能够循环所有的缓存,删除掉所有不在白名单中的缓存。

JavaScript

self.addEventListener('activate', function(event) { var cacheWhitelist = ['pages-cache-v1', 'blog-posts-cache-v1']; event.waitUntil( caches.keys().then(function(cacheNames) { return Promise.all( cacheNames.map(function(cacheName) { if (cacheWhitelist.indexOf(cacheName) === -1) { return caches.delete(cacheName); } }) ); }) ); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
self.addEventListener('activate', function(event) {
 
  var cacheWhitelist = ['pages-cache-v1', 'blog-posts-cache-v1'];
 
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

Actived

activting成功后,这时 service Worker 接管了整个页面状态变为 acticed
这个状态我们可以拦截请求和消息。

/* In sw.js */

self.addEventListener('fetch', function(event) {  
  // Do stuff with fetch events
});

self.addEventListener('message', function(event) {  
  // Do stuff with postMessages received from document
});

步骤 5: 编译项目

ng build --prod

产生的项目就是启用了Angular service worker了.

处理边界和填坑

这一节内容比较新,有很多待定细节。希望这一节很快就不需要讲了(因为标准会处理这些问题——译者注),但是现在,这些内容还是应该被提一下。

Redundant

service Workerinstall active过程中处错误或者,被新的 service Worker 替换状态会变为 Redundant

如果是后一种情况,则该 worker 仍然控制这个页面。

值得注意的是已经 installservice worker 页面关闭后再打开不会触发 install 事件,但是会重新注册。更多参考文章 探索 Service Worker 「生命周期」

Service worker 的展示说明

此模块通过一个示例来展示说明service worker

如果安装失败了,没有很优雅的方式获得通知

如果一个worker被注册了,但是没有出现在chrome://inspect/#service-workers或chrome://serviceworker-internals,那么很可能因为异常而安装失败了,或者是产生了一个被拒绝的的promise给event.waitUtil。

要解决这类问题,首先到 chrome://serviceworker-internals检查。打开开发者工具窗口准备调试,然后在你的install event代码中添加debugger;语句。这样,通过断点调试你更容易找到问题。

请求处理

处于 actived 阶段的 service Worker 可以拦截页面发出的 fetch,也可以发出fetch请求,可以将请求和响应缓存在 cache里,也可以将 responsecache 中取出。

使用http-server构建服务器

因为ng serve 不会启动service worker,你必须使用另一个http服务器去本地测试你的项目。你可以使用任何的HTTP服务器。下面例子是使用http-server,可以通过npm安装。为了减少冲突的可能性,将在一个专用的端口测试。
要使用http-server开启服务,要移动到打包文件的文件夹内然后启动web服务:

cd dist
http-server -p 8080

fetch()目前仅支持Service Workers

fetch马上支持在页面上使用了,但是目前的Chrome实现,它还只支持service worker。cache API也即将在页面上被支持,但是目前为止,cache也还只能在service worker中用。

缓存使用策略

因此可以根据使用的场景,使用缓存的 response 给到页面减少请求及时响应,亦或者将请求返回的结果更新到缓存,在应用离线时返回给页面。这就是以下的多种策略。

  1. 网络优先: 从网络获取, 失败或者超时再尝试从缓存读取
  2. 缓存优先: 从缓存获取, 缓存插叙不到再尝试从网络抓取,在上文中的代码块就是该种策略的实现。
  3. 最快: 同时查询缓存和网络, 返回最先拿到的
  4. 仅限网络: 仅从网络获取
  5. 仅限缓存: 仅从缓存获取

初次加载

服务启动中,你可以在浏览器访问http://localhost:8080/。你的应用应该是正常运行。

提示:当测试Angular service workers,最好是在浏览器中使用无痕或私有窗口,这能保证service worker不会从以前的留下的缓存中读取数据,造成意外的状况。

fetch()的默认参数

当你使用fetch,缺省地,请求不会带上cookies等凭据,要想带上的话,需要:

JavaScript

fetch(url, { credentials: 'include' })

1
2
3
fetch(url, {
  credentials: 'include'
})

这样设计是有理由的,它比XHR的在同源下默认发送凭据,但跨域时丢弃凭据的规则要来得好。fetch的行为更像其他的CORS请求,例如<img crossorigin>,它默认不发送cookies,除非你指定了<img crossorigin="use-credentials">.。

示例

fetch 基于stream 的 ,因此 response & request 一旦被消费则无法还原,所以这里在缓存的时候需要使用 clone 方法在消费前复制一份。

self.addEventListener('fetch', function(event) {
// 只对 get 类型的请求进行拦截处理
  if (event.request.method !== 'GET') {
    console.log('WORKER: fetch event ignored.', event.request.method, event.request.url);
    return;
  }
  event.respondWith(
  // 缓存中匹配请求
    caches.match(event.request)
      .then(function(response) {
        if (response) {
          return response;
        }

        // 因为 event.request 流已经在 caches.match 中使用过一次,
        // 那么该流是不能再次使用的。我们只能得到它的副本,拿去使用。
        var fetchRequest = event.request.clone();

        // fetch 的通过信方式,得到 Request 对象,然后发送请求
        return fetch(fetchRequest).then(
          function(response) {
            // 检查是否成功
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // 如果成功,该 response 一是要拿给浏览器渲染,而是要进行缓存。
            // 不过需要记住,由于 caches.put 使用的是文件的响应流,一旦使用,
            // 那么返回的 response 就无法访问造成失败,所以,这里需要复制一份。
            var responseToCache = response.clone();

            caches.open(CACHE_NAME)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        );
      })
    );
});

模拟网络问题

要模拟网络问题,可禁止应用的网络连接。在Chrome内:

  1. Select Tools > Developer Tools (开发人员工具).
  2. 进入Network分页.
  3. 勾选the Offline 项.

图片 3

Now the app has no access to network interaction.
现在应用没法访问网络了。

对于那些没有使用Angular service worker的应用,刷新页面会显示 "There is no Internet connection"的页面。

添加了Angular service worker的应用不一样。刷新后,页面正常显示。
如果你查看Network 分页的信息,你就能验证service worker是在工作。

图片 4

Non-CORS默认不支持

默认情况下,从第三方URL跨域得到一个资源将会失败,除非对方支持了CORS。你可以添加一个non-CORS选项到Request去避免失败。代价是这么做会返回一个“不透明”的response,意味着你不能得知这个请求究竟是成功了还是失败了。

JavaScript

cache.addAll(urlsToPrefetch.map(function(urlToPrefetch) { return new Request(urlToPrefetch, { mode: 'no-cors' }); })).then(function() { console.log('All resources have been fetched and cached.'); });

1
2
3
4
5
cache.addAll(urlsToPrefetch.map(function(urlToPrefetch) {
  return new Request(urlToPrefetch, { mode: 'no-cors' });
})).then(function() {
  console.log('All resources have been fetched and cached.');
});

最佳实践

什么被缓存

会发现所有用来渲染app的文件都被缓存了。给cli使用的通用ngsw-config.json就是定义了缓存这些特定的资源:

  • index.html.
  • favicon.ico.
  • 编译的文件 (JS and CSS bundles).
  • assets文件夹里的所有文件.

fetch()不遵循30x重定向规范

不幸,重定向在fetch()中不会被触发,这是当前版本的bug;

Register 时机

service Worker 将加剧对 CPU 时间和内存的争用,从而影响浏览器渲染以及网页的交互。Chrome 团队的开发者 Jeff Posnick 实践表明在显示动画期间注册 service Worker 会导致低端移动设备出现卡顿,因此在这种场景下延后注册或等更好的用户体验。

//Bad
window.addEventListener('DOMContentLoaded', function() {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {

    }).catch(function(err) {

    }); 
  });


// Good
if ('serviceWorker' in navigator) {
// 判断浏览器支持情况
  window.addEventListener('load', function() {
  // 页面所有资源加载完成后注册
    navigator.serviceWorker.register('/service-worker.js');
  });
}

但是当你使用 clients.claim()service Worker 控制所有

修改你的应用

现在你已经看到service worker如何缓存你的应用,下一步是理解更新如何工作。

  1. 如果你在一个无痕窗口中测试,打开另一个分页。这会使状态和缓存不会再测试中消失。
  2. 关闭应用的分页,但不是浏览器。这也会关闭了开发者工具。
  3. 关闭http-server的服务。
  4. 下一步,修改应用,查看service worker安装更新。
  5. 打开src/app/app.component.html并编辑
  6. 修改文本 Welcome to {{title}}! 为 Bienvenue à {{title}}!.
  7. 再次编译并启动服务
ng build --prod
cd dist
http-server -p 8080

处理响应式图片

img的srcset属性或者<picture>标签会根据情况从浏览器或者网络上选择最合适尺寸的图片。

在service worker中,你想要在install步骤缓存一个图片,你有以下几种选择:

  1. 安装所有的<picture>元素或者将被请求的srcset属性。
  2. 安装单一的low-res版本图片
  3. 安装单一的high-res版本图片

比较好的方案是2或3,因为如果把所有的图片都给下载下来存着有点浪费内存。

假设你将low-res版本在install的时候缓存了,然后在页面加载的时候你想要尝试从网络上下载high-res的版本,但是如果high-res版本下载失败的话,就依然用low-res版本。这个想法很好也值得去做,但是有一个问题:

如果我们有下面两种图片:

Screen Density Width Height
1x 400 400
2x 800 800

HTML代码如下:

JavaScript

<img src="image-src.png" srcset="image-src.png 1x, image-2x.png 2x" />

1
<img src="image-src.png" srcset="image-src.png 1x, image-2x.png 2x" />

如果我们在一个2x的显示模式下,浏览器会下载image-2x.png,如果我们离线,你可以读取之前缓存并返回image-src.png替代,如果之前它已经被缓存过。尽管如此,由于现在的模式是2x,浏览器会把400X400的图片显示成200X200,要避免这个问题就要在图片的样式上设置宽高。

JavaScript

<img src="image-src.png" srcset="image-src.png 1x, image-2x.png 2x" style="width:400px; height: 400px;" />

1
2
<img src="image-src.png" srcset="image-src.png 1x, image-2x.png 2x"
style="width:400px; height: 400px;" />

图片 5

<picture>标签情况更复杂一些,难度取决于你是如何创建和使用的,但是可以通过与srcset类似的思路去解决。

install 事件中静态资源缓存

service Workerinstall 事件中缓存文件过程中,当其中一个文件加载失败,则 install 失败。因此可以对要缓存的文件进行分级,一定要加载的,和允许加载失败的,对于允许加载失败的文件。

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('mygame-core-v1').then(function(cache) {
    // 不稳定文件或大文件加载
      cache.addAll(
        //...
      );
      // 稳定文件或小文件加载
      return cache.addAll(
        // core assets & levels 1-10
      );
    })
  );
});

在浏览器中更新你的应用

现在观察浏览器和service worker是如何处理更新了的应用

  1. 在同一浏览器再次打开http://localhost:8080 。发生什么?

    图片 6

哪里出错了?实际是没有的。Angular service
worker就在执行它的工作,展示它已安装的应用的版本。尽管有一个可用的更新。为了提高速度,service
worker会在完成展示已缓存的应用后才去检查更新。

如果你查看http-server的日志,你就可以看到service worker请求/ngsw.json。这是service worker在检查更新。

  1. 刷新页面.

图片 7

service worker在后台安装了更新的app版本,下次页面加载或重加载时,service worker就展示最新的版本。

改变URL Hash的Bug

在M40版本中存在一个bug,它会让页面在改变hash的时候导致service worker停止工作。

你可以在这里找到更多相关的信息: 

处理请求中离线情况

service Worker 发送请求时,捕获异常,并返回页面一个 response 通知页面可能离线。

function unableToResolve () {
  /* 
    当代码执行到这里,说明请求无论是从缓存还是走网络,都无法得到答复,这个时机,我们可以返回一个相对友好的页面,告诉用户,你可能离线了。
  */
  console.log('WORKER: fetch request failed in both cache and network.');
  return new Response('<h1>Service Unavailable</h1>', {
    status: 503,
    statusText: 'Service Unavailable',
    headers: new Headers({
      'Content-Type': 'text/html'
    })
  });
}
fetch(event.request).then(fetchedFromNetwork, unableToResolve).catch(unableToResolve);

更多的关于 Angular service workers

你可能对以下感兴趣

  • 与service workers的交互.

你们的赞赏是我的无限动力

更多内容

这里有一些相关的文档可以参考:

引入开关机制

开关是在饿了么实践经验里提出降级方案,通过向后端请求一个是否降级的接口,如果降级则注销掉已经注册的service Worker。这里要注意不要缓存这个开关请求。为了便于问题排查,可以设置一个 debug 模式(在 url 添加某些字符)。

获得帮助

如果你遇到麻烦,请在Stackoverflow上发帖询问,使用‘service-worker’标签,以便于我们及时跟进和尽可能帮助你解决问题。

赞 2 收藏 评论

图片 8

错误监控

self.addEventListener('error', event => {
  // 上报错误信息
  // 常用的属性:
  // event.message
  // event.filename
  // event.lineno
  // event.colno
  // event.error.stack
})
// 捕获 promise 错误
self.addEventListener('unhandledrejection', event => {
  // 上报错误信息
  // 常用的属性:
  // event.reason
})

这两个事件都只能在 worker 线程的 initial 生命周期里注册。(否则会失败,控制台可看到警告)

Google 开发工具助力 service worker 开发

Google 提供了 sw-toolboxsw-precache 两个工具方便快速生成 service-worker.js 文件:

  • sw-precache用于生成页面所需静态资源列表,目前有 webpack 插件 sw-precache-webpack-plugin 可以配合
  • sw-toolbox 提供了动态缓存使用的通用策略, 这些动态的资源不合适用 sw-precache 预先缓存。同时它提供了一套类似 Express.js 路由的语法, 用于编写策略。它还提供了 LRU 替换策略与 TTL 失效机制,可以保证我们的应用不会超过浏览器的缓存配额。

更多[参考文章]([PWA 入门: 理解和创建 Service Worker 脚本])

注意事项

  • 作用域:出于安全原因, Service Worker 脚本的作用范围不能超出脚本文件所在的路径。比如地址是 "/sw-test/sw.js" 的脚本只能控制 "/sw-test/" 下的页面。
  • 本地开发环境可以使用 http 协议, 上线必须使用https 协议。
  • Service Worker 中的 Javascript 代码必须是非阻塞的,所以你不应该在 Service Worker 代码中是用 localStorage 以及 XMLHttpRequest
  • 在页面关闭后,浏览器可以继续保持service worker运行,也可以关闭service worker,这取决与浏览器自己的行为,所以不要在 serviceWorker.js 中定义全局变量,如果想要保存一些持久化的信息,你可以在service worker里使用IndexedDB API。

参考

MDN
Service Worker lifecycle
service worker note
update service worker
chrom service worker sample
PWA 入门: 理解和创建 Service Worker 脚本
PWA 在饿了么的实践经验

本文由前端php发布,转载请注明来源:从入门到进阶