PWA Service Worker for Dummies

事实上，Service Worker 将在未来几年发挥重要作用，您越快熟悉这项新技术，就越能更好地适应 Web 的新未来。

这就是为什么为了帮助您更好地了解这项新技术，我们将一起讨论服务工作者——它是什么，它给 Web 带来了什么，我们如何更好地为这项新技术做好准备网络。

什么是服务人员？

定义

Service Worker 被普遍认为是制造或破坏 PWA 的技术，它是一种独立于浏览器运行并负责网络拦截的 API——正因为如此，它可以完成许多以前在 Web 上不可能完成的事情。 由服务人员控制的网站（通常是 PWA）可以与正在使用的设备进行更深入的集成，从而为 Web 带来更多的硬件功能和类似应用程序的功能（例如推送通知、后台同步等）。

这个怎么运作

简而言之。 service worker 本质上是浏览器和服务器之间的一个基于事件的层，用于拦截、修改和处理传出的网络请求：

由于 service worker 是基于事件的，它只通过事件响应和通信，并使用 promise 来判断操作何时完成。 然而，所有事件的接收（例如fetch和push ）只有在 service worker处于活动状态时才可能发生，这表明浏览器何时识别并注册service worker（以及 service worker 本身成功完成安装的时间） 。 简而言之，这是 Service Worker 的典型生命周期：

另外，请注意 service worker 中的所有这些可用事件：

所有功能事件（ fetch 、 sync和push ）对您来说应该是不言自明的，因为它们是构成 PWA 的几乎所有渐进式特性特征的事件（即离线功能、后台同步、推送通知）。

 推荐阅读：什么是 PWA？ 您需要了解的有关渐进式 Web 应用程序的所有信息

对服务人员的限制

由于这是一个独立于浏览器运行的脚本，因此存在一些限制：

• HTTPS 协议：服务工作者必须在基于 HTTPS 的网站上运行

• 无法访问localStorage 、 DOM 和窗口。
• scope有限：service worker 只能在service-worker.js所在的当前目录（及子目录） scope操作。
• 异步：服务工作者本质上是异步的，因此依赖于基于 Promise 的 API。

Service Worker 对 PWA 的意义

如前所述，Service Worker 是 PWA 的支柱，没有它，PWA 的许多革命性特性都是不可能的。 本质上，Service Worker 所做的是提供以下手段：

更好的性能

在 PWA 上，重复访问的性能要好得多，因为服务工作者在缓存过程中做了很大的帮助。 与大多数网站使用的典型 Web 缓存（HTTP 缓存）相比，即使在不利的网络条件下，PWA 也能出色地提供内容：

这一切都归功于服务工作者让开发人员完全自由地了解缓存的具体内容和方式。 要了解 Service Worker 的缓存性能有多好，我们推荐 Google 最近的研究：衡量 Service Worker 的实际性能影响。 该研究有一个明确的方法，以首次绘画的时间为中心，作为确定服务人员绩效的指标。

平均而言，对于新访问者和回访者来说，当服务工作者控制页面时，页面加载速度要比没有服务工作者时快得多。

Philip Walton，衡量服务人员对现实世界的绩效影响

离线访问

注册后，Service Worker 会为您的 PWA 站点缓存必要的内容，然后再提供服务。 这有效地使 PWA 支持的网站能够离线，因为用户仍然可以与网站交互并查看所有缓存的内容。

这并不是说离线访问是以前在 Web 上看不到的功能 -可以为用户提供 Web 上的离线体验，只是体验不是最佳的（请参阅应用程序缓存是一个 Douchebag）和服务worker 的发明是为了解决（或者更像是避免）AppCache 的缺点。

 推荐阅读：如何让你的 PWA 离线工作

原生应用功能

除了提供离线访问和改进的性能外，Service Worker 还充当更多类似于应用程序的功能的基础，例如推送通知和后台同步（以及在不久的将来，地理围栏和定期同步）。 例如，PWA 的推送通知功能是使用两个 API 组合而成的：Notifications API 和 Push API，这两个 API 都构建在 Service Worker API 之上。

Service Worker 的生命周期

服务的生命周期由三个部分组成：注册、安装和激活，我们将在下面详细介绍所有这些部分：

登记

我们需要做的第一步是注册服务工作者。 如果没有这一步，浏览器将不知道您的 service worker 所在的位置，因此无法在后台安装 service worker。
我们可以使用以下代码注册 service worker：

 if('serviceWorker' in navigator) {
    navigator.serviceWorker.register('./pwa-examples/simicart/sw.js', {scope: './sw-scope/'})
.then((reg) => {
   //注册成功
       console.log('注册成功，范围为' + reg.scope);
};

上面的代码会首先在浏览器中寻找 Service Worker API，如果浏览器支持该 API，它会使用 serviceworkerContainer.register() 方法注册一个新的 Service Worker，并给出 Service Worker 的scope 。 例如，在上面的代码中，我们的scope是/pwa-examples/simicart/ ，这意味着我们的 service worker 只适用于以/pwa-examples/simicart/页面。 我们称这些页面为“受控页面”。

安装

现在浏览器知道我们的 service worker 在哪里——以及它的范围是什么——它会尝试安装 service worker。 您可以选择在此阶段不执行任何操作，但我们仍然要注意，这是大部分缓存过程发生的阶段。 例如，这通常是缓存资产的过程：

 const cacheName = '站点缓存-v1'
常量 assetsToCache = [
    '/pwa-examples/',
    '/pwa-examples/index.html',
    '/pwa-examples/css/styles.css',
    '/pwa-examples/js/app.js',
]

self.addEventListener('install', ( event ) => {
    事件.waitUntil(  
        caches.open(cacheName).then((cache) => {
              返回缓存.addAll(assetsToCache);
        })
      );
});

正如您在上面的示例中所看到的，我们使用 Cache API 来缓存我们的资产，稍后我们将使用这些资产使我们的 PWA 能够离线。 此缓存过程发生在安装事件期间。

激活

在安装阶段之后，我们现在可以激活 service worker。 但是，这个激活阶段通常不会自动发生，为了激活 service worker，您必须确保当前没有 service worker 控制页面。

或者，您还可以使用skipWaiting()方法自动执行服务工作者的激活过程。

 const cacheName = '站点缓存-v1'
常量 assetsToCache = [
    '/pwa-examples/',
    '/pwa-examples/index.html',
    '/pwa-examples/css/styles.css',
    '//pwa-examples/js/app.js',
]
self.addEventListener('install', ( event ) => {
    self.skipWaiting(); // 跳过等待
    事件.waitUntil(  
        caches.open(cacheName).then((cache) => {
              返回缓存.addAll(assetsToCache);
        })
      );
});

网络需要服务工作者

在这一点上，我们都可以同意 service worker 几乎是 Web 必须采取的最终步骤。 用户对类似应用程序的功能的要求越来越高，再加上 PWA 正在成为软件交付的未来这一事实，看起来 Web 在未来几年具有很大的潜力。

对于希望改造店面的 Magento 商家，我们为您的企业提供具有成本效益且完整的无头 PWA 解决方案。