详解javascript中的Service Workers！-js教程-PHP中文网

本篇文章给大家介绍一下javascript api - service workers。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

详解javascript中的Service Workers！

service worker 是什么

Service Worker 是 Chrome 团队提出和力推的一个 WEB API，用于给 web 应用提供高级的可持续的后台处理能力。该 WEB API 标准起草于 2013 年，于 2014 年纳入 W3C WEB 标准草案，当前还在草案阶段。

Service Worker 最主要的特点是：在页面中注册并安装成功后，运行于浏览器后台，不受页面刷新的影响，可以监听和截拦作用域范围内所有页面的 HTTP 请求。

立即学习“Java免费学习笔记（深入）”；

类似一个服务器与浏览器之间的中间人角色，如果网站中注册了service worker 那么它可以拦截当前网站所有的请求，进行判断（需要编写相应的判断程序），如果需要向服务器发起请求的就转给服务器，如果可以直接使用缓存的就直接返回缓存不再转给服务器。从而大大提高浏览体验。

Service Worker 可以启用以前原生应用程序专有的一组功能。 Service Worker 的初稿已于2014年发布，现在所有主流浏览器都支持它们。

就像已经指出的定义一样，Service Worker 是网络代理。这意味着它们可以控制页面中的所有网络请求，并且可以对其进行编程，使用缓存的进行响应。

Service Worker 特点

网站必须使用 HTTPS。除了使用本地开发环境调试时(如域名使用 localhost)
运行于浏览器后台，可以控制打开的作用域范围下所有的页面请求
单独的作用域范围，单独的运行环境和执行线程
不能操作页面 DOM。但可以通过事件机制来处理

如何注册 Service Worker

// 首先检查浏览器是否支持 Service Worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker
    .register('/sw/service-worker.js')
    .then(function(registration) {
      console.log(registration);
    })
    .catch(function(err) {
      console.log(err);
    });
}

其实关键代码只有一行：

navigator.serviceWorker.register('/sw/service-worker.js')

注意：

Service Worker 的注册路径决定了其 scope 默认作用范围。示例中 service-worker.js 是在 /sw 路径下，这使得该 Service Worker 默认只会收到 /sw 路径下的 fetch事件。如果存放在网站的根路径下，则将会收到该网站的所有 fetcg事件。

如果希望改变它的作用域，可在第二个参数设置 scope范围。示例中将其改为了根目录，即对整个站点生效。

另外应意识到这一点：Service Worker 没有页面作用域的概念，作用域范围内的所有页面请求都会被当前激活的 Service Worker 所监控。

Service Worker 可以启用哪些功能？

在本节中，我将进一步详细介绍Service Worker的功能，包括一些小代码示例。

服务工作者启用以下功能，这些功能也是 PWA的核心：

离线功能
定期后台同步
推送通知

离线功能

Service Worke 通过缓存资源和拦截网络请求来提供离线功能，这些请求可以与先前缓存的资源一起使用，而不是重新请求服务器。

我们可以从中得出两个步骤：

预缓存
从缓存中处理请求

这两个步骤都利用了Cache API，它由 Web Workers 和浏览器使用，并且为我们提供了用于网络请求的存储机制。

对 Web 和服务工作人员上下文的 localStorage 访问被阻止，以防止并发性问题。作为一种替代方案，IndexedDB 可以用于存储大量数据。

预缓存

预缓存是一个术语，描述了在 Service Worker 处于激活状态之前下载和缓存文件。它是在 Service Worker 生命周期的“install ”步骤中完成的。一旦 Service Worker 处于激活状态，它将准备为缓存中的文件提供服务。

通常，我们要缓存 Application Shell，这是运行网站所需的最少代码量。如果开发了本机应用程序，那么这就是您将上传到应用程序商店的代码包。这包括所有必需的基本JavaScript，HTML和图片。

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(currentCache.offline).then(function(cache) {
      return cache.addAll([
        '/static/images/offline.svg',
        '/static/html/offline.html',
      ]);
    });
  );
});

从缓存中处理请求

在此阶段，我们已经将所有应用程序代码存储在缓存中，并且Service Worker 已处于激活即运行于浏览器后台。

现在唯一缺少的是监听 fetch 事件并从缓存中返回结果。可以通过 fetch 事件可以拦截到当前作用域范围内的 http/https 请求，并且给出自己的响应。结合 Fetch API ，可以简单方便地处理请求响应，实现对网络请求的控制。