服务工作线程

定义

服务工作线程

不同于App Cache，对单页应用支持较好。服务工作线程可以提供给多页应用

1. 是一种JavaScript 工作线程，无法直接访问 DOM，服务工作线程通过响应 postMessage 接口发送的消息来与其控制的页面通信，页面可在必要时对 DOM 执行操作。
2. 是一种可编程网络代理，让您能够控制页面所发送网络请求的处理方式。
3. 它在不用时会被中止，并在下次有需要时重启，因此，您不能依赖于服务工作线程的 onfetch 和 onmessage 处理程序中的全局状态。如果存在您需要持续保存并在重启后加以重用的信息，服务工作线程可以访问 IndexedDB API。

IndexedDB

很强大，但是有点复杂的客户端存储方式。如果需求比较简单，localForage, dexie.js, ZangoDB and JsStore API可以简易使用IndexedDB。

适用于大量的结构化数据，包括文件,blob。
使用索引来搜索数据。

Webstorage( key/value pairs 键值对):

• sessionStorage 页面上有效（只要浏览器保持打开，reload和restore都有效）
• localStorage 和上面的一样，浏览器关闭和reopen都有效。
  Firefox 45+, 限制大小为 10MB

接口：

IE8+ 支持

Storage：data都挂在到这个对象上， set, retrieve and remove
Window：Window.sessionStorage and Window.localStorage；Window.onstorage storage发生改变时触发event handler that fires when a storage area changes (e.g. a new item is stored.)
StorageEvent： The storage event is fired on a document’s Window object when a storage area changes.

IndexedDB

事务数据库系统（ transactional database system）
基于JS的面向对象数据库，通过key来读取数据
可以储存的数据有：
* Error and Function 对象不可储存
* DOM nodes 不可以
* The lastIndex field of RegExp objects 不可以
* Property descriptors, setters, and getters (as well as similar metadata-like features) are not duplicated.
* The prototype chain does not get walked and duplicated.

！！不支持跨域

使用：
需要申明一个 database schema， 打开database的连接，然后可以通过transactions取回和更新数据

异步读取，同步的API还没指定出来
储存上限，根据不同浏览器的规则因人而异：

火狐采用的存储方法：

• IndexedDB
• asm.js caching
• Cache API
• Cookies

然而在隐私模式下，data storage是不支持的，Local storage data and cookies 是支持的，但是在关闭页面后会清空

In Chrome/Opera, the Quota Management API handles quota management for AppCache, IndexedDB, WebSQL, and File System API.

Data Storage 有两种类型：

1. 长期：只有用户清除的时候才会被抹掉；会提示长期储存
2. 短期：近期未使用，储存达到上限就会被清除；不会提示；（默认）

StorageManager.persist() 这个方法可以手动开启长期储存

存在哪里了呢？

• /storage — quota manager 管理的主目录(see below)
• /storage/permanent — persistent data storage repository（IndexedDB persistent-type databases）
• /storage/temporary — temporary data storage repository
• /storage/default — default data storage repository

火狐可以通过about:support访问profile

自行添加文件夹会导致storage初始化错误

Storage limits

根据硬盘大小动态决定的。The global limit is calculated as 50% of free disk space。
Quota Manager会负责记录占比，内存不够根据LRU policy删除数据，根据last access time来决定最近最少使用的 origin会先删掉。

group limit： 20% of the global limit。10MB~2GB
举例说明：
mozilla.org — group1, origin1
www.mozilla.org — group1, origin2
joe.blogs.mozilla.org — group1, origin3
firefox.com — group2, origin4

mozilla.org, www.mozilla.org, and joe.blogs.mozilla.org 只能占用20%的global limit。firefox.com 独占 20%.

服务工作线程生命周期

生命周期完全独立于网页

1. 安装
   使用时，首先在JavaScript 中注册，如果所有文件均已成功缓存，那么服务工作线程就安装完毕。如果任何文件下载失败或缓存失败，那么安装步骤将会失败，服务工作线程就无法激活（也就是说，不会安装）。

2. 激活

3. 控制
   服务工作线程将会对其作用域内的所有页面实施控制。它将处于以下两种状态之一：服务工作线程终止以节省内存，或处理获取和消息事件，从页面发出网络请求或消息后将会出现后一种状态。

仅可在通过 HTTPS 提供的页面上注册服务工作线程

详细说明：

1. 注册服务工作线程

register(): 服务工作线程文件的位置。服务工作线程文件位于根网域。 如果我们在 /example/sw.js 处注册服务工作线程文件，则服务工作线程将只能看到网址以 /example/ 开头（即 /example/page1/、/example/page2/）的页面的 fetch 事件。`

//检查 Service Worker API 是否可用
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    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);
    });
  });
}

2. 安装服务工作线程

//为安装事件定义回调，并决定想要缓存的文件
self.addEventListener('install', function(event) {
  // Perform install steps
});

在 install 回调的内部，我们需要执行以下步骤：

打开缓存。
缓存文件。
确认所有需要的资产是否缓存。

如果所有文件都成功缓存，则将安装服务工作线程。 如有任何文件无法下载，则安装步骤将失败。

3. 缓存和返回请求

//返回一个缓存的响应
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 请求的响应并将其添加到缓存来实现

1. 在 fetch 请求中添加对 .then() 的回调。
2. 获得响应后，执行以下检查，
3. 确保响应有效
4. 检查并确保响应的状态为 200
5. 确保响应类型为 basic，亦即由自身发起的请求。 这意味着，对第三方资产的请求不会添加到缓存
6. 如果通过检查，则克隆响应。这样做的原因在于，该响应是 Stream，因此主体只能使用一次。由于我们想要返回能被浏览器使用的响应，并将其传递到缓存以供使用，因此需要克隆一份副本。我们将一份发送给浏览器，另一份则保留在缓存。

4. 更新服务工作线程

1. 更新您的服务工作线程 JavaScript 文件。用户导航至您的站点时，浏览器会尝试在后台重新下载定义服务工作线程的脚本文件。如果服务工作线程文件与其当前所用文件存在字节差异，则将其视为“新服务工作线程”。
   2, 新服务工作线程将会启动，且将会触发 install 事件。
2. 此时，旧服务工作线程仍控制着当前页面，因此新服务工作线程将进入 waiting 状态。
3. 当网站上当前打开的页面关闭时，旧服务工作线程将会被终止，新服务工作线程将会取得控制权。
   新服务工作线程取得控制权后，将会触发其 activate 事件。