无法使用 Webpack 注册自定义 Firebase FCM Service Worker

如何解决无法使用 Webpack 注册自定义 Firebase FCM Service Worker

用户可以在任何地方安装我们的软件，我们不能保证一个文件会存在于域的根目录中。为了解决这个问题，我为 FCM 注册了一个自定义服务工作者，一切正常。没有问题。

但是！这仅适用于本地开发机器。在生产服务器上，webpack 将所有内容捆绑到 /dist/ 中，但找不到注册 service worker 的文件。

所以我很好奇如何使下面的代码与 webpack 一起工作。

特别是：

navigator.serviceWorker.register('/public/js/services/firebase-messaging-sw.js') 

以上不适用于 webpack，因为它在服务器上指向一个不存在的文件。完整过程减去下面的一些代码。

    navigator.serviceWorker.register('/public/js/services/firebase-messaging-sw.js')
            .then((registration) => {
                this.messaging.getToken({serviceWorkerRegistration: registration,vapidKey: "CODE_HERE"}).then((currentToken) => {
                    //just some code here,removed to keep example smaller
                    }
                }).catch((err) => {
                    //just some code here,removed to keep example smaller
                });
            });

解决方法

你能试试这个吗？

var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin');
...
plugins: [
  new ServiceWorkerWepbackPlugin({
    entry: path.join(__dirname,'path/of/your_service_worker_file.js'),}),],...

注意：我不确定路径值

还必须在主线程中注册：

import runtime from 'serviceworker-webpack-plugin/runtime';

if ('serviceWorker' in navigator) {
  const registration = runtime.register();
}