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

Question

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

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

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

Answer 1

事实证明这只是版本 3 中的问题。现在我正在使用以下解决方法：

创建空文件plugins/sw-precache-register.js
创建文件 plugins/sw-precache.js，内容如下：

workbox.precaching.precacheAndRoute(self.__precacheManifest)

将以下内容添加到 nuxt.config.js：

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

...

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

如果有人有更好的解决方案，我会接受这个答案。

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

How to use workbox-webpack-plugin together with Nuxt PWA

javascript

progressive-web-apps

nuxt.js

workbox-webpack-plugin