Search code examples
javascriptwebpush-notificationdjango-push-notifications

How to implement web client with django-push-notifications?

I have successfully implement APNS using django-push-notifications. And I have found that this dependency is growing up and has a Web Push Notifications as well. I had tried followed up the given code, but unable to see a registation_id. I got 

Uncaught (in promise) DOMException` 
index.html?_ijt=f2lo8aqelnrfm7g1266vtapp67:1

I put chrome an argument to loadVersionBrowser() to avoid error

Uncaught TypeError: Cannot read property 'match' of undefined

Here is my current file

<html>
<script>
// Utils functions:
function urlBase64ToUint8Array (base64String) {
        var padding = '='.repeat((4 - base64String.length % 4) % 4)
        var base64 = (base64String + padding)
                .replace(/\-/g, '+')
                .replace(/_/g, '/')

        var rawData = window.atob(base64)
        var outputArray = new Uint8Array(rawData.length)

        for (var i = 0; i < rawData.length; ++i) {
                outputArray[i] = rawData.charCodeAt(i)
        }
        return outputArray;
}
function loadVersionBrowser (userAgent) {
        var ua = userAgent, tem, M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
        if (/trident/i.test(M[1])) {
                tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
                return {name: 'IE', version: (tem[1] || '')};
        }
        if (M[1] === 'Chrome') {
                tem = ua.match(/\bOPR\/(\d+)/);
                if (tem != null) {
                        return {name: 'Opera', version: tem[1]};
                }
        }
        M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
        if ((tem = ua.match(/version\/(\d+)/i)) != null) {
                M.splice(1, 1, tem[1]);
        }
        return {
                name: M[0],
                version: M[1]
        };
};
var applicationServerKey = "BHZZKYSonkdaKjxjgw7DKYO45PmetHY7jprxWn4K4gfZSxUuvyQRe1LegYKoKJzv8qhi5HiIO4wjn6SP9Gg1ftk";
// In your ready listener
if ('serviceWorker' in navigator) {
  // The service worker has to store in the root of the app
  // http://stackoverflow.com/questions/29874068/navigator-serviceworker-is-never-ready
  var browser = loadVersionBrowser('chrome');
  navigator.serviceWorker.register('navigatorPush.service.js?version=1.0.0').then(function (reg) {
    reg.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: urlBase64ToUint8Array(applicationServerKey)
    }).then(function (sub) {
      var endpointParts = sub.endpoint.split('/');
      var registration_id = endpointParts[endpointParts.length - 1];
      var data = {
        'browser': browser.name.toUpperCase(),
        'p256dh': btoa(String.fromCharCode.apply(null, new Uint8Array(sub.getKey('p256dh')))),
        'auth': btoa(String.fromCharCode.apply(null, new Uint8Array(sub.getKey('auth')))),
        'name': 'XXXXX',
        'registration_id': registration_id
      };
      console.log(data);
    })
  }).catch(function (err) {
    console.log(':^(', err);
  });
}
</script>
Hello
</html>

Questions:
1. Where am I wrong?
2. Is Web Push Notification Gateway make use of FCM by default?

Solution

  • This line: 

    var ua = userAgent, tem, M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];

    is very strange. Consider transforming it into something like:

    var ua = userAgent;
var tem;
var M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];

    You can't use a variable in the same statement that declares it.

    As for the second question, web push notifications will (I think) use firebase for chrome, and whatever other provider is relavent for other browsers. This is handled by the django-push-notifications module, you don't have to worry about it.