110swag / flashy-frontend

Download as
Browse Code ยป

Commit cd28f392cbd14691ab6aa86691cae74fcf384db5

Authored by Rohan Rangray
1 parent 17907a95c7
Exists in master and in 1 other branch ef9f9dd363e92d55eb4d80d036193be39572172b

Got notifications working. Next order of business: enable subscribing only on mobile phones

Showing 3 changed files with 52 additions and 78 deletions Inline Diff

scripts/SettingsController.js View file @ cd28f39
angular.module('flashy.SettingsController', ['ui.router']). 1 1 angular.module('flashy.SettingsController', ['ui.router']).
2 2
controller('SettingsController', function($scope, $http) { 3 3 controller('SettingsController', function($scope, $http) {
$scope.changePassword = function(oldPassword, newPassword, confirmedNewPassword) { 4 4 $scope.changePassword = function(oldPassword, newPassword, confirmedNewPassword) {
5 5
}; 6 6 };
console.log('checking to see if chrome'); 7 7 console.log('checking to see if chrome');
if (!chrome) { 8 8 if (!chrome) {
return; 9 9 return;
} 10 10 }
console.log('chrome'); 11 11 console.log('chrome');
12 12
console.log('executing things outside of module'); 13 13 console.log('executing things outside of module');
var PUSH_SERVER_URL = '/app/subscribe/'; 14 14 var PUSH_SERVER_URL = '/api/subscribe/';
15 15
function onPushSubscription(pushSubscription) { 16 16 function onPushSubscription(pushSubscription) {
console.log('pushSubscription = ', pushSubscription.endpoint); 17 17 console.log('pushSubscription = ', pushSubscription.endpoint);
// Here we would normally send the endpoint 18 18 // Here we would normally send the endpoint
// and subscription ID to our server. 19 19 // and subscription ID to our server.
// In this demo we just use send these values to 20 20 // In this demo we just use send these values to
// our server via XHR which sends a push message. 21 21 // our server via XHR which sends a push message.
22 22
console.log('pushSubscription: ', pushSubscription); 23
24
// Code to handle the XHR 25
var formData = new FormData(); 26
27
var endpoint = pushSubscription.endpoint; 28 23 var endpoint = pushSubscription.endpoint;
24 var subscriptionId = pushSubscription.subscriptionId;
29 25
if ('subscriptionId' in pushSubscription) { 30 26 console.log('registration_id: ', subscriptionId);
// Make the endpoint always contain the subscriptionId 31 27 $http.post(PUSH_SERVER_URL, {'registration_id': subscriptionId});
// so the server is always consistent 32
if (!endpoint.includes(pushSubscription.subscriptionId)) { 33
endpoint += '/' + pushSubscription.subscriptionId; 34
} 35
} 36
37
formData.append('registration_id', endpoint); 38
console.log('registration_id: ', endpoint); 39
40
console.log('tryna push'); 41
42
var req = new XMLHttpRequest(); 43
req.addEventListener('load', function(response) { 44
console.log('response: ', response); 45
}); 46
req.addEventListener('error', function(error) { 47
console.log('error: ', error); 48
}); 49
req.open('POST', PUSH_SERVER_URL); 50
req.send(formData); 51
console.log('pushed?'); 52
53
} 54 28 }
55 29
function subscribeDevice() { 56 30 function subscribeDevice() {
// We need the service worker registration to access the push manager 57 31 // We need the service worker registration to access the push manager
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) { 58 32 navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
serviceWorkerRegistration.pushManager.subscribe() 59 33 serviceWorkerRegistration.pushManager.subscribe()
.then(onPushSubscription) 60 34 .then(onPushSubscription)
.catch(function(e) { 61 35 .catch(function(e) {
console.log('Error in subscribing'); 62 36 console.log('Error in subscribing');
// Check for a permission prompt issue 63 37 // Check for a permission prompt issue
if ('permissions' in navigator) { 64 38 if ('permissions' in navigator) {
navigator.permissions.query({name: 'push', userVisibleOnly: true}) 65 39 navigator.permissions.query({name: 'push', userVisibleOnly: true})
.then(function(permissionStatus) { 66 40 .then(function(permissionStatus) {
console.log('subscribe() Error: Push permission status = ', 67 41 console.log('subscribe() Error: Push permission status = ',
permissionStatus); 68 42 permissionStatus);
if (permissionStatus.status === 'denied') { 69 43 if (permissionStatus.status === 'denied') {
// The user blocked the permission prompt 70 44 // The user blocked the permission prompt
console.log('Ooops Notifications are Blocked', 71 45 console.log('Ooops Notifications are Blocked',
'Unfortunately you just permanently blocked notifications. ' + 72 46 'Unfortunately you just permanently blocked notifications. ' +
'Please unblock / allow them to switch on push ' + 73 47 'Please unblock / allow them to switch on push ' +
'notifications.'); 74 48 'notifications.');
} else { 75 49 } else {
console.log('Ooops Push Couldn\'t Register', 76 50 console.log('Ooops Push Couldn\'t Register',
'<p>When we tried to ' + 77 51 '<p>When we tried to ' +
'get the subscription ID for GCM, something went wrong,' + 78 52 'get the subscription ID for GCM, something went wrong,' +
' not sure why.</p>' + 79 53 ' not sure why.</p>' +
'<p>Have you defined "gcm_sender_id" and ' + 80 54 '<p>Have you defined "gcm_sender_id" and ' +
'"gcm_user_visible_only" in the manifest?</p>' + 81 55 '"gcm_user_visible_only" in the manifest?</p>' +
'<p>Error message: ' + 82 56 '<p>Error message: ' +
e.message + 83 57 e.message +
'</p>'); 84 58 '</p>');
} 85 59 }
}).catch(function(err) { 86 60 }).catch(function(err) {
console.log('Ooops Push Couldn\'t Register', 87 61 console.log('Ooops Push Couldn\'t Register',
'<p>When we tried to ' + 88 62 '<p>When we tried to ' +
'get the subscription ID for GCM, something went wrong, not ' + 89 63 'get the subscription ID for GCM, something went wrong, not ' +
'sure why.</p>' + 90 64 'sure why.</p>' +
'<p>Have you defined "gcm_sender_id" and ' + 91 65 '<p>Have you defined "gcm_sender_id" and ' +
'"gcm_user_visible_only" in the manifest?</p>' + 92 66 '"gcm_user_visible_only" in the manifest?</p>' +
'<p>Error message: ' + 93 67 '<p>Error message: ' +
err.message + 94 68 err.message +
'</p>'); 95 69 '</p>');
}); 96 70 });
} else { 97 71 } else {
// Use notification permission to do something 98 72 // Use notification permission to do something
if (Notification.permission === 'denied') { 99 73 if (Notification.permission === 'denied') {
console.log('Ooops Notifications are Blocked', 100 74 console.log('Ooops Notifications are Blocked',
'Unfortunately you just permanently blocked notifications. ' + 101 75 'Unfortunately you just permanently blocked notifications. ' +
'Please unblock / allow them to switch on push notifications.'); 102 76 'Please unblock / allow them to switch on push notifications.');
} else { 103 77 } else {
console.log('Ooops Push Couldn\'t Register', 104 78 console.log('Ooops Push Couldn\'t Register',
'<p>When we tried to ' + 105 79 '<p>When we tried to ' +
'get the subscription ID for GCM, something went wrong, not ' + 106 80 'get the subscription ID for GCM, something went wrong, not ' +
'sure why.</p>' + 107 81 'sure why.</p>' +
'<p>Have you defined "gcm_sender_id" and ' + 108 82 '<p>Have you defined "gcm_sender_id" and ' +
'"gcm_user_visible_only" in the manifest?</p>' + 109 83 '"gcm_user_visible_only" in the manifest?</p>' +
'<p>Error message: ' + 110 84 '<p>Error message: ' +
e.message + 111 85 e.message +
'</p>'); 112 86 '</p>');
} 113 87 }
} 114 88 }
}); 115 89 });
}); 116 90 });
} 117 91 }
118 92
function unsubscribeDevice() { 119 93 function unsubscribeDevice() {
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) { 120 94 navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
serviceWorkerRegistration.pushManager.getSubscription().then( 121 95 serviceWorkerRegistration.pushManager.getSubscription().then(
function(pushSubscription) { 122 96 function(pushSubscription) {
// Check we have everything we need to unsubscribe 123 97 // Check we have everything we need to unsubscribe
if (!pushSubscription) { 124 98 if (!pushSubscription) {
return; 125 99 return;
} 126 100 }
127 101
// TODO: Remove the device details from the server 128 102 // TODO: Remove the device details from the server
// i.e. the pushSubscription.subscriptionId and 129 103 // i.e. the pushSubscription.subscriptionId and
// pushSubscription.endpoint 130 104 // pushSubscription.endpoint
131 105
pushSubscription.unsubscribe().then(function(successful) { 132 106 pushSubscription.unsubscribe().then(function(successful) {
console.log('Unsubscribed from push: ', successful); 133 107 console.log('Unsubscribed from push: ', successful);
if (!successful) { 134 108 if (!successful) {
// The unsubscribe was unsuccessful, but we can 135 109 // The unsubscribe was unsuccessful, but we can
// remove the subscriptionId from our server 136 110 // remove the subscriptionId from our server
// and notifications will stop 137 111 // and notifications will stop
// This just may be in a bad state when the user returns 138 112 // This just may be in a bad state when the user returns
console.error('We were unable to unregister from push'); 139 113 console.error('We were unable to unregister from push');
} 140 114 }
141 115
}).catch(function(e) { 142 116 }).catch(function(e) {
console.log('Unsubscribtion error: ', e); 143 117 console.log('Unsubscribtion error: ', e);
}); 144 118 });
}.bind(this)).catch(function(e) { 145 119 }.bind(this)).catch(function(e) {
console.error('Error thrown while revoking push notifications. ' + 146 120 console.error('Error thrown while revoking push notifications. ' +
'Most likely because push was never registered', e); 147 121 'Most likely because push was never registered', e);
}); 148 122 });
}); 149 123 });
} 150 124 }
151 125
function permissionStatusChange(permissionStatus) { 152 126 function permissionStatusChange(permissionStatus) {
console.log('permissionStatusChange = ', permissionStatus); 153 127 console.log('permissionStatusChange = ', permissionStatus);
// If the notification permission is denied, it's a permanent block 154 128 // If the notification permission is denied, it's a permanent block
switch (permissionStatus.status) { 155 129 switch (permissionStatus.status) {
case 'denied': 156 130 case 'denied':
console.log('Ooops Push has been Blocked', 157 131 console.log('Ooops Push has been Blocked',
'Unfortunately the user permanently blocked push. Please unblock / ' + 158 132 'Unfortunately the user permanently blocked push. Please unblock / ' +
'allow them to switch on push notifications.'); 159 133 'allow them to switch on push notifications.');
break; 160 134 break;
case 'granted': 161 135 case 'granted':
// Set the state of the push switch 162 136 // Set the state of the push switch
console.log('case granted'); 163 137 console.log('case granted');
break; 164 138 break;
case 'prompt': 165 139 case 'prompt':
console.log('case prompt'); 166 140 console.log('case prompt');
break; 167 141 break;
} 168 142 }
} 169 143 }
170 144
function setUpPushPermission() { 171 145 function setUpPushPermission() {
navigator.permissions.query({name: 'push', userVisibleOnly: true}) 172 146 navigator.permissions.query({name: 'push', userVisibleOnly: true})
.then(function(permissionStatus) { 173 147 .then(function(permissionStatus) {
// Set the initial state 174 148 // Set the initial state
permissionStatusChange(permissionStatus); 175 149 permissionStatusChange(permissionStatus);
176 150
// Handle Permission State Changes 177 151 // Handle Permission State Changes
permissionStatus.onchange = function() { 178 152 permissionStatus.onchange = function() {
permissionStatusChange(this); 179 153 permissionStatusChange(this);
}; 180 154 };
181 155
// Check if push is supported and what the current state is 182 156 // Check if push is supported and what the current state is
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) { 183 157 navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
// Let's see if we have a subscription already 184 158 // Let's see if we have a subscription already
serviceWorkerRegistration.pushManager.getSubscription() 185 159 serviceWorkerRegistration.pushManager.getSubscription()
.then(function(subscription) { 186 160 .then(function(subscription) {
if (!subscription) { 187 161 if (!subscription) {
// NOOP 188 162 // NOOP
return; 189 163 return;
} 190 164 }
191 165
// Update the current state with the 192 166 // Update the current state with the
// subscriptionid and endpoint 193 167 // subscriptionid and endpoint
onPushSubscription(subscription); 194 168 onPushSubscription(subscription);
}) 195 169 })
.catch(function(e) { 196 170 .catch(function(e) {
console.log('An error occured while calling getSubscription()', e); 197 171 console.log('An error occured while calling getSubscription()', e);
}); 198 172 });
}); 199 173 });
}).catch(function(err) { 200 174 }).catch(function(err) {
console.log('Ooops Unable to check the permission', 201 175 console.log('Ooops Unable to check the permission',
'Unfortunately the permission for push notifications couldn\'t be ' + 202 176 'Unfortunately the permission for push notifications couldn\'t be ' +
'checked. Are you on Chrome 43+?'); 203 177 'checked. Are you on Chrome 43+?');
}); 204 178 });
} 205 179 }
206 180
function setUpNotificationPermission() { 207 181 function setUpNotificationPermission() {
// If the notification permission is denied, it's a permanent block 208 182 // If the notification permission is denied, it's a permanent block
if (Notification.permission === 'denied') { 209 183 if (Notification.permission === 'denied') {
console.log('Ooops Notifications are Blocked', 210 184 console.log('Ooops Notifications are Blocked',
'Unfortunately notifications are permanently blocked. Please unblock / ' + 211 185 'Unfortunately notifications are permanently blocked. Please unblock / ' +
'allow them to switch on push notifications.'); 212 186 'allow them to switch on push notifications.');
return; 213 187 return;
} else if (Notification.permission === 'default') { 214 188 } else if (Notification.permission === 'default') {
console.log('notification permissions === default'); 215 189 console.log('notification permissions === default');
return; 216 190 return;
} 217 191 }
218 192
// Check if push is supported and what the current state is 219 193 // Check if push is supported and what the current state is
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) { 220 194 navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
// Let's see if we have a subscription already 221 195 // Let's see if we have a subscription already
serviceWorkerRegistration.pushManager.getSubscription() 222 196 serviceWorkerRegistration.pushManager.getSubscription()
.then(function(subscription) { 223 197 .then(function(subscription) {
if (!subscription) { 224 198 if (!subscription) {
// NOOP 225 199 // NOOP
console.log('not subscription'); 226 200 console.log('not subscription');
return; 227 201 return;
} 228 202 }
229 203
// Update the current state with the 230 204 // Update the current state with the
// subscriptionid and endpoint 231 205 // subscriptionid and endpoint
console.log('onpushsubscription should be entered'); 232 206 console.log('onpushsubscription should be entered');
onPushSubscription(subscription); 233 207 onPushSubscription(subscription);
}) 234 208 })
.catch(function(e) { 235 209 .catch(function(e) {
console.log('An error occured while calling getSubscription()', e); 236 210 console.log('An error occured while calling getSubscription()', e);
}); 237 211 });
}); 238 212 });
} 239 213 }
240 214
// Once the service worker is registered set the initial state 241 215 // Once the service worker is registered set the initial state
function initialiseState() { 242 216 function initialiseState() {
// Is the Permissions API supported 243 217 // Is the Permissions API supported
if ('permissions' in navigator) { 244 218 if ('permissions' in navigator) {
console.log('setting push permissions'); 245 219 console.log('setting push permissions');
setUpPushPermission(); 246 220 setUpPushPermission();
return; 247 221 return;
} else { 248 222 } else {
console.log('setting notification permissions'); 249 223 console.log('setting notification permissions');
setUpNotificationPermission(); 250 224 setUpNotificationPermission();
} 251 225 }
} 252 226 }
253 227
var enablePushSwitch = $('.js-checkbox'); 254 228 var enablePushSwitch = $('.js-checkbox');
enablePushSwitch.change(function(e) { 255 229 enablePushSwitch.change(function(e) {
console.log('checkbox changed'); 256 230 console.log('checkbox changed');
scripts/service-worker.js View file @ cd28f39
'use strict'; 1 File was deleted
2
function showNotification(title, body, icon, data) { 3
var notificationOptions = { 4
body: body, 5
icon: icon ? icon : 'images/touch/chrome-touch-icon-192x192.png', 6
tag: 'simple-push-demo-notification', 7
data: data 8
}; 9
if (self.registration.showNotification) { 10
self.registration.showNotification(title, notificationOptions); 11
return; 12
} else { 13
new Notification(title, notificationOptions); 14
} 15
} 16
17
self.addEventListener('push', function(event) { 18
console.log('Received a push message', event); 19
20
// Since this is no payload data with the first version 21
// of Push notifications, here we'll grab some data from 22
// an API and use it to populate a notification 23
var title = 'You have cards waiting to be reviewed!'; 24
var message = 'check yo cards m8'; 25
var icon = 'flashy.ico'; 26
var notificationTag = 'simple-push-demo-notification'; 27
28
// Add this to the data of the notification 29
var urlToOpen = '/api/subscribe/'; 30
31
var notificationFilter = { 32
tag: 'simple-push-demo-notification' 33
}; 34
var notificationData = { 35
url: urlToOpen 36
}; 37
return showNotification(title, message, icon, notificationData); 38
}); 39
service-worker.js View file @ cd28f39
File was created 1 'use strict';
2
3 function showNotification(title, body, icon, data) {
4 var notificationOptions = {
5 body: body,
6 icon: icon ? icon : '/flashy.ico',
7 tag: 'simple-push-demo-notification',
8 data: data
9 };
10 if (self.registration.showNotification) {
11 self.registration.showNotification(title, notificationOptions);
12 return;
13 } else {
14 new Notification(title, notificationOptions);
15 }
16 }
17
18 self.addEventListener('push', function(event) {
19 console.log('Received a push message', event);
20
21 // Since this is no payload data with the first version
22 // of Push notifications, here we'll grab some data from
23 // an API and use it to populate a notification
24 var title = 'You have cards waiting to be reviewed!';
25 var message = 'check yo cards m8';
26 var icon = '/flashy.ico';
27 var notificationTag = 'simple-push-demo-notification';
28
29 // Add this to the data of the notification
30 var urlToOpen = '/api/subscribe/';
31
32 var notificationFilter = {
33 tag: 'simple-push-demo-notification'
34 };
35 var notificationData = {
36 url: urlToOpen
37 };
38 return showNotification(title, message, icon, notificationData);
39 });