Firebase Cloud Messaging without hosting (Web/JavaScript)

Question

When working through the official video tutorial for Firebase Cloud Messaging, I am not able to get a messaging token without hosting the application.

Here is my app.js file:

/* global firebase */

// Initialize Firebase
var config = {
  apiKey: 'AIzaSyBYfb9HAi_oE-PKqFNkRQcxAgLU-nm8sIE',
  authDomain: 'web-quickstart-c0309.firebaseapp.com',
  databaseURL: 'https://web-quickstart-c0309.firebaseio.com',
  projectId: 'web-quickstart-c0309',
  storageBucket: 'web-quickstart-c0309.appspot.com',
  messagingSenderId: '713880824056'
}
firebase.initializeApp(config)

const messaging = firebase.messaging()
messaging.requestPermission()
  .then(() => {
    console.log('Permission granted.')
    return messaging.getToken()
      .then(token => {
        console.log('messaging token test:', token)
        return token
      })
      .catch(error => {
        console.log('messaging error:', error)
      })
  })
  .then(token => {
    console.log('permission token test:', token)
  })
  .catch(error => {
    console.log('permission error:', error)
  })

I have a firebase-messaging-sw.js file in my root directory.

When I load the index.html file directly in my browser and accept the dialog, I receive an undefined value for the token. The full console output is:

16:20:35.744 app.js:17 Permission granted.
16:20:35.750 app.js:20 messaging token test: null
16:20:35.751 app.js:28 permission token test: null

If I host the application by editing the firebase.json file to read:

{
  "hosting": {
    "public": "./"
  }
}

And then run firebase serve -p 8081 , open http://localhost:8081 , and accept the dialog, I do receive a token. The full output is:

16:23:42.902 app.js:17 Permission granted.
16:23:43.059 app.js:20 messaging token test: eyd1EaFwULQ:APA91bGUZr9fAGcCaYVtXTPjk55AmpWLNdaqGapMa1S1GWTYeJwtJraEKuhAPpSM-v-2xPaSJQgTKRVosTN-0KRPHCccjdRZNDkegtW2HMC_mSbdap9h5TeH7KKQSbN4QrjVmIl7VZlu
16:23:43.060 app.js:28 permission token test: eyd1EaFwULQ:APA91bGUZr9fAGcCaYVtXTPjk55AmpWLNdaqGapMa1S1GWTYeJwtJraEKuhAPpSM-v-2xPaSJQgTKRVosTN-0KRPHCccjdRZNDkegtW2HMC_mSbdap9h5TeH7KKQSbN4QrjVmIl7VZlu

Is this a documented constraint? Is there a way to receive a token without hosting the application?

Answer 1

FCM work only in pages served by https protocol

as in the document

The FCM SDK is supported only in pages served over HTTPS. This is due to its use of service workers, which are available only on HTTPS sites. Need a provider? Firebase Hosting is an easy way to get free HTTPS hosting on your own domain.

and if you wonder why localhost work that because pages in localhost work just like they served by https

so Is there a way to receive a token without hosting the application?

The answer is No your page should be served by https protocol

Answer 2

I wouldn't say this is the exact alternative but an alternative solution to the problem , you can use the ngrok , which will provide you with the Https access for alternative way of representing the localhost .

So after installing use whatever URL it outputs on the terminal from ngrok in the FCM.

Note : ngrok outputs both http and https URLs, so use Only Https . They still map to your local server.