Vue CLI项目中初始化Firebase和ServiceWorkert时手机端页面空白
The webpage on mobile is blank when Firebase and ServiceWorkert are initialized in a Vue CLI project
(我是 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();
TL;DR:确保在使用 Service-Workers 时 运行 超过 HTTPS。
好的,所以...显然我完全忘记了,service-workers ONLY 通过 HTTPS 工作。
之前我在我的PC上测试FCM,我添加了一个例外
chrome://flags/#unsafely-treat-insecure-origin-as-secure
但我没有在我的智能手机上这样做,这就是它不起作用的原因。
(我是 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();
TL;DR:确保在使用 Service-Workers 时 运行 超过 HTTPS。
好的,所以...显然我完全忘记了,service-workers ONLY 通过 HTTPS 工作。 之前我在我的PC上测试FCM,我添加了一个例外
chrome://flags/#unsafely-treat-insecure-origin-as-secure
但我没有在我的智能手机上这样做,这就是它不起作用的原因。