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

Question

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

我目前正在使用 Workbox 插件，我得到了这个代码：

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

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

问题是它去互联网下载那个文件，而我没有互联网连接。

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

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

Answer 1

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

运行:

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

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

然后您可以修改服务工作者脚本，使其显示为：

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"
);

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

Using Workbox via a local copy, without a CDN

vue.js

progressive-web-apps

workbox