在文件夹中部署Angular Firebase服务工作者

Question

我使用Firebase向我的Angular应用发送推送通知。

我按照这个教程进行操作：

https://medium.com/@a.adendrata/push-notifications-with-angular-6-firebase-cloud-massaging-dbfb5fbc0eeb

当我在本地主机上尝试时，一切正常。

问题出现在我部署它时，因为我将其部署在一个文件夹中，但服务工作者仍在根目录中搜索，然后找不到。

我使用以下命令进行部署：

ng build --prod --base-href /myfolder/

然后服务工作者位于：

https://mydomian.com/myfolder/firebase-messaging-sw.js

但是应用程序仍然在其中搜索。

https://mydomian.com/firebase-messaging-sw.js

我该如何说在我的文件夹中搜索它？

我在这里看到一些类似的问题：

https://groups.google.com/forum/?hl=es-419#!searchin/firebase-talk/firebase$20deploy$20in$20folder|sort:date/firebase-talk/1QKGP1lYj_A/k9hjXolECAAJ

但是我没有这个firebase.json文件...我猜应该是因为这是一个Angular应用程序。

希望有人能帮助我。

提前感谢。

- Ulises 2010

---

你找到任何解决方案了吗？ - rajhim

Answer 1

创建临时脚本。（replacefile.js）

构建 Angular 生产文件时：

ng build --prod && node ./replacefile.js

const replace = require('replace-in-file');
const options = {
  files: 'dist/enlink/*.js',
  from: "register(\"/firebase-messaging-sw.js\",{scope:\"/firebase-cloud-messaging-push-scope\"})",
  to: "register(\"firebase-messaging-sw.js\",{scope:\"firebase-cloud-messaging-push-scope\"})",
  allowEmptyPaths: false,
};

try {
  replace.sync(options);
  console.log('Firebase service worker path fixed!');
} catch (error) {
  console.error('Error occurred:', error);
}

替换路径'/' -> ''就可以了。

- rajhim

Answer 2

我有一个类似的问题，我通过在构建应用程序后，在一个名字类似于“4.a514e2ef0845553d68e7.js”的文件中搜索以下代码来解决它：

navigator.serviceWorker.register("/firebase-messaging-sw.js", {scope: "/firebase-cloud-messaging-push-scope"})

使用绝对路径

并更改为

navigator.serviceWorker.register("firebase-messaging-sw.js", {scope: "firebase-cloud-messaging-push-scope"})

- Juan Medina

---

非常感谢@Juan Medina，它起作用了...但我希望有人能告诉我们如何在不手动更改的情况下部署它？ - Ulises 2010

有没有不改变绝对路径的解决方案？ - rajhim