How to request notification permission again on web through flutter

Question

I have integrated notifications for flutter web, its working fine when i give permission for the first time, but lets say user has denied it so is there any way to request notifications permission again to get token in dart files from javascript files ?

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

 var firebaseConfig = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
  };


firebase.initializeApp(firebaseConfig);


const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(function(payload) {
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: 'favicon.png'
  };

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

Solution 1

You can follow a similar permission call posted as an Answer in this post. For your use case, you'll need to use push permission since Firebase Cloud Messaging for web needs Push API support as mentioned in the official docs

Use dart:html package for the permission requests using Web API. Import the dart:html package, and set a prefix. In this sample, we used 'html'

import 'dart:html' as html;

Create a helper method to check for push permissions.

checkPushPermission() async {
    var pushPermission = await html.window.navigator.permissions.query({"name": "push"});
    print('push permission: ${pushPermission.state}')
}

Call checkPushPermission() to verify the current push permission state, and it should display the relevant permission dialog.

checkPushPermission();

Be reminded that FlutterFire Cloud Messaging is yet to be fully supported for Web, and there could be quirks in its current state. Also, be aware of Web API's browser compatibility.

Solution 2

I did not test it myself but it seems you should call the browser "requestPermission" API:

https://developer.mozilla.org/en-US/docs/Web/API/Notification/requestPermission

https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API

For Flutter I have seen there is this call in "dart:html" package:

https://api.flutter.dev/flutter/dart-html/Notification/requestPermission.html

Comments

[Omatt]

Firebase Cloud Messaging for web uses Push API support as mentioned in the docs.