在 Quasar SPA 中使用 Service Worker答案

【问题标题】：Using a Service Worker in a Quasar SPA在 Quasar SPA 中使用 Service Worker
【发布时间】：2020-05-01 16:52:30
【问题描述】：

我有一个正常运行的 Bootstrap 应用程序，它使用 Service Worker 进行后台处理，我现在将这个应用程序重写为 Quasar SPA。一切都很好，但我不知道如何让 Quasar/Webpack 提供 Service Worker 文件。 请注意，我正在尝试创建 SPA 而不是 PWA。

我认为问题是我需要告诉 Quasar/Webpack 提供服务工作者文件和名称的未修改版本。

所以假设我的服务人员是：

// src/modules/sw.js
import * as moment from "moment";
console.log(`From worker: worker started at ${moment().format("HH:mm:ss")}`);
...

我正在尝试加载此服务人员：

// src/modules/foo.js
let worker = new Worker("/modules/sw.js");

导致错误：

Failed to load resource: the server responded with a status of 404 (Not Found) https://localhost:44444/modules/sw.js

事实上，如果我运行quasar build，dist 中的任何地方都没有sw.js。

本着 1000 万只猴子用打字机写莎士比亚戏剧的精神，我尝试在 quasar.conf.js 中添加一个条目，但这没有任何好处：

sourceFiles: {
  serviceWorker: 'src/modules/sw.js'
}

【问题讨论】：

标签： webpack quasar-framework quasar

【解决方案1】：

我最近为我的 Quasar SPA 应用解决了这个问题。解决方案由 3 部分组成：

在我的前端（客户端）代码中：注册服务工作者并订阅推送通知 - 目前这个代码位于我的 Quasar 主布局 (my-layout.vue) 的 created() 部分中。 Service Worker 注册是指 Service Worker 路径，如下面的第 2 步所述：

常量注册 = 等待 navigator.serviceWorker.register("statics/service-worker.js") .then(registration => {返回注册})
.catch(error => console.error("注册错误：", error) );
客户端 Service Worker 代码 - 我将此 .js 文件临时放在我的 /statics 文件夹中前端代码。这段代码接收推送通知并执行 showNotification() 在客户端显示通知消息。的原因您上面的错误是 /modules 文件夹不是服务人员的正确位置。
后端（服务器）代码：这段代码仍处于试验阶段，它会触发 sendNotification() 使用 NPM web-push 包，如下所述。

您需要做很多小事才能正确设置。以上整体设计最为重要。

对 3. 重要：传递给服务器上 sendNotification() 调用的对象：

pushSubscription 对象（这有一个字段“端点”和 2 个子字段的键是 1. 在客户端的订阅调用的输出参数）。对于生产级代码，您必须将这些从客户端发送到您的数据库并将它们存储在那里，例如作为部分用户信息，然后从那里检索它们。我的原型服务器代码当前使用从客户端（浏览器日志）获取这些值的副本只是为了开始。
有效负载对象 - 这必须是一个包含 JSON 的字符串（使用 JSON.stringify）
带有 vapidDetails 的选项对象，其中包括公钥和私钥（= 来自一次性命令行操作> web-push generate-vapid-keys)

其他需要注意的重要事项：

Service Worker 只能使用 https，不能使用 http
来自服务器的每个推送通知都会发送到一个客户端，所以如果你想向所有客户端广播，您需要遍历他们的所有订阅（因此我在上面的评论将此信息存储在您的数据库中）
在 SPA 中，您不能轻松地在 service worker 代码中使用 Quasar 函数。有为 PWA 提供更好的 Quasar/Service Worker 集成。
浏览器缓存 service worker 代码，所以需要经常重启浏览器在测试期间。最好放置一个 console.log("Here is service worker version x.y") 作为服务工作者中的第一条语句，以便能够在日志中轻松验证浏览器是否加载了正确的代码版本。
Service Worker 仍被归类为“实验性”浏览器功能。

我可以为这些片段粘贴代码 sn-ps，但它是很多行代码，所以只有当你要求时我才会这样做。总的来说，与它们提供的相比，我发现网络推送通知设置起来有点困难。我现在正在考虑使用网络套接字而不是网络推送通知。

【讨论】：