时间戳

首页 > 解决方案 > 通过本地副本使用 Workbox，无需 CDN

vue.js - 通过本地副本使用 Workbox，无需 CDN

问题描述

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

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

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

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

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

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

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

标签： vue.jsprogressive-web-appsworkbox

解决方案

您可以按照workbox-sw文档中的指南下载捆绑的 Workbox 运行时库的本地副本，并修改您的 Service Worker 脚本以使用它们。

跑步：

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

推荐阅读