The script resource is behind a redirect, which is disallowed

Question

I'm implementing firebase messaging but i'm getting a error on console in chrome.

The script resource is behind a redirect, which is disallowed. /firebase-messaging-sw.js Failed to load resource: net::ERR_UNSAFE_REDIRECT

The file /firebase-messaging-sw.js is in public folder and i'm using FCM installation like this https://github.com/firebase/quickstart-js/tree/master/messaging

But the link the authorization is a link like https://09029e3f.ngrok.io/admin/pt/settings/notifications. but the main web site is on main.domain.com

Solution 1

Firebase answer and its working

The service worker script (firebase-messaging-sw.js) is expected to be on the absolute path of the application by default. Using the quickstart project, the location will be http://localhost:5000/firebase-messaging-sw.js.

Since you're using a different server for the static files storage, the service worker script location might not be the same or in place. With this, we need to update the service worker registration code implementation and call the service worker script from a different location.

Find the static location of the service worker script. In my case, it is http://localhost:5000/sw/firebase-messaging.sw.js, since I moved the service worker script location inside the sw folder. To verify that it is accessible, try to input the url in the browser address bar and the service worker script code should be displayed. Download the firebase.js script locally from https://www.gstatic.com/firebasejs//firebase.js and call it /firebase.js"> on the web pages that need to show a notification.

Update the firebase-messaging.js script. Find the keywords firebase-messaging-sw.js and , then add the path as prefix. In my case, it is http://localhost:5000/sw/firebase-messaging-sw.js and http://localhost:5000/sw/firebase-cloud-messaging-push-scope.

Many thanks firebase

Solution 2

You can fix that by loading firebase-messaging-sw.js manually using service worker.
Suppose you have 2 files: index.html and firebase-message-sw.js. They are on the same location.

1.In the index.html, you load firebase.js and initialize your firebase app:

<script src="https://www.gstatic.com/firebasejs/4.3.1/firebase.js"></script>
<script>
  var var config = {
        apiKey: YOUR_API_KEY,
        messagingSenderId: YOUR_SENDER_ID
    };
    firebase.initializeApp(config);
    navigator.serviceWorker.register('/firebase-messaging-sw.js')
      .then(function (registration) {
          messaging = firebase.messaging();

         //request permission for Push Message.
          messaging.requestPermission().then(function () {
              console.log('grant');

              messaging.getToken().then(function (currentToken) {
                 console.log('current token', currentToken);
            });
          }).catch(function(error) {
               console.log('Push Message is disallowed');
          })
      })
</script>

2. Implement firebase-messaing-sw.js

importScripts('https://www.gstatic.com/firebasejs/4.3.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/4.3.1/firebase-messaging.js');
var config = {
    messagingSenderId: YOUR_SENDER_ID
};
firebase.initializeApp(config);
const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(function (payload) {
    console.log('[firebase-messaging-sw.js] Received background message ', payload);
    // Customize notification here
    const notificationTitle = 'Background Message Title';
    const notificationOptions = {
        body: 'Background Message body.',
        icon: '/firebase-logo.png'
    };

    return self.registration.showNotification(notificationTitle,
        notificationOptions);
});

Done!