使用 ServiceWorker 使你的 WebApp 离线可用

02/28/2023 02:25:31 | China Standard Time

ServiceWorker 是一种特殊类型的 Web 辅助角色，能够使用 Fetch API 截获、修改和响应网络请求，访问 Cache API 和异步客户端数据存储（如 IndexedDB）来存储资源，还可以通过在本地缓存资源来加快 PWA 的速度，使 PWA 独立于网络来提高可靠性。

# 使用 ServiceWorker 管理网络请求

用户首次访问 PWA 时，将安装其 ServiceWorker 。 然后， ServiceWorker 与应用并行运行，即使应用未运行，也可以继续执行工作。

 ServiceWorker 负责截获、修改和响应网络请求。 当应用尝试从服务器加载资源，或发送从服务器获取数据的请求时，可能会发出警报。 发生这种情况时， ServiceWorker 可以决定让请求转到服务器，或者截获请求并从缓存返回响应。

![serviceworker](https://corehome.oss-accelerate.aliyuncs.com/blogs/fa73690d-2efd-4747-951e-9b76ddd9ed97.jpg)

# 注册 ServiceWorker

与其他 Web 辅助角色类似， ServiceWorker 必须存在于单独的文件中。 注册 ServiceWorker 时引用此文件，如以下代码所示：

```javascript
if ("serviceWorker" in navigator) {
    navigator.serviceWorker.register("/serviceworker.js");
}
```

运行 PWA 的 Web 浏览器可能会为 ServiceWorker 提供不同级别的支持。 此外，运行 PWA 的上下文可能不安全。 因此，最好在运行任何与 ServiceWorker 相关的代码之前测试对象是否存在 `navigator.serviceWorker` 。 在上述代码中，使用位于站点根目录的文件注册 `serviceworker.js`  ServiceWorker 。

请确保将 ServiceWorker 文件放在要管理的最高级别目录中。 此类目录称为 ServiceWorker  的范围 。 在前面的代码中，文件存储在应用的根目录中， ServiceWorker 管理应用域名下的所有页面。

如果 ServiceWorker 文件存储在目录 `js` 中 ，则 ServiceWorker 的范围将限制为目录 `js` 和任何子目录。 最佳做法是将 ServiceWorker 文件放在应用的根目录中，除非需要缩小 ServiceWorker 的范围。

# 截获请求

在 ServiceWorker 中使用的主事件是 `fetch` 事件。 每当应用运行的浏览器尝试访问 ServiceWorker 范围内的内容时，该 `fetch` 事件都会运行。

以下代码演示如何为 `fetch` 事件添加侦听器：

```javascript
self.addEventListener("fetch", event => {
    console.log('WORKER: Fetching', event.request);
});
```

在处理程序中 `fetch` ，可以控制请求是否转到网络、从缓存中拉取等。 根据请求的资源类型、更新频率以及应用程序特有的其他业务逻辑，你采用的方法可能会有所不同。

下面是在处理程序中可以执行的操作的 `fetch` 几个示例：

- 如果可用，请从缓存返回响应;否则，回退到通过网络请求资源。
- 从网络提取资源、缓存副本并返回响应。
- 允许用户指定保存数据的首选项。
- 为某些图像请求提供占位符图像。
- 直接在 ServiceWorker 中生成响应。

# ServiceWorker 生命周期

 ServiceWorker 的生命周期由多个步骤组成，每个步骤触发一个事件。 可以将侦听器添加到这些事件，以运行代码来执行操作。 以下列表显示了 ServiceWorker 的生命周期和相关事件的高级视图。

1. 注册 ServiceWorker 。

2. 浏览器下载 JavaScript 文件、安装 ServiceWorker 并触发 `install` 事件。 可以使用 `install` 事件预先缓存任何重要的长期文件 (，例如 CSS 文件、JavaScript 文件、徽标图像或从应用) 的脱机页面。

```javascript
self.addEventListener("install", event => {
    console.log("WORKER: install event in progress.");
});
```

3.  ServiceWorker 已激活，这会触发 `activate` 事件。 使用此事件清理过时的缓存。

```javascript
self.addEventListener("activate", event => {
    console.log("WORKER: activate event in progress.");
});
```

4. 当页面刷新或用户转到网站上的新页面时， ServiceWorker 已准备好运行。 如果要在不等待的情况下运行 ServiceWorker ，请在事件期间 `install` 使用 `self.skipWaiting()` 方法，如下所示：

```javascript
self.addEventListener("install", event => {
    self.skipWaiting();
    // …
});
```

5.  ServiceWorker 现在正在运行，可以侦 `fetch` 听事件。

# 预缓存资源

当用户首次访问应用时，将安装应用的 Service Worker。 `install` 使用 ServiceWorker 中的 事件来检测何时发生这种情况，并缓存应用所需的所有静态资源。 通过缓存应用的静态资源 (（如起始页所需的 HTML、CSS 和 JavaScript 代码) ），即使用户的设备处于脱机状态，应用也能运行。

若要缓存应用的资源，请使用全局 `caches` 对象和 `cache.addAll` 方法，如下所示：

```javascript
// The name of the cache your app uses.
const CACHE_NAME = "my-app-cache";

// The list of static files your app needs to start.
const PRE_CACHED_RESOURCES = ["/", "styles.css", "app.js"];

// Listen to the `install` event.
self.addEventListener("install", event => {
    async function preCacheResources() {
        // Open the app's cache.
        const cache = await caches.open(CACHE_NAME);
        // Cache all static resources.
        cache.addAll(PRE_CACHED_RESOURCES);
    }

    event.waitUntil(preCacheResources());
});
```

请注意，在初始安装之后，`install` 事件不会再次运行。 若要更新 ServiceWorker 的代码，请参阅下方 更新 ServiceWorker 。

现在， `fetch` 可以使用 事件从缓存返回静态资源，而不是从网络再次加载它们：

```javascript
self.addEventListener("fetch", event => {
    async function returnCachedResource() {
        // Open the app's cache.
        const cache = await caches.open(CACHE_NAME);
        // Find the response that was pre-cached during the `install` event.
        const cachedResponse = await cache.match(event.request.url);

        if (cachedResponse) {
            // Return the resource.
            return cachedResponse;
        } 
        else {
            // The resource wasn't found in the cache, so fetch it from the network.
            const fetchResponse = await fetch(event.request);
            // Put the response in cache.
            cache.put(event.request.url, fetchResponse.clone());
            // And return the response.
            return fetchResponse.
        }
    }

    event.respondWith(returnCachedResource());
});
```

# 使用自定义脱机页

当应用使用多个 HTML 页面时，常见的脱机方案是在用户设备脱机时将页面导航请求重定向到自定义错误页：

```javascript
// The name of the cache your app uses.
const CACHE_NAME = "my-app-cache";
// The list of static files your app needs to start.
// Note the offline page in this list.
const PRE_CACHED_RESOURCES = ["/", "styles.css", "app.js", "/offline"];

// Listen to the `install` event.
self.addEventListener("install", event => {
    async function preCacheResources() {
        // Open the app's cache.
        const cache = await caches.open(CACHE_NAME);
        // Cache all static resources.
        cache.addAll(PRE_CACHED_RESOURCES);
    }

    event.waitUntil(preCacheResources());
});

self.addEventListener("fetch", event => {
    async function navigateOrDisplayOfflinePage() {
        try {
            // Try to load the page from the network.
            const networkResponse = await fetch(event.request);
            return networkResponse;
        } 
        catch (error) {
            // The network call failed, the device is offline.
            const cache = await caches.open(CACHE_NAME);
            const cachedResponse = await cache.match("/offline");
            return cachedResponse;
        }
    }

    // Only call event.respondWith() if this is a navigation request
    // for an HTML page.
    if (event.request.mode === 'navigate') {
        event.respondWith(navigateOrDisplayOfflinePage());
    }
});
```

# 更新 ServiceWorker 

### 安装新的 ServiceWorker 版本

如果对 ServiceWorker 代码进行更改并将新的 ServiceWorker 文件部署到 Web 服务器，则用户的设备将逐渐开始使用新的 ServiceWorker 。

每当用户导航到应用的某个页面时，运行应用的浏览器都会检查服务器上是否有新版本的 ServiceWorker 。 浏览器通过比较现有 ServiceWorker 和新 ServiceWorker 之间的内容来检测新版本。 检测到更改后，将安装新的 ServiceWorker 并触发其 `install` 事件，然后新的 ServiceWorker 将等待现有 ServiceWorker 停止在设备上使用。

实际上，这意味着可以同时运行两个 ServiceWorker ，但只有一个会截获应用的网络请求。 当应用关闭时，现有的 ServiceWorker 将停止使用。 下次打开应用时，会激活新的 ServiceWorker 。 将 `activate` 触发该事件，新的 ServiceWorker 开始截获 `fetch` 事件。

安装新的 ServiceWorker 后， `self.skipWaiting()` 可以通过在 ServiceWorker 的 `install` 事件处理程序中使用 来强制激活它。

### 更新缓存的静态文件

预缓存静态资源（如 CSS 文件）时，应用仅使用文件的缓存版本，不会尝试下载新版本。

若要确保用户获取应用使用的静态资源的最新更改，请使用缓存破坏命名约定并更新 ServiceWorker 代码。

缓存破坏 意味着每个静态文件根据其版本命名。 这可以通过各种方式实现，但通常涉及使用生成工具，该工具读取文件的内容并根据内容生成唯一 ID。 该 ID 可用于命名缓存的静态文件。

接下来，更新 ServiceWorker 代码以在 期间 `install` 缓存新的静态资源：

```javascript
// The name of the new cache your app uses.
const CACHE_NAME = "my-app-cache-v2";
// The list of static files your app needs to start.
const PRE_CACHED_RESOURCES = ["/", "styles-124656.css", "app-576391.js"];

// Listen to the `install` event.
self.addEventListener("install", event => {
    async function preCacheResources() {
        // Open the app's cache.
        const cache = await caches.open(CACHE_NAME);
        // Cache the new static resources.
        cache.addAll(PRE_CACHED_RESOURCES);
    }

    event.waitUntil(preCacheResources());
});

// Listen to the `activate` event to clear old caches.
self.addEventListener("activate", event => {
    async function deleteOldCaches() {
        // List all caches by their names.
        const names = await caches.keys();
        await Promise.all(names.map(name => {
            if (name !== CACHE_NAME) {
                // If a cache's name is the current name, delete it.
                return caches.delete(name);
            }
        }));
    }

    event.waitUntil(deleteOldCaches());
});
```

比较上述代码片段与预缓存资源中的 和 值。CACHE_NAMEPRE_CACHED_RESOURCES 安装此新的 ServiceWorker 后，将创建新的缓存，并下载并缓存新的静态资源。 激活 ServiceWorker 后，将删除旧缓存。 此时，用户将拥有新版本的应用。

对 ServiceWorker 进行更改有时可能比较复杂。 使用库（如 [Workbox](https://developer.chrome.com/docs/workbox/) ）来简化静态资源生成步骤和 ServiceWorker 代码。

# 测试 PWA 中的网络连接

了解网络连接何时可用会很有帮助，以便同步数据或通知用户网络状态已更改。

使用以下选项测试网络连接：

### navigator.onLine

属性 navigator.onLine 是一个布尔值，可让你知道网络的当前状态。 如果值为 true，则用户处于联机状态;否则，用户处于脱机状态。

### 联机和脱机事件

可以在网络连接发生更改时采取措施。 可以侦听并采取措施来响应网络事件。 事件在 、 `document` 和 `document.body` 元素上 `window` 可用，如下所示：

```javascript
window.addEventListener("online",  function(){
    console.log("You are online!");
});

window.addEventListener("offline", function(){
    console.log("Oh no, you lost your network connection.");
});
```

# 其他功能

ServiceWorker 还可以用于其他高级方案，例如：

- 数据的后台同步。
- 定期同步数据。
- 大型后台文件下载。
- 推送消息的处理和通知。

### 后台同步

使用后台同步 API 允许用户继续使用你的应用并执行操作，即使用户的设备处于脱机状态也是如此。

例如，电子邮件应用可以允许其用户随时撰写和发送邮件。 应用前端可以尝试立即发送消息，如果设备脱机， ServiceWorker 可以捕获失败的请求，并使用后台同步 API 延迟任务，直到连接。

> 一旦可以使用连接且 ServiceWorker 正在运行，就会向 ServiceWorker 发送事件 sync ，该 ServiceWorker 可以使用该事件来同步必要的数据。 sync可以使用以下代码侦听事件：

```javascript
async function requestBackgroundSync() {
    await self.registration.sync.register('my-tag-name');
}

self.addEventListener('sync', event => {
    if (event.tag === 'my-tag-name') {
        event.waitUntil(doTheWork());
    }
});
```

### 定期后台同步

定期后台同步 API 允许 PWA 定期在后台检索新内容，以便用户以后再次打开应用时可以立即访问内容。

通过使用定期后台同步 API，PWA 无需下载新内容 (例如新文章) 用户正在使用应用时。 下载内容可能会减慢体验，因此应用可以在更方便的时间检索内容。

```javascript
async function registerPeriodicSync() {
    await registration.periodicSync.register('get-daily-news', {
        minInterval: 24 * 60 * 60 * 1000
    });
}

self.addEventListener('periodicsync', event => {
    if (event.tag === 'get-daily-news') {
        event.waitUntil(getDailyNewsInCache());
    }
});
```

> minInterval上述代码中使用的 对应于 1 天（以毫秒为单位）。 

### 大型后台文件下载

后台提取 API 允许 PWA 将大量数据下载完全委托给浏览器引擎。 这样，在下载过程中，应用和 ServiceWorker 就无需运行。

此 API 适用于允许用户下载大型文件 (（如音乐、电影或播客）) 脱机用例的应用。 下载将委托给浏览器引擎，该引擎知道如何处理间歇性连接，甚至完全丢失连接。

```javascript
navigator.serviceWorker.ready.then(async registration => {
    const fetch = await registration.backgroundFetch.fetch('my-download-id', fileUrls, options);
});
```

> 上面的 应 my-download-id 是此后台提取的唯一字符串标识符。 fileUrls 是要下载的文件列表，这是字符串 URL 的数组。 和 options 是一个对象，可用于在浏览器中自定义下载活动的外观。

### 推送消息

推送消息可以发送给用户，而无需他们当时使用应用。 即使应用未运行， ServiceWorker 也可以侦听服务器发送的推送消息，并在操作系统的通知中心显示通知。

> 使用 Mozilla 推送服务: 
[https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service](https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service)

03/21/2023 04:19:09

TOP