Merge branch 'release/1.0.1'

CHANGES.rst

@@ -1,6 +1,10 @@
 CHANGE LOG
 ==========
 
+1.0.1
+-----
+- Added in-app Notification
+
 1.0.0
 -----
 - PWA Foundation

VERSION

@@ -1 +1 @@
-1.0.0
+1.0.1

molo/pwa/templates/fcm.js

@@ -0,0 +1,125 @@
+// Script loader
+function script(url) {
+
+    if(Array.isArray(url)) {
+        var self = this, prom = [];
+        url.forEach(function(item) {
+            prom.push(self.script(item));
+        });
+        return Promise.all(prom);
+    }
+
+    return new Promise(function (resolve, reject) {
+        var r = false,
+            t = document.getElementsByTagName("script")[0],
+            s = document.createElement("script");
+
+        s.type = "text/javascript";
+        s.src = url;
+        s.async = true;
+        s.onload = s.onreadystatechange = function () {
+            if (!r && (!this.readyState || this.readyState == "complete")) {
+                r = true;
+                resolve(this);
+            }
+        };
+        s.onerror = s.onabort = reject;
+        t.parentNode.insertBefore(s, t);
+    });
+
+}
+
+var loadFCM = script(["https://www.gstatic.com/firebasejs/4.1.3/firebase-app.js", "https://www.gstatic.com/firebasejs/4.1.3/firebase-messaging.js", "/toast.min.js"]);
+
+loadFCM.then(function() {
+
+  firebase.initializeApp(fcmConfig);
+
+  // Get X-CSRFToken
+  function parse_cookies() {
+  var cookies = {};
+  if (document.cookie && document.cookie !== '') {
+      document.cookie.split(';').forEach(function (c) {
+          var m = c.trim().match(/(\w+)=(.*)/);
+          if(m !== undefined) {
+              cookies[m[1]] = decodeURIComponent(m[2]);
+          }
+      });
+  }
+  return cookies;
+  }
+
+  var cookies = parse_cookies();
+
+  // Token magic
+  const messaging = firebase.messaging();
+  navigator.serviceWorker.register('/serviceworker.js')
+    .then((registration) => {
+      console.log(registration);
+      messaging.useServiceWorker(registration);
+
+      messaging.onTokenRefresh(function() {
+       messaging.getToken()
+       .then(function(refreshedToken) {
+         setTokenSentToServer(false);
+         sendTokenToServer(refreshedToken);
+       });
+      });
+
+      function sendTokenToServer(currentToken) {
+        if (!isTokenSentToServer()) {
+          fetch('/notification_devices/', {
+            method: "POST",
+            headers: {
+                'Content-Type': 'application/json',
+                'X-CSRFToken': cookies['csrftoken']
+              },
+            body: JSON.stringify({
+              'registration_id': currentToken,
+              'type': 'web',
+            }),
+            credentials: "include",
+          })
+          setTokenSentToServer(true);
+        }
+      }
+
+      function isTokenSentToServer() {
+       return window.localStorage.getItem('sentToServer') == 1;
+      }
+      function setTokenSentToServer(sent) {
+       window.localStorage.setItem('sentToServer', sent ? 1 : 0);
+      }
+
+      function requestPermission() {
+       messaging.requestPermission()
+       .then(function() {
+         messaging.getToken()
+         .then(function(currentToken) {
+           if (currentToken) {
+             sendTokenToServer(currentToken);
+           } else {
+             setTokenSentToServer(false);
+           }
+         })
+         .catch(function(err) {
+           setTokenSentToServer(false);
+         });
+       });
+      }
+
+      requestPermission();
+
+      // In app notification using Toast
+      messaging.onMessage(function(data) {
+        var options = {
+              settings: {
+                duration: 3000
+              }
+        };
+        iqwerty.toast.Toast(data.notification.title + ' - ' + data.notification.body, options);
+      });
+
+    });
+
+});

molo/pwa/templates/molo_pwa.html

@@ -7,105 +7,29 @@
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-title" content="{{ pwa_settings.PWA_NAME }}">
 <meta name="apple-mobile-web-app-status-bar-style" content="default">
+
+{% if request.user.is_authenticated %}
+<script type="text/javascript">
+  var fcmConfig = {
+    apiKey: "{{ pwa_settings.PWA_FCM_API_KEY }}",
+    messagingSenderId: "{{ pwa_settings.PWA_FCM_MSGSENDER_ID }}"
+  };
+</script>
+{% endif %}
+
 <script type="text/javascript">
     if ('serviceWorker' in navigator) {
         window.addEventListener('load', function () {
             navigator.serviceWorker.register('/serviceworker.js').then(function (registration) {
-                console.log('ServiceWorker registration successful with scope: ', registration.scope);
+              {% if request.user.is_authenticated %}
+                js = document.createElement('script');
+                js.src = '/fcm.js';
+                js.async = true;
+                document.querySelector('script').parentNode.appendChild(js);
+              {% endif %}
             }).catch(function (err) {
                 console.log('ServiceWorker registration failed: ', err);
             });
         });
     }
 </script>
-{% if request.user.is_authenticated %}
-  <!-- START FIREBASE INITIALIZATION CODE -->
-  <script src="https://www.gstatic.com/firebasejs/4.1.3/firebase-app.js"></script>
-  <script src="https://www.gstatic.com/firebasejs/4.1.3/firebase-messaging.js"></script>
-  <script type="text/javascript">
-    // Initialize Firebase
-    var config = {
-      apiKey: "{{ pwa_settings.PWA_FCM_API_KEY }}",
-      messagingSenderId: "{{ pwa_settings.PWA_FCM_MSGSENDER_ID }}"
-    };
-    firebase.initializeApp(config);
-
-    // Get X-CSRFToken
-    function parse_cookies() {
-    var cookies = {};
-    if (document.cookie && document.cookie !== '') {
-        document.cookie.split(';').forEach(function (c) {
-            var m = c.trim().match(/(\w+)=(.*)/);
-            if(m !== undefined) {
-                cookies[m[1]] = decodeURIComponent(m[2]);
-            }
-        });
-    }
-    return cookies;
-    }
-
-    var cookies = parse_cookies();
-
-    // Token magic
-    const messaging = firebase.messaging();
-    navigator.serviceWorker.register('/serviceworker.js')
-      .then((registration) => {
-        console.log(registration);
-        messaging.useServiceWorker(registration);
-
-        messaging.onTokenRefresh(function() {
-         messaging.getToken()
-         .then(function(refreshedToken) {
-           setTokenSentToServer(false);
-           sendTokenToServer(refreshedToken);
-         });
-        });
-
-        function sendTokenToServer(currentToken) {
-          if (!isTokenSentToServer()) {
-            fetch('/notification_devices/', {
-              method: "POST",
-              headers: {
-                  'Content-Type': 'application/json',
-                  'X-CSRFToken': cookies['csrftoken']
-                },
-              body: JSON.stringify({
-                'registration_id': currentToken,
-                'type': 'web',
-              }),
-              credentials: "include",
-            })
-            setTokenSentToServer(true);
-          }
-        }
-
-        function isTokenSentToServer() {
-         return window.localStorage.getItem('sentToServer') == 1;
-        }
-        function setTokenSentToServer(sent) {
-         window.localStorage.setItem('sentToServer', sent ? 1 : 0);
-        }
-
-        function requestPermission() {
-         messaging.requestPermission()
-         .then(function() {
-           messaging.getToken()
-           .then(function(currentToken) {
-             if (currentToken) {
-               sendTokenToServer(currentToken);
-             } else {
-               setTokenSentToServer(false);
-             }
-           })
-           .catch(function(err) {
-             setTokenSentToServer(false);
-           });
-         });
-        }
-
-        requestPermission();
-      });
-
-  </script>
-  <!-- END FIREBASE INITIALIZATION CODE -->      
-{% endif %}

molo/pwa/urls.py

@@ -3,7 +3,7 @@
 from fcm_django.api.rest_framework import FCMDeviceViewSet
 from rest_framework.routers import DefaultRouter
 
-from .views import RegistrationTokenView, manifest, service_worker
+from .views import RegistrationTokenView, manifest, service_worker, fcm, toast
 
 
 urlpatterns = patterns('', )
@@ -18,4 +18,6 @@
         name='registration-token'),
     url('^serviceworker.js$', service_worker),
     url('^manifest.json$', manifest),
+    url('^fcm.js$', fcm),
+    url('^toast.min.js$', toast),
 )

molo/pwa/views.py

@@ -34,3 +34,13 @@ def manifest(request):
         for setting_name in dir(app_settings)
         if setting_name.startswith('PWA_')
     })
+
+
+def fcm(request):
+    return render(request, 'fcm.js',
+                  content_type='application/javascript')
+
+
+def toast(request):
+    return render(request, 'toast.min.js',
+                  content_type='application/javascript')