如何使用next-pwa添加推送通知

Question

我有一个 Next.js 应用程序，我使用

next-pwa

作为离线模式。现在我想添加推送通知（OneSignal 解决方案），我看过很多文章/教程，它们都需要创建/更新 Service Worker。

所以我的问题是：我该怎么做，因为服务工作者是由

next-pwa

生成的，而且它似乎不可编辑，因为它被缩小了。

Answer 1

您可以查看

next-pwa

GitHub 存储库中的示例。

有一个添加自定义worker的例子： https://github.com/shadowwalker/next-pwa/tree/master/examples/custom-worker

还有另一个关于网络推送的例子： https://github.com/shadowwalker/next-pwa/tree/master/examples/web-push

希望这几个链接对您有帮助！

Answer 2

步骤：

1. 转到 https://github.com/shadowwalker/next-pwa/tree/master/examples/web-push 并克隆它。
2. 使用

   npm i web-push

   安装 web-push 并使用

   npx web-push generate-vapid-keys

获取 VAPID 密钥
3. 在

   .env

   目录的根目录下创建

   web-push

   文件
4. 粘贴第 2 步中生成的密钥，并将您的电子邮件添加到 .env 文件中
5. 最后，运行

   npm run build

   和

   npm start

   这对我有用