我是如何构建我的第二个渐进式 Web 应用 (PWA) 的
本文最初发表于silvestar.codes。
从今天起，我的副业项目Code Line Daily已作为渐进式 Web 应用 (PWA) 上线。
如果你碰巧读过我之前关于“我是如何构建我的第一个渐进式 Web 应用 (PWA) 的”的文章，那么这篇文章就是它的续篇。
工作箱
在我之前尝试制作 PWA 的过程中，所有操作都是手动完成的。我了解了可用的选项和技术，这帮助我理解了 PWA 网站的工作原理。
这次，我决定使用Workbox来制作 PWA。Workbox 是谷歌推出的一款工具，可以更流畅地制作 PWA。
Workbox 是一组库和 Node 模块，可以轻松缓存资源并充分利用用于构建渐进式 Web 应用程序的功能。
Workbox 提供了一份非常棒的“入门指南”，我按照指南操作，几分钟就完成了初始版本的设置。Workbox 提供了一些预定义的缓存策略，例如“CacheFirst”或“StaleWhileRevalidate”。您只需一行代码即可设置缓存策略，如下所示：
// Serve all CSS files with StaleWhileRevalidate strategy
workbox.routing.registerRoute(
/\.css$/,
new workbox.strategies.StaleWhileRevalidate()
)
该策略规定，如果旧版/过时的 CSS 文件可用，则优先提供这些文件。如果文件不可用，则通过网络请求获取文件。
您可以在 GitHub 存储库中查看 Code Line Daily 的所有策略。
预缓存
设置好策略后，我使用Workbox CLI创建了要预缓存的文件列表。我已经将 Workbox CLI 安装为全局npm软件包。
npm i -g workbox-cli
之后，workbox我的终端中就出现了该命令。我运行了该命令来启动向导。
workbox wizard --injectManifest
我已经选择了配置路径和要预缓存的文件，Workbox CLI 为我创建了一个新文件。
为了能够将文件注入到 Service Worker 文件中，我向其中添加了以下行：
workbox.precaching.precacheAndRoute([]);
最后，我运行了该命令workbox injectManifest，创建了一个新的 Service Worker 文件，其中包含要预缓存的文件列表。
自动化
我对目前一切运行正常的情况很满意，但我意识到我需要手动运行这些命令。由于我已经投入了大量精力来实现这个项目的自动化，所以我想把 Workbox 添加到我的 Gulp 任务中。幸运的是，Workbox 也提供了 Node.js 插件版本。
有一种generateSW模式可以创建一个带有预缓存设置的服务工作线程，这似乎很符合我的需求。
这将生成一个带有预缓存设置的服务工作线程，用于处理您的配置中选取的所有文件。
以下是我的项目配置。
{
"globDirectory": "dist/",
"globPatterns": [
"**/*.{html,webmanifest,css,eot,svg,ttf,woff,woff2,png,js,ico,jpg}"
],
"globIgnores": [
"docs/**/*",
"gfx/cover/**/*"
],
"swDest": "dist/sw.js",
"swSrc": "src/sw/sw.js"
}
在哪里：
swSrc此选项用于指定 Service Worker 文件的位置。swDest该选项指定处理后的 Service Worker 文件保存位置。globDirectory该选项指定要扫描哪个文件夹以查找预缓存文件，globPatterns选项指定要使用的模式，globIgnores该选项指定要忽略哪些文件夹，即使模式匹配。
运行 Gulp 任务后，我得到了最终的 Service Worker 文件，其内容如下所示：
// load workbox
importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js')
// output successful message
if (workbox) {
console.log(`Yay! Workbox is loaded 🎉`)
} else {
console.log(`Boo! Workbox didn't load 😬`)
}
workbox.core.setCacheNameDetails({
prefix: 'cld',
suffix: 'v1.0',
precache: 'precache',
runtime: 'runtime'
})
workbox.precaching.precacheAndRoute([
// precached file list
])
// Serve all html files with StaleWhileRevalidate strategy
workbox.routing.registerRoute(
/\.html$/,
new workbox.strategies.NetworkFirst()
)
// Serve all css files with StaleWhileRevalidate strategy
workbox.routing.registerRoute(
/\.js$/,
new workbox.strategies.StaleWhileRevalidate()
)
// Serve all css files with StaleWhileRevalidate strategy
workbox.routing.registerRoute(
/\.css$/,
new workbox.strategies.StaleWhileRevalidate()
)
// Serve all other assets with CacheFirst strategy
workbox.routing.registerRoute(
/\.(?:png|jpg|jpeg|svg|gif|webp|ico|webmanifest|eot,ttf,woff,woff2)$/,
new workbox.strategies.CacheFirst({
plugins: [
new workbox.expiration.Plugin({
maxEntries: 20,
maxAgeSeconds: 30 * 24 * 60 * 60
})
]
})
)
最终结果
Code Line Daily 现在是一个渐进式 Web 应用 (PWA) 了。这是我的第二个 PWA，我建议大家了解一下。网站现在可以离线访问，而且它还会尽可能地提供缓存资源，从而为用户节省带宽。不妨安装一下Code Line Daily，然后告诉我你的想法。
此外，我还对 Code Line Daily 网站进行了审核，结果发现它和我的私人网站一样，再次出现了各种问题。💯
文章来源：https://dev.to/starbist/how-i-built-my-second-progressive-web-app-pwa-3edo