Веб-страница на мобильном устройстве пуста, когда Firebase и ServiceWorkert инициализируются в проекте Vue CLI - PullRequest
Новая
       70

Веб-страница на мобильном устройстве пуста, когда Firebase и ServiceWorkert инициализируются в проекте Vue CLI

0 голосов
/ 03 апреля 2020

(я новичок в VueJS и Firebase)

Привет! У меня очень странная проблема с моим проектом. Я пытался добавить FCM (Firebase Cloud Messaging) в мой Vue CLI-проект.

Это код моего main.js, который прекрасно работает в моем браузере P C 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 Android, он показывает мне только пустую страницу, когда загружается только значок.

(я использую команду npm run serve для запуска локальной подачи, к которой я подключаюсь на своем P C и моем смартфоне.)

Но , когда я закомментирую, следующие части: 

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)
})

веб-страница на моем смартфоне загружает пользовательский интерфейс без каких-либо проблем.

Что я делаю не так и как я могу это исправить?

PS: это мой 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();

1 Ответ

0 голосов
/ 06 апреля 2020

TL; DR: убедитесь, что вы работаете с HTTPS , когда работаете с сервисными работниками.

Хорошо, так что ... очевидно, я совершенно забыл, что сервисные работники ТОЛЬКО через HTTPS. Ранее я тестировал FCM на своем P C и добавил исключение к

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

, но я не делал этого на своем смартфоне, и поэтому он не стал т работа.

...