PWA 和 Service Worker 简介

渐进式 Web 应用

渐进式 Web 应用（简称 PWA）正变得越来越流行。在本文中，我将向您介绍什么是渐进式 Web 应用，以及如何使用 Service Worker 创建一个 PWA。

什么是PWA？

PWA（渐进式Web应用）是一种旨在像原生应用一样在手机上运行的应用。它是一个普通的Web应用，当您在浏览器中打开它时，会显示
“添加到主屏幕”的消息。点击该消息后，应用将被安装到您的手机上，您将在设备的主屏幕上看到它的图标。

PWA（渐进式Web应用）越来越受欢迎，因为它们有助于提升用户访问网站的体验。访问传统网站可能需要几秒钟的时间。然而，由于使用了Service Worker，PWA的加载速度显著加快。

你的设备上可以安装三种类型的应用程序：

-原生 -
杂交
-PWA

原生应用：在我看来，除非你使用高画质，并且需要与设备进行大量用户交互（例如玩游戏），否则我会选择原生应用。原生应用开发成本较高，因为需要双倍的投入和时间——需要为 Android 和 iOS 分别开发两个应用。

混合开发：这是一个不错的选择，因为它使用同一套技术栈，可以从相同的源代码分别构建 Android 和 iOS 平台的版本。如果你的应用对速度和图形性能要求不高，我建议使用混合应用。混合应用可以通过使用原生代码构建的插件来访问设备硬件。

PWA 怎么样？

PWA：与以往类型的应用程序相比，PWA 开发成本更低、速度更快，而且支持离线使用！开发 PWA 的方式与开发普通响应式 Web 应用程序类似，区别在于需要添加Service Worker来实现离线支持，以及将应用程序安装到主屏幕等功能。

什么是服务人员？

Service Worker 是一个独立于我们网站运行的脚本，它在后台运行。Service Worker 非常强大，可以帮助我们实现各种功能，例如缓存页面、缓存 API 调用、推送通知、后台同步等等。

• 服务工作线程可以缓存网络请求。

• Service Worker可以处理网站中的网络请求。

• 服务工作线程可以使用后台同步 API，该 API 允许您将操作延迟到用户连接稳定时执行。

• 服务工作线程无法直接访问/交互 DOM。

• 服务工作线程可以缓存您网站上的内容，例如静态资源。

• 即使应用未处于活动状态，服务工作线程也能接收推送通知。

• 服务工作线程在不使用时保持非活动状态。当它收到需要使用的“信号”时，就会重新激活。

• 可以使用Service Worker让你的应用离线也能运行。

Service Worker 的生命周期

-注册服务工作线程：

Service Worker 生命周期的第一步是注册 Service Worker。您可以使用以下代码进行注册：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

谷歌的 Jeff Posnick 在他的一篇关于 Service Worker 的文章中教了我一个小技巧。这个技巧可以简单地改进 Service Worker 的注册过程。

if ('serviceWorker' in navigator) {
  window.addEventListener('load',()=> {
    navigator.serviceWorker.register('/service-worker.js');
  });
}

这段代码会在整个页面加载完毕后注册服务工作线程，但请记住，这样做可能会延迟服务工作线程的注册。

-安装 Service Worker：此过程仅在 Service Worker 加载完成后调用一次。如果您修改了现有的 Service Worker，浏览器将更新并重新安装 Service Worker。

install在 Service Worker 安装过程中会触发一个事件。您可以处理此事件，并在需要时执行一些异步操作（例如，缓存静态资源）。为此，您可以使用`event.waitUntil()`。此方法会使 Service Worker 保持在当前阶段，直到传递给`event.waitUntil()`install的Promise被解析为止。根据该 Promise 是被解析还是被拒绝，该阶段要么成功完成，要么失败。install

要安装 Service Worker，我们需要执行以下操作：

1）打开缓存。2
）缓存文件。3
）确认所有必需资源是否都已缓存。

const web_cache = 'web-app-cache-v1.0';
const filesToCache = [
  '/',
  '/styles/styles.css',
  '/script/main.js'
  ....
];

self.addEventListener('install',(event)=> {
  event.waitUntil(
    caches.open(web_cache)
      .then((cache)=> {
        //Cache has been opened successfully
        return cache.addAll(filesToCache);
      })
  );
});

以下是如何在浏览器中直接检查 Service Worker 是否已成功安装和注册的说明。

在 Chrome 浏览器中（废话）

1) 打开开发者工具。2
) 在工具栏中点击“应用程序”
。3) 在左侧，你会看到一个侧边栏。点击“Service Worker”。4
) 你应该会看到类似以下内容：

-激活 Service Worker：

Service Worker 可以在不同场景下进入激活状态。以下列举了一些场景：

• 我们的应用中没有现有的 Service Worker。
• 我们在 Service Worker 中运行 ` self.skipWaiting()`方法。
• 用户已离开页面，释放了之前活动的 Worker。
• 经过一段时间后，之前的活跃员工将被释放。

-活动服务工作线程：

当服务工作线程处于活动状态时，您可以在注册对象中检查其状态。

navigator.serviceWorker.register('./service-worker.js').then((registration)=> {
    if (registration.active) {
        console.log('Service worker is active');
    }
})

-冗余服务工作线程：

Service Worker 可能由于以下原因而出现冗余（即出现错误）：

• Service Worker 安装失败
• 服务工作线程在激活时失败
• 新的 Service Worker 会替换现有的 Service Worker，成为活动的 Service Worker。

就到这里啦！

资料来源：

- https://developers.google.com/web/fundamentals/primers/service-workers
- https://bitsofco.de/the-service-worker-lifecycle/
- https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle