Vue CLI项目中初始化Firebase和ServiceWorkert时手机端页面空白

Question

（我是 VueJS 和 Firebase 的新手）

您好！我的项目有一个非常奇怪的问题。我一直在尝试将 FCM（Firebase 云消息传递）添加到我的 Vue CLI 项目中。

这是我的 main.js 的代码，在我的 PC chrome 浏览器中完全可以正常工作：

import Vue from "vue";
import "./plugins/axios";
import App from "./App.vue";
import vuetify from "./plugins/vuetify";
import router from "./router";
import firebase from "firebase/app";
import 'firebase/messaging'

firebase.initializeApp({"...Firebase config here..."});

let messaging = firebase.messaging(); 
export { messaging };


export default Vue.use(vuetify, {});
Vue.prototype.$messaging = messaging;
Vue.config.productionTip = false;

navigator.serviceWorker.register('./firebase-messaging-sw.js')
  .then((registration) => {
    Vue.prototype.$messaging.useServiceWorker(registration)
  })
  .catch(err => {
    console.log("Service worker registration error at main.js:", err)
  })

new Vue({
  vuetify,
  router,
  render: h => h(App)
}).$mount("#app");

但是，当我尝试通过 Android 的 Chrom 浏览器在我的智能手机上打开该网站时，它只显示一个空白页面，如果只加载了网站图标。

（我使用 npm run serve 命令运行本地服务器，我在 PC 和智能手机上连接到它。）

但是，当我注释掉的时候，下面的部分：

let messaging = firebase.messaging();

并且

navigator.serviceWorker.register('./firebase-messaging-sw.js')
.then((registration) => {
 Vue.prototype.$messaging.useServiceWorker(registration)
 })
 .catch(err => {
  console.log("Service worker registration error at main.js:", err)
})

我智能手机上的网页加载 UI 没有任何其他问题。

我做错了什么，我该如何解决？

P.S：这是我的firebase-messaging-sw.js文件，（位于我项目的public目录下）如果需要的话：

importScripts("https://www.gstatic.com/firebasejs/6.3.4/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/6.3.4/firebase-messaging.js");

firebase.initializeApp({ messagingSenderId: "MY_MSGING_SENDER_ID" });

const messaging = firebase.messaging();

Answer 1

TL;DR：确保在使用 Service-Workers 时运行超过 HTTPS。

好的，所以...显然我完全忘记了，service-workers ONLY 通过 HTTPS 工作。之前我在我的PC上测试FCM，我添加了一个例外

chrome://flags/#unsafely-treat-insecure-origin-as-secure

但我没有在我的智能手机上这样做，这就是它不起作用的原因。

Vue CLI项目中初始化Firebase和ServiceWorkert时手机端页面空白

The webpage on mobile is blank when Firebase and ServiceWorkert are initialized in a Vue CLI project

firebase

vue.js

firebase-cloud-messaging

service-worker

mobile-chrome