如何使用 vite-pwa 将自定义 Service Worker 添加到 Nuxt 3？

Question

vite-plugin-pwa更具体地说，我正在尝试将 Nuxt 3 PWA 粘合在一起@vite-pwa/nuxt。我安装了模块并设置了基本配置（我基本上遵循了这个视频）

\n

我想要的是

\n

我想要实现的第一个功能是在固定时间向用户发送推送通知。即使他们不在应用程序中，他们也应该收到推送通知。这就是我添加 PWA 模块的原因。

\n

我不明白的是

\n

我不知道如何添加我的自定义服务人员。如果我理解正确，我可以编写一个服务工作人员，它只需使用通知 API 向我的应用程序发送推送通知。不需要像 OneSignal 这样的服务（对吧？）。

\n

据我了解，Vite PWA 文档在底层使用了 google 的工作箱，默认情况下它会生成一个服务工作者。如果您设置injectRegister: \'script\'它应该在我的应用程序的头部注入服务工作者注册（如此处所述）。

\n

现在，当我通过开发人员工具搜索源代码时，我找不到任何 serviceWorker 脚本。奇怪的是，当我进入开发工具中的应用程序选项卡时，我可以看到 Service Workerdev-sw.js已注册。这是怎么添加的？

\n

\xe2\x80\x8b

\n

我想我必须在配置中设置一种模式来告诉工作箱不要为我生成服务工作人员注册。此模式应称为injectManifest，如此处和此处所述。但同样，我如何将其添加到我的代码中？

\n

正如文档中所建议的，我还查看了 elk 存储库。但不幸的是他们采取了不同的方法，目前不使用 vite-pwa/nuxt。

\n

如何添加自定义 Service Worker 来发送推送通知？

\n

是否有人有 Nuxt 3 中的 PWA 经验，特别是与 Service Worker 合作并发送推送通知的经验？

\n

Answer 1

我遇到了同样的问题，最终通过vite-pwa/nuxt git repo 上的问题进行了联系。

这方面vite-pwa不是由@vite-pwa/nuxt插件本身处理的。相反，它根据vite-pwa 网站上的基本文档使用底层库。

为了注册 service-worker，你需要一些东西：

1. 通过yarn 或npm 将workbox-core、workbox-precaching、 和作为依赖项安装。workbox-routing
2. 在应用程序的目录中创建一个 service-worker javascript 文件（默认情况下，vite-pwa 会查找sw.js） 。public
3. 将文件pwa.strategies中的属性设置nuxt.config.ts为injectManifest.
4. 更新你的 service-worker 文件，就可以了。

我建议复制默认@vite-pwa/nuxt创建的服务工作人员默认模板（这应该与您通过检查文件获得的内容类似dev-sw.js，因为这就是我复制此代码的地方）：

import { clientsClaim } from 'workbox-core'
import { precacheAndRoute, cleanupOutdatedCaches, createHandlerBoundToURL } from 'workbox-precaching';
import { registerRoute, NavigationRoute } from 'workbox-routing';

self.skipWaiting();
clientsClaim();
precacheAndRoute(self.__WB_MANIFEST);
cleanupOutdatedCaches();

//You can remove this code if you aren't precaching anything, or leave it in and live with the warning message
try {
    const handler = createHandlerBoundToURL('/');
    const route = new NavigationRoute(handler);
    registerRoute(route);
} catch (error) {
    console.warn('Error while registering cache route', { error });
}

//Your service-worker code here.

我最终按照本指南使用 Firebase SDK 来使用 Firebase Cloud Messaging 来推送通知。我需要一个后端服务来发送推送通知（我使用的是 asp.net core，但任何支持 Firebase Admin SDK 的东西都应该可以工作），但是您可能可以只使用 service-worker（快速谷歌）出现了这个答案，在配置 PWA 后应该是可行的。

编辑以获得更清晰的内容：

文件是如何dev-sw.js添加的

vite-pwa（用于修改 vite 构建的库）根据您传递到文件中的属性的@vite-pwa/nuxt配置规则生成 PWA ，然后每当浏览器请求文件时，都会由 nuxt 提供服务。pwanuxt.config.ts/sw.js