Magento Asked by Usama Sohail on January 15, 2021
I am trying to add add web push notification using firebase in my magento2 app. I tested it on a simple web application using following code.
<html>
<title>Firebase Messaging Demo</title>
<style>
div {
margin-bottom: 15px;
}
</style>
<body>
<!-- <form method="post" action="send.php">
<input type="submit" name="submit">
</form> -->
<div id="msg"></div>
<div id="token" ></div>
<div id="notis"></div>
<div id="err"></div>
<script src="https://www.gstatic.com/firebasejs/7.16.1/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");
// Initialize Firebase
// TODO: Replace with your project's customized code snippet
var config = {
"apiKey": "xyz",
"authDomain": "xyz",
"projectId": "xyz",
"storageBucket": "xyz",
"messagingSenderId": "xyz",
"appId": "xyz",
"measurementId": "xyz"
};
firebase.initializeApp(config);
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 =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) {
const {title, ...options} = JSON.parse(payload.data.notification);
navigator.serviceWorker.getRegistrations().then(registration => {
registration[0].showNotification(title, options);
});
}
});
</script>
</body>
</html>
Then I am able to send web push notification using curl command.But when I try to to do the same in magento2 it gives errors and does not let JS cdn’s to be added in my module.I am doing this using require-js.My requirejs-config.js file looks like this.
var config = {
paths: {
"*": {
"firebaseapp": "https://www.gstatic.com/firebasejs/7.16.1/firebase-app.js",
"firebasemessaging": "https://www.gstatic.com/firebasejs/7.16.1/firebase-messaging.js"
}
},
shim: {
'firebaseapp': {
deps: ['jquery']
},
'firebasemessaging': {
deps: ['jquery']
}
}
};
And .phtml file looks like this.
<?php
?>
<label><?= __("Data from Block is ") ?></label>
<h1><?= $block->getText() ?></h1>
<div id="test"></div>
<script>
require([
'jquery',
'firebaseapp',
'firebasemessaging'
], function ($,firebaseapp,firebasemessaging) {
console.log("working");
});
</script>
But it gives following error.
The resource from “http://localhost/magento235/pub/static/version1610370022/frontend/Vendor1/Customtheme/en_US/firebasemessaging.js” was blocked due to MIME type (“text/plain”) mismatch (X-Content-Type-Options: nosniff).
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP