前言
现在的 web 应用离不开离线支持，因为网络随时可能中断，而像在线游戏这类实时应用则需要以最大限度减少延迟的方式来提供最佳体验。Web 应用可以利用 Service Worker 实现离线支持和快速展示，而 @anilanar/workbox-webpack-plugin 就是一个 Service Worker 工具库。本文将详细讲解如何使用该 npm 包来实现 Service Worker 的生成和缓存管理。
安装
首先，使用 npm 安装 @anilanar/workbox-webpack-plugin。
npm install @anilanar/workbox-webpack-plugin
基本使用
在项目的 Webpack 配置文件中添加 Workbox 插件。
-- -------------------- ---- -------
----- ------------- - --------------------------------------------
-------------- - -
-- ---
-------- -
--- --------------------------
------------- -----
------------ ----
--
-
-这会生成一个 Service Worker 文件，并在构建时自动将其包括在内。
缓存管理
通过 Workbox 插件，我们可实现资源的缓存管理。以下是一些常见的缓存场景：
缓存静态资源
使用 Workbox 插件的 precacheAndRoute 方法，可在离线时展示所有必需的 HTML、CSS 和 JS 文件。使用某些静态资源时需要注意，例如图片和字体需要使用 Cache API 进行管理。
const { precacheAndRoute } = require('workbox-precaching');
precacheAndRoute(self.__WB_MANIFEST);这里的 self.__WB_MANIFEST 是项目构建后的 manifest 文件。
缓存数据请求
使用 Workbox 插件的 cache API，可对数据进行缓存，以便于离线情况下仍能够利用缓存数据来展示应用。
-- -------------------- ---- -------
------ - ---------- - ---- ---------------
------ - ----------------------- - ---- -----------------------------
------ - ------------ - ---- ---------------------
------------------------------
-------------------------------
--- --------------
---------- -------------------
-------- -
--- -------------------------
--------- -----
--
-
--
--缓存 API 请求
使用 Workbox 插件的 BackgroundSync 方法，可将未发送的 POST 请求队列保存在 IndexedDB 中，以便于下次尝试。
-- -------------------- ---- -------
------ - ----- - ---- --------------------------
----- ----- - --- ----------------------- -
------- ----- -- ----- -- -- -
--- ------
----- ------- - ----- ---------------------- -
-- ----- --- --
----- ---------------------
-
-
---
------------------------------ ------- -- -
-- ------------------ --- ------------------------------- -
-----------------------------------------------
-
---
----- -------- --------------------------- -
-- --------------------- --- ------- -
--- -
----- -------- - ----- -----------------------------
-- ------------- -
------ ---------
-
------------------- -------- ------------- ---
- ----- ------- -
------------------- -------- ------------- ---
-
------ --- --------------------
-
------ ---------------------
-额外功能
@anilanar/workbox-webpack-plugin 还提供了一些额外的功能，以及最佳实践：
预缓存
使用 Workbox 插件的 precaching 方法，可以预加载和缓存资源。此方法会将需要缓存的资源添加到指定的 manifest 文件中。
-- -------------------- ---- ------- ----- - -------------- - - ------------------------- ---------------- ------ ------------ ------- ------------- -------------- ------- ------------- ------------------------------ ---------- -- - -------------------- ------ ------------ ---
白名单
使用 Workbox 插件的 skipWaiting 方法，可以在 Service Worker 安装时强制使旧的 Service Workers 失效。
const { skipWaiting } = require('workbox-core');
skipWaiting();黑名单
使用 Workbox 插件的 clientsClaim 方法，可使 Service Worker 接管当前客户端并立即控制页面。
const { clientsClaim } = require('workbox-core');
clientsClaim();缓存策略
Workbox 插件提供多个缓存策略：
- CacheFirst
- CacheOnly
- NetworkFirst
- NetworkOnly
- StaleWhileRevalidate
这些策略基于 Webpack 配置中给定的文件类型进行处理。
结语
通过使用 @anilanar/workbox-webpack-plugin，我们可以实现全面的离线支持和快速展示。希望该插件能为您带来效率和便捷，祝您愉快编码！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fbb81e8991b448dd065