问题标签 [next-pwa]

我计划将 next-pwa 与 workbox 的后台同步插件结合使用，以在客户端在线时重试离线 POST/PUT/DELETE 请求。

我已经设置了一个 runtimeCaching 条目：

它似乎正在缓存 GET 请求，但对 POST 请求没有任何作用。

我一直在使用next-pwa （npm 链接）来自动化服务人员设置，以便在 NextJS 中设置 PWA。在大多数情况下，一切都很顺利。但是，我一生都无法弄清楚如何解决仍然出现在灯塔审计中的一个错误（如下所示）。我已经阅读了大量帖子并尝试实施几种不同的解决方案，但到目前为止还没有成功。

这是由sw.js自动创建的NextJS。

这里是next.config.js

和我的public/manifest.json

我几乎没有想法，我一直在阅读next-pwa npm 文档，相关的示例文件和第三方资源，对于所有这些似乎都有效，但是......我'我没有这样的运气。

最后，我部署它时的响应（虽然它成功了，也许这是问题的一部分？）

我一直在尝试将我的应用程序部署到 vercel 一段时间，并且一直在阅读有关 stackoverflow 的许多帖子，其中存在相同/相似的fsevents问题。尽管我不断收到下面发布的相同错误。

我尝试过的事情：

• 卸载node_modules& package-lock.json，然后运行：npm i -f
• 加 "optionalDependencies": {"fsevents": "^2.3.2"}，然后npm i -f
• fsevents不安装package.json
• ...以及许多其他尝试

我的部署中总是发生的事情的屏幕截图

我不太熟悉整个 fsevents/chokidar 包的内容/原因，但在我阅读完之后，我的 MacOS 似乎需要它，我真的很感激解决这个问题的一些想法。

当前 package.json

嗨，我正在研究 Nextjs 项目，我尝试使用 next-pwa 将其转换为 PWA，首先我创建了 next.config.js

然后创建了 manifest.json

我在页面中的 de _document 文件中添加元数据

但是当我运行时：

在 Google Chrome 中我的 PWA 工作正常，但在控制台中我收到此错误：在其他浏览器中，此错误不会出现

Uncaught (in promise) TypeError: Failed to fetch

而且我真的不知道为什么，使用 npm run dev 在 dev mod 中运行应用程序我在 chrome 中收到以下消息：

这是我的公用文件夹结构：

我试图在这个视频中做同样的事情。 https://www.youtube.com/watch?v=8enp-acPbRE

任何人都可以帮助我吗

I'm facing a very strange issue with next-pwa. Whenever I try to build a next-pwa project that includes a custom worker js file, the build fails with the following error:

I have tried several things so far to fix this issue:

• Clone the repo and updated all dependencies (i thought the issue might be webpack related)
• Building the project without a custom worker file (works fine)
• Downgrade to Node 10, 12, 14, 15, and re-install dependencies.

I've also tried the to use the code provided in the /example folder of the repo, but the same issue occurs there as well.

I'm not the only one facing this issue so i would appreciate help.

You can test it yourself using Gitpod, just open this link and navigate to the example, install dependencies and try yarn build.

我正在使用 nextJS 版本“10.0.9”和 next-pwa 版本“^5.0.6”，它们一起工作得很好，我的应用程序无法满足，但由于某些原因，我需要为所有路由添加前缀，所以我添加“basePath”属性并在 next.config.js 文件中将其设置为“/recharge-cards”，但之后我的应用程序变得可卸载，我尝试了很多方法，将范围和 subdomainPrefix 更改为“/recharge-cards”并更改我的 _document.js 上的文件路径，但似乎没有任何效果。

下面你会找到我的文件，所以帮我解决这个问题

清单.json

next.config.js

_document.js（头部）

项目文件

当我Uncaught (in promise) bad-precaching-response: bad-precaching-response :: [{"url":"https://myapp.vercel.app/_error","status":404}]在 vercel 中部署我的应用程序时，我的 next-pwa 应用程序和服务工作者无法正常工作，尽管它在 localhost 中运行良好，没有错误。我在这里遵循了基本用法https://www.npmjs.com/package/next-pwa，但我使用 firebase-messaging-sw.js 来使用 cloud-messaging 以及 sw.js(service worker) 来进行 pwa。目前我也没有上面错误中提到的_error.js。我认为这些事情可能会影响错误，但到目前为止我还没有任何线索。实际上，我曾经将 _error.js 添加到我的项目中，但它没有做出任何改变......有人可以帮忙解决这个问题吗？先感谢您！

根目录下的 next.config.js

公共目录中的 manifest.json（图标在公共目录下的图标目录中）

_document.js

包.json

我有一个 Next.js 应用程序，next-pwa用于离线模式。现在我想添加推送通知（OneSignal 解决方案），我看过很多文章/教程，它们都需要创建/更新服务工作者。

所以我的问题是：我怎么能做到这一点，因为服务工作者是由生成的，next-pwa而且它似乎不可编辑，因为它被缩小了。

问题：

Next JS 动态导入在移动设备浏览器上加载时卡住了（使用的浏览器：IOS 上的 Google Chrome 和 Safari。）而它在桌面上的 Google Chrome 和 Mozilla 上运行良好。我也在默认配置上使用 next-PWA。会不会是因为 next-PWA？

代码片段：

在移动设备上输出

桌面浏览器上的输出

我看过很多关于让弹出横幅在 PWA 上工作的教程。我正在使用next-pwa，我的问题是我对在哪里添加弹出横幅的代码感到困惑。抱歉，如果这看起来微不足道，但我对此并不陌生。我还认为 next-pwa 默认会这样做（这里可能非常错误）？

我的项目结构如下：

我的清单文件在下面，我还通过了 Lighthouse 审核中的所有检查，并且可安装对我来说是绿色的