小编Mog*_*ash的帖子

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

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

progressive-web-apps nuxt.js vite nuxtjs3

5
推荐指数
1
解决办法
3242
查看次数

Vue:v-on 处理程序中的错误(Promise/async):“错误:请求失败,状态代码 404”

当我在 youtube 上按照本教程进行操作时,出现以下错误(我已经在那里留下了评论,希望有人遇到同样的问题或知道如何解决它)。基本上,在教程的这一部分中,Cody 展示了如何使用 express 和 vue 构建注册表单。当我点击注册按钮时出现错误。

\n\n

错误信息

\n\n
POST http://localhost:8080/register 404 (Not Found)\n[Vue warn]: Error in v-on handler (Promise/async): "Error: Request failed with status code 404"\nfound in\n\n---> <Register> at src/components/Register.vue\n       <App> at src/App.vue\n         <Root>\nvue.esm.js?efeb:1897 Error: Request failed with status code 404\n    at createError (createError.js?16d0:16)\n    at settle (settle.js?db52:17)\n    at XMLHttpRequest.handleLoad (xhr.js?ec6c:59)\n[Vue warn]: Error in v-on handler (Promise/async): "Error: Request failed with status code 404"\n
Run Code Online (Sandbox Code Playgroud)\n\n

目录结构(仅相关部分)

\n\n
\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 client\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 components\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 HelloWorld.vue\n\xe2\x94\x82 …
Run Code Online (Sandbox Code Playgroud)

express vue.js axios

1
推荐指数
1
解决办法
2万
查看次数

标签 统计

axios ×1

express ×1

nuxt.js ×1

nuxtjs3 ×1

progressive-web-apps ×1

vite ×1

vue.js ×1