PWA - 简化 Service Worker 生命周期 - 3 个简单步骤

感谢您的阅读，我是 Tharun Shiv，又名开发者 Tharun

什么是渐进式 Web 应用程序？

渐进式 Web 应用 (PWA) 可让您创建具有原生应用体验和功能的网站。这些功能包括：

• 类似移动应用程序的体验
• 离线功能
• 推送通知
• 后台同步等等，所有这些都可以用你搭建网站时用到的技术来实现。没错，我说的是 JavaScript。

服务工作者

在这个 PWA 世界中，一个关键角色是“Service Worker”。Service Worker 是一个 JavaScript 文件，它运行在与网站 JavaScript 文件运行的线程不同的单独线程上。Service Worker 始终处于运行状态，并监听传入的响应和传出的请求。

它无法修改网站的 DOM，但可以执行许多强大的任务，例如

• 处理推送通知
• 后台同步
• 拦截请求和响应
• 缓存文件以实现离线体验等

生命周期的三个阶段

要使 Service Worker 开始执行其后台任务，我们必须确保它在后台启动并运行。Service Worker 经历的阶段大致可分为以下几个阶段：

1. 注册阶段
2. 安装阶段
3. 激活阶段

1. 注册

Service Worker 生命周期的第一阶段是将其注册到浏览器。注册可以通过两种不同的方式完成：

• 你可以为服务工作者指定一个范围
• 将其保留为服务工作者文件所在的默认全局范围

范围是指服务工作者可以访问的文件。

让我们看下面的注册服务工作者的示例：

app.js（或链接到网页的任何 JavaScript 文件）

if ('serviceWorker' in navigator) { // check compatability 
    navigator.serviceWorker.register('/sw.js') // register
    .then((res) => {
        console.log('Service worker registered!'); // success
    })
    .catch((err) => {
        console.log('Registration failed!'); // failure
    })
}

我们提到范围的一个例子：

app.js（或链接到网页的任何 JavaScript 文件）

if ('serviceWorker' in navigator) { // check compatability 
    navigator.serviceWorker.register('/sw.js', {
        scope: '/pages/'
    })
    .then((res) => {
        console.log('Service worker registered!'); // success
    })
    .catch((err) => {
        console.log('Registration failed!'); // failure
    })
}

在上面的例子中，服务工作者仅在目录范围内运行pages。

2.安装

我们之前所做的只是在浏览器中注册了 Service Worker，但没有安装它。Service Worker 成功注册后，还无法安装。Service Worker 脚本会被下载到浏览器中，浏览器会尝试安装 Service Worker。

有几种情况需要安装 Service Worker：

1. 新的 Service Worker 文件
2. 修改后的 Service Worker 文件

此安装是自动的，安装完成后install会触发相应事件，我们可以监听此事件来执行某些任务。假设我们想要离线功能，我们可以在此install事件中缓存资源。

示例：在安装事件期间缓存资产

sw.js（不同于注册文件）

const cacheName = 'site-cache-v1'
const assetsToCache = [
    '/',
    '/index.html',
    '/css/styles.css',
    '/js/app.js',
]

self.addEventListener('install', ( event ) => {
    event.waitUntil(  
        caches.open(cacheName).then((cache) => {
              return cache.addAll(assetsToCache);
        })
      );
});

在上面的示例中，我们首先声明了静态缓存名称以及要添加到缓存中的资源。在事件发生时install，我们会等待文件缓存完成。因此，我们打开缓存存储并存储所有资源。

3. 激活

安装阶段成功后，下一个阶段是激活阶段。Service Worker 现在处于激活installed状态，但尚未激活。Service Worker 不会在安装后立即自动进入激活状态！activated已运行的服务只有在以下情况下才能进入激活状态：

• 所有页面均未使用 Service Worker，并且已关闭
• 该页面上没有其他活跃的服务人员

有几种方法可以强制激活新的 Service Worker

• 可以shift+reload刷新页面
• 关闭标签页/导航至服务工作者未处理的另一个页面
• 转到开发人员工具中的服务工作者选项卡，然后单击跳过等待。

您还可以在事件skipWaiting()期间调用该方法install来触发服务工作线程的自动激活。

例子

sw.js

const cacheName = 'site-cache-v1'
const assetsToCache = [
    '/',
    '/index.html',
    '/css/styles.css',
    '/js/app.js',
]

self.addEventListener('install', ( event ) => {

    self.skipWaiting(); // skip waiting

    event.waitUntil(  
        caches.open(cacheName).then((cache) => {
              return cache.addAll(assetsToCache);
        })
      );
});

Service Worker 的其他状态

1. 空闲状态- 服务工作者不接收功能事件
2. 终止状态- Service Worker 长时间闲置后进入此状态
3. 未注册状态- 服务工作者被另一个服务工作者替换或手动取消注册。

🙂如果您喜欢 Web 开发视频，请考虑订阅 YouTube 频道：https://youtube.com/c/developerTharun 🔥

希望本文能帮助您了解渐进式 Web 应用的生命周期。如果您喜欢，请点赞 ❤、unicorn 🦄，并保存文章以供日后阅读。😊 欢迎评论您在 PWA 方面的观点或经验。🎉 如果您想阅读此类文章，请关注我。🎶

我的相关文章：

PWA 的优势

构建你自己的 PWA

作者：

塔伦·希夫跟随

网站可靠性工程师 | 博主 | 播客 | Youtube @developertharun

感谢您的阅读，我是 Tharun Shiv，又名开发者 Tharun