通过本地副本使用 Workbox，无需 CDN

【问题标题】：Using Workbox via a local copy, without a CDN通过本地副本使用 Workbox，无需 CDN
【发布时间】：2021-08-27 01:06:42
【问题描述】：

我有一个小型设备，可以在本地网络中使用 Nginx 为网页提供服务。我正在使用 Vue 开发网页，我需要一旦有人连接到服务器并访问该页面，在断开连接时，该页面需要正常工作

我目前正在使用 Workbox 插件，我得到以下代码：

importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");

importScripts(
  "/precache-manifest.b62cf508e2c3da8c27f2635f7aab384a.js"
);

问题是它会通过互联网下载该文件，而我将无法连接互联网。

我尝试下载这个文件，但里面又上网了。

有没有办法让它在离线环境中工作？

【问题讨论】：

标签： vue.js progressive-web-apps workbox

【解决方案1】：

您可以按照workbox-sw docs 中的指导下载捆绑的 Workbox 运行时库的本地副本，并修改您的 Service Worker 脚本以使用这些。

跑步：

$ npx workbox-cli@4.3.1 copyLibraries /path/to/dir

从命令行将运行时的本地副本下载到指定目录（将/path/to/dir替换为所需位置）。

然后您可以修改您的 Service Worker 脚本，使其显示为：

importScripts("/path/to/dir/workbox-v4.3.1/workbox-sw.js");

workbox.setConfig({
  modulePathPrefix: '/path/to/dir/workbox-v4.3.1/'
});

importScripts(
  "/precache-manifest.b62cf508e2c3da8c27f2635f7aab384a.js"
);

【讨论】：