How to add firebase cdn's in magento2?

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).

firebase magento2.3

Add your own answers!

Ask a Question

Get help from others!