I want to integrate push notifications in flutter. My web whole code is as:
my index.html code is as:
<html>
<title>Firebase Messaging Demo</title>
<style>
div {
margin-bottom: 15px;
}
</style>
<body>
<div id="token"></div>
<div id="msg"></div>
<div id="notis"></div>
<div id="err"></div>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.4.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.16.1/firebase-messaging.js"></script>
<script>
MsgElem = document.getElementById('msg');
TokenElem = document.getElementById('token');
NotisElem = document.getElementById('notis');
ErrElem = document.getElementById('err');
// TODO: Replace firebaseConfig you get from Firebase Console
var firebaseConfig = {
// apiKey: ...
// projectId: ...
// messagingSenderId: ...
// appId: ...
// ...other configs...
};
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();
messaging
.requestPermission()
.then(function () {
MsgElem.innerHTML = 'Notification permission granted.';
console.log('Notification permission granted.');
// get the token in the form of promise
return messaging.getToken();
})
.then(function (token) {
TokenElem.innerHTML = 'Device token is : <br>' + token;
})
.catch(function (err) {
ErrElem.innerHTML = ErrElem.innerHTML + '; ' + err;
console.log('Unable to get permission to notify.', err);
});
let enableForegroundNotification = true;
messaging.onMessage(function (payload) {
console.log('Message received. ', payload);
NotisElem.innerHTML =
NotisElem.innerHTML + JSON.stringify(payload);
if (enableForegroundNotification) {
let notification = payload.notification;
navigator.serviceWorker
.getRegistrations()
.then((registration) => {
registration[0].showNotification(notification.title);
});
}
});
</script>
</body>
and my firebase-messaging-sw.js code is as:
importScripts("https://www.gstatic.com/firebasejs/7.16.1/firebase-app.js");
importScripts(
"https://www.gstatic.com/firebasejs/7.16.1/firebase-messaging.js",
);
// For an optimal experience using Cloud Messaging, also add the Firebase SDK for Analytics.
importScripts(
"https://www.gstatic.com/firebasejs/7.16.1/firebase-analytics.js",
);
// Initialize the Firebase app in the service worker by passing in the
// messagingSenderId.
firebase.initializeApp({
messagingSenderId: "YOUR-SENDER-ID",
apiKey: "YOUR_API_KEY",
projectId: "YOUR_PROJECT_ID",
appId: "YOUR_APP_ID",
});
// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
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: "/itwonders-web-logo.png",
};
return self.registration.showNotification(
notificationTitle,
notificationOptions,
);
});
This whole code is working correct and but my dart screens not showing. And if I try to run my man.dart file then notifications donot work, only main.dart works. Please give some suggestion or idea that how can I made them both to work.
