title: Messaging: The notification permission was not granted and blocked instead
body: <p>Firebase messaging error in https server.</p>
  
  <p><code>An error occurred while retrieving token.  FirebaseError: Messaging: The notification permission was not granted and blocked instead. (messaging/permission-blocked).</code></p>
  
  <p>What should I do to get my token? 
  On localhost, it's working.</p>
  
  <p>Here is my code:</p>
  
  <p><code>firebase-messaging-sw.js</code></p>
  
  <pre><code>// Import and configure the Firebase SDK
  // These scripts are made available when the app is served or deployed on Firebase Hosting
  // If you do not serve/host your project using Firebase Hosting see https://firebase.google.com/docs/web/setup
  importScripts("https://www.gstatic.com/firebasejs/7.8.1/firebase-app.js")
  importScripts("https://www.gstatic.com/firebasejs/7.8.1/firebase-messaging.js")
  
  
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: apiKey,
    authDomain: authDomain,
    databaseURL: databaseURL,
    projectId: projectId,
    storageBucket: storageBucket,
    messagingSenderId: messagingSenderId,
    appId: appId,
    measurementId: measurementId
  };
  
  
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  
  const messaging = firebase.messaging();
  /**
   * Here is is the code snippet to initialize Firebase Messaging in the Service
   * Worker when your app is not hosted on Firebase Hosting.
   // [START initialize_firebase_in_sw]
   // Give the service worker access to Firebase Messaging.
   // Note that you can only use Firebase Messaging here, other Firebase libraries
   // are not available in the service worker.
   importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-app.js');
   importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js');
   // Initialize the Firebase app in the service worker by passing in the
   // messagingSenderId.
   firebase.initializeApp({
     'messagingSenderId': 'YOUR-SENDER-ID'
   });
   // Retrieve an instance of Firebase Messaging so that it can handle background
   // messages.
   const messaging = firebase.messaging();
   // [END initialize_firebase_in_sw]
   **/
  
  // If you would like to customize notifications that are received in the
  // background (Web app is closed or not in browser focus) then you should
  // implement this optional method.
  // [START background_handler]
  
  // [END background_handler]
  
  messaging.setBackgroundMessageHandler(function(payload) {
    console.log('[firebase-messaging-sw.js] Received background message ', payload);
    // Customize notification here
    var notificationTitle = 'Background Message Title';
    var notificationOptions = {
      body: 'Background Message body.',
      icon: '/firebase-logo.png'
    };
  
    return self.registration.showNotification(notificationTitle,
      notificationOptions);
  });
  </code></pre>
  
  <p><code>footer.blade.php</code>
  in //script// section:</p>
  
  <pre><code>  // Your web app's Firebase configuration
    var firebaseConfig = {
       apiKey: apiKey,
    authDomain: authDomain,
    databaseURL: databaseURL,
    projectId: projectId,
    storageBucket: storageBucket,
    messagingSenderId: messagingSenderId,
    appId: appId,
    measurementId: measurementId
    };
  
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
  
    const tokenDivId = 'token_div';
    const permissionDivId = 'permission_div';
  
    const messaging = firebase.messaging();
  
    messaging.usePublicVapidKey('BKotWNDl7JOuYb-UeusSlSl47onAFH9sWJ_M1WDivsjWq0AZWah5LjVfBAxbcS8T8Yo10HEw_xPX68kMnzTQC2k');
  
    // Get Instance ID token. Initially this makes a network call, once retrieved
    // subsequent calls to getToken will return from cache.
    messaging.getToken().then((currentToken) =&gt; {
      if (currentToken) {
  
        sendTokenToServer(currentToken);
        updateUIForPushEnabled(currentToken);
      } else {
        // Show permission request.
        console.log('No Instance ID token available. Request permission to generate one.');
        // Show permission UI.
        updateUIForPushPermissionRequired();
        setTokenSentToServer(false);
      }
    }).catch((err) =&gt; {
      console.log('An error occurred while retrieving token. ', err);
      showToken('Error retrieving Instance ID token. ', err);
      setTokenSentToServer(false);
    });
  
    // Callback fired if Instance ID token is updated.
    messaging.onTokenRefresh(() =&gt; {
      messaging.getToken().then((refreshedToken) =&gt; {
        console.log('Token refreshed.');
        // Indicate that the new Instance ID token has not yet been sent to the
        // app server.
        setTokenSentToServer(false);
        // Send Instance ID token to app server.
        sendTokenToServer(refreshedToken);
        // ...
      }).catch((err) =&gt; {
        console.log('Unable to retrieve refreshed token ', err);
        showToken('Unable to retrieve refreshed token ', err);
      });
    });
  
    function resetUI() {
      clearMessages();
      showToken('loading...');
      // [START get_token]
      // Get Instance ID token. Initially this makes a network call, once retrieved
      // subsequent calls to getToken will return from cache.
      messaging.getToken().then(function(currentToken) {
        if (currentToken) {
          sendTokenToServer(currentToken);
          updateUIForPushEnabled(currentToken);
        } else {
          // Show permission request.
          console.log('No Instance ID token available. Request permission to generate one.');
          // Show permission UI.
          updateUIForPushPermissionRequired();
          setTokenSentToServer(false);
        }
      }).catch(function(err) {
        console.log('An error occurred while retrieving token. ', err);
        showToken('Error retrieving Instance ID token. ', err);
        setTokenSentToServer(false);
      });
      // [END get_token]
  
  
    }
  
  
    function showToken(currentToken) {
      // Show token in console and UI.
      var tokenElement = document.querySelector('#token');
      tokenElement.textContent = currentToken;
    }
  
    // Send the Instance ID token your application server, so that it can:
    // - send messages back to this app
    // - subscribe/unsubscribe the token from topics
    function sendTokenToServer(currentToken) {
      if (!isTokenSentToServer()) {
        console.log('Sending token to server...');
        // TODO(developer): Send the current token to your server.
        setTokenSentToServer(true);
      } else {
        console.log('Token already sent to server so won\'t send it again ' +
            'unless it changes');
      }
  
    }
  
    function isTokenSentToServer() {
      return window.localStorage.getItem('sentToServer') === '1';
    }
  
    function setTokenSentToServer(sent) {
      window.localStorage.setItem('sentToServer', sent ? '1' : '0');
    }
  
    function showHideDiv(divId, show) {
      const div = document.querySelector('#' + divId);
    }
  
    function requestPermission() {
      console.log('Requesting permission...');
      // [START request_permission]
      messaging.requestPermission().then(function() {
        console.log('Notification permission granted.');
        // TODO(developer): Retrieve an Instance ID token for use with FCM.
        // [START_EXCLUDE]
        // In many cases once an app has been granted notification permission, it
        // should update its UI reflecting this.
        resetUI();
        // [END_EXCLUDE]
      }).catch(function(err) {
        console.log('Unable to get permission to notify.', err);
      });
      // [END request_permission]
    }
  
    function deleteToken() {
      // Delete Instance ID token.
      // [START delete_token]
      messaging.getToken().then(function(currentToken) {
        messaging.deleteToken(currentToken).then(function() {
          console.log('Token deleted.');
          setTokenSentToServer(false);
          // [START_EXCLUDE]
          // Once token is deleted update UI.
          resetUI();
          // [END_EXCLUDE]
        }).catch(function(err) {
          console.log('Unable to delete token. ', err);
        });
        // [END delete_token]
      }).catch(function(err) {
        console.log('Error retrieving Instance ID token. ', err);
        showToken('Error retrieving Instance ID token. ', err);
      });
  
    }
  
    // Add a message to the messages element.
    function appendMessage(payload) {
      const messagesElement = document.querySelector('#messages');
      const dataHeaderELement = document.createElement('h5');
      const dataElement = document.createElement('pre');
      dataElement.style = 'overflow-x:hidden;';
      dataHeaderELement.textContent = 'Received message:';
      dataElement.textContent = JSON.stringify(payload, null, 2);
      messagesElement.appendChild(dataHeaderELement);
      messagesElement.appendChild(dataElement);
    }
  
    // Clear the messages element of all children.
    function clearMessages() {
      const messagesElement = document.querySelector('#messages');
      while (messagesElement.hasChildNodes()) {
        messagesElement.removeChild(messagesElement.lastChild);
      }
    }
  
    function updateUIForPushEnabled(currentToken) {
      showHideDiv(tokenDivId, true);
      showHideDiv(permissionDivId, false);
      showToken(currentToken);
    }
  
    function updateUIForPushPermissionRequired() {
      showHideDiv(tokenDivId, false);
      showHideDiv(permissionDivId, true);
    }
  </code></pre>