在Vue CLI项目中初始化Firebase和ServiceWorkert时，移动设备上的网页为空白

Question

(我是VueJS和Firebase的新手(

你好！我的项目有一个非常奇怪的问题。我一直在尝试将FCM(Firebase Cloud Messaging(添加到我的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");

但是，当我试图通过安卓的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。

好吧，所以……显然我完全忘记了，服务人员通过HTTPS只工作。以前我在我的电脑上测试FCM，我给添加了一个异常

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

但我没有在智能手机上这样做，这就是为什么它不起作用。