Обмен сообщениями firebase в облаке дает неверный код ответа HTTP (404) после нажатия «разрешить» и добавления сервис-воркера вручную не работает - PullRequest
Новая
       40

Обмен сообщениями firebase в облаке дает неверный код ответа HTTP (404) после нажатия «разрешить» и добавления сервис-воркера вручную не работает

0 голосов
/ 01 августа 2020

Я работаю над приложением React и пытаюсь добавить FCM в проект. Сначала я протестировал FCM на простом (не React) проекте с простым индексом. html, и все работало нормально, но теперь добавить его в приложение React для меня немного проблематично c.

Итак вот проблема:

Я создал простую initializeFirebase функцию и заставил ее вызываться в index.js приложения. Вот функция: 

import firebase from 'firebase';
const firebaseConfig = {
     ... // FCM configs
  };
  
  export const initializeFirebase = () => {

    firebase.initializeApp(firebaseConfig);
    const messaging = firebase.messaging();
    messaging.requestPermission().then(function() {
       return messaging.getToken();
    }).then(function(token) {
       console.log(token);
    }).catch(function() {
       console.log('Access Denied!');
    });

Ожидается, что это запросит у пользователя разрешение, а затем запишет token. Но после того, как он спросит, и я нажму «Разрешить», я получаю эту ошибку на консоли. A bad HTTP response code (404) was received when fetching the script. И он переходит в блок catch.

Когда я искал, было упомянуто, что нужно вручную настроить сервис-воркера: 

navigator.serviceWorker.register('./firebase-messaging-sw.js')
    .then((registration) => {        
      // Here ask for permission and get the token
    });

Но помимо A bad HTTP ... я также получаю Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('http://localhost:8081/') with script ('http://localhost:8081/firebase-messaging-sw.js'): A bad HTTP response code (404) was received when fetching the script.

Я видел, как некоторые люди говорили, что файл SW не загружается или не обнаруживается. Все перепробовал в этом деле. Сначала я поместил файл в каталог root, и этого не произошло с / без настройки SW вручную. Я положил его рядом с файлом, в котором было initializeFirebase, и передал его как './firebase-messaging-sw.js', но никаких изменений. Я просто хочу, чтобы он работал, не имеет значения, устанавливаю ли я сервис-воркера вручную или просто позволяю firebase находить сам файл.

ПРИМЕЧАНИЕ. Файлы SW не загружаются, когда я устанавливаю: http://localhost:8081/firebase-messaging-sw.js или http://localhost:8081/src/firebase-messaging/firebase-messaging-sw.js в браузере. Не знаю, важно это или нет.

Вот также содержимое моего firebase-messaging-sw.js файла: 

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

const firebaseConfig = {
     ... // FCM configs
  };
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function(payload){
  const notif = JSON.parse(payload.data.notification);
  return self.registration.showNotification(notif.title, {...notif});
});

Я был бы очень признателен за вашу помощь

1 Ответ

0 голосов
/ 01 августа 2020

Ну, это была моя довольно глупая ошибка, и, как я ожидал, это была проблема неправильной загрузки файла SW. Путь был неверным.

Если вы здесь и столкнулись с подобной проблемой, обязательно поместите файл sw в папку publi c, чтобы http://localhost:8081/firebase-messaging-sw.js загружался в вашем браузере, а затем в других частях было бы хорошо.

Я нашел этот учебник весьма полезным для всего процесса добавления FCM в ваше приложение React. Выполните его инструкции шаг за шагом, и вы готовы go.

...