CODEWITHSUNDEEP
firebaseflutterfirebase-cloud-messagingflutter-dependenciesflutter-web
hiashutoshsingh
hiashutoshsingh

Reputation: 1020

How to request notification permission again on web through flutter

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);
});

Upvotes: 4

Views: 5697

Answers (2)

Omatt
Omatt

Reputation: 10463

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.

Upvotes: 2

camillo777
camillo777

Reputation: 2367

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

Upvotes: 1

Related Questions