javascript - 如何将 workbox-webpack-plugin 与 Nuxt PWA 一起使用

Question

我目前在 Nuxt 上使用 PWA 插件，包括工作箱模块。但是，如果我没记错的话，这个插件不允许将 webpack 生成的资产添加到预缓存中。

是否可以使用 workbox-webpack-plugin 仅生成 sw.js 文件的预缓存部分？如果是这样，它会怎么做？

https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin上有一些文档，但是我不确定如何将其应用于 Nuxt PWA 上下文。

Answer 1

Turns out this is only a problem in Version 3. For now I'm using the following workaround:

• create empty file plugins/sw-precache-register.js
• create file plugins/sw-precache.js with following content:

workbox.precaching.precacheAndRoute(self.__precacheManifest)

• add the following to nuxt.config.js:

import { InjectManifest } from 'workbox-webpack-plugin'

...

  workbox: {
    importScripts: ['_nuxt/sw-precache.js'],
    workboxExtensions: ['~/plugins/sw-precache-register.js']
  }

If anybody has a better solution I'll acceppt that answer.