在不使用 cdn 的情况下使用 workbox

Question

有人知道如何在不从 CDN 获取工作箱的情况下使用它吗？我试过这个...

将 workbox-cli 添加到我的依赖项中：

    "workbox-cli": "^3.6.3"

这让我获得了以下所有依赖项

$ ls node_modules | grep workbox
workbox-background-sync
workbox-broadcast-cache-update
workbox-build
workbox-cacheable-response
workbox-cache-expiration
workbox-cli
workbox-core
workbox-google-analytics
workbox-navigation-preload
workbox-precaching
workbox-range-requests
workbox-routing
workbox-strategies
workbox-streams
workbox-sw

然后我在示例中替换了这一行

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

有了这个

importScripts('workbox-sw.js');

将 node_modules/workbox-sw/build/workbox-sw.js 复制到 public 文件夹后

但现在我通过查看网络选项卡意识到，该文件仍然从 cdn 获取所有其他模块

（我以为它会在里面构建所有内容。）

谁能告诉我是否有某个 npm 包已经包含了所有内容？还是我应该从 npm 文件夹中复制我需要的模块，然后自己以某种方式将它们捆绑在一起？还是我必须使用 webpack 插件？（我想这只会捆绑我使用的模块）

Answer 1

（更新：Workbox v5 使使用 Workbox 运行时的本地副本的过程变得更加简单，并且在大多数情况下，这是默认设置。）

还需要执行一个步骤。 “Using Local Workbox Files Instead of CDN”有详细信息：

If you don’t want to use the CDN, it’s easy enough to switch to Workbox files hosted on your own domain.

The simplest approach is to get the files via workbox-cli's copyLibraries command or from a GitHub Release, and then tell workbox-sw where to find these files via the modulePathPrefix config option.

If you put the files under /third_party/workbox/, you would use them like so:
importScripts('/third_party/workbox/workbox-sw.js');

workbox.setConfig({modulePathPrefix: '/third_party/workbox/'});
With this, you’ll use only the local Workbox files.

在不使用 cdn 的情况下使用 workbox

use workbox without using cdn

progressive-web-apps

workbox