110swag / flashy-frontend

Commit 70278fc157acf53a576286f44261e2acec972313

Authored by Rohan Rangray 2015-06-02 10:54:24 -0700

Notifications are working now sorta. Still need to send the registration id to the app server.

Showing 2 changed files with 296 additions and 282 deletions Side-by-side Diff

scripts/SettingsController.js
scripts/service-worker.js

...	...	@@ -7,53 +7,272 @@
7	7	console.log('checking to see if chrome');
8	8	if (!chrome) { return; }
9	9	console.log('chrome');
10		- $scope.registerCallback = function(registrationId) {
11		- if (chrome.runtime.lastError) {
12		- console.log('Registration failed');
13		- }
	10	+ });
14	11
15		- sendRegistrationId(registrationId, function(succeed) {
16		- if (succeed) {
17		- chrome.storage.local.set({registered: true});
18		- }
	12	+console.log("executing things outside of module");
	13	+var PUSH_SERVER_URL = '/app/subscribe/';
	14	+
	15	+function onPushSubscription(pushSubscription) {
	16	+ console.log('pushSubscription = ', pushSubscription.endpoint);
	17	+ // Here we would normally send the endpoint
	18	+ // and subscription ID to our server.
	19	+ // In this demo we just use send these values to
	20	+ // our server via XHR which sends a push message.
	21	+
	22	+ console.log('pushSubscription: ', pushSubscription);
	23	+
	24	+ // Code to handle the XHR
	25	+ var formData = new FormData();
	26	+
	27	+ var endpoint = pushSubscription.endpoint;
	28	+
	29	+ if ('subscriptionId' in pushSubscription) {
	30	+ // Make the endpoint always contain the subscriptionId
	31	+ // 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	+
	55	+function subscribeDevice() {
	56	+ // We need the service worker registration to access the push manager
	57	+ navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
	58	+ serviceWorkerRegistration.pushManager.subscribe()
	59	+ .then(onPushSubscription)
	60	+ .catch(function(e) {
	61	+ console.log("Error in subscribing");
	62	+ // Check for a permission prompt issue
	63	+ if ('permissions' in navigator) {
	64	+ navigator.permissions.query({name: 'push', userVisibleOnly: true})
	65	+ .then(function(permissionStatus) {
	66	+ console.log('subscribe() Error: Push permission status = ',
	67	+ permissionStatus);
	68	+ if (permissionStatus.status === 'denied') {
	69	+ // The user blocked the permission prompt
	70	+ console.log('Ooops Notifications are Blocked',
	71	+ 'Unfortunately you just permanently blocked notifications. ' +
	72	+ 'Please unblock / allow them to switch on push ' +
	73	+ 'notifications.');
	74	+ } else {
	75	+ console.log('Ooops Push Couldn\'t Register',
	76	+ '<p>When we tried to ' +
	77	+ 'get the subscription ID for GCM, something went wrong,' +
	78	+ ' not sure why.</p>' +
	79	+ '<p>Have you defined "gcm_sender_id" and ' +
	80	+ '"gcm_user_visible_only" in the manifest?</p>' +
	81	+ '<p>Error message: ' +
	82	+ e.message +
	83	+ '</p>');
	84	+ }
	85	+ }).catch(function(err) {
	86	+ console.log('Ooops Push Couldn\'t Register',
	87	+ '<p>When we tried to ' +
	88	+ 'get the subscription ID for GCM, something went wrong, not ' +
	89	+ 'sure why.</p>' +
	90	+ '<p>Have you defined "gcm_sender_id" and ' +
	91	+ '"gcm_user_visible_only" in the manifest?</p>' +
	92	+ '<p>Error message: ' +
	93	+ err.message +
	94	+ '</p>');
19	95	});
20		- };
	96	+ } else {
	97	+ // Use notification permission to do something
	98	+ if (Notification.permission === 'denied') {
	99	+ console.log('Ooops Notifications are Blocked',
	100	+ 'Unfortunately you just permanently blocked notifications. ' +
	101	+ 'Please unblock / allow them to switch on push notifications.');
	102	+ } else {
	103	+ console.log('Ooops Push Couldn\'t Register',
	104	+ '<p>When we tried to ' +
	105	+ 'get the subscription ID for GCM, something went wrong, not ' +
	106	+ 'sure why.</p>' +
	107	+ '<p>Have you defined "gcm_sender_id" and ' +
	108	+ '"gcm_user_visible_only" in the manifest?</p>' +
	109	+ '<p>Error message: ' +
	110	+ e.message +
	111	+ '</p>');
	112	+ }
	113	+ }
	114	+ });
	115	+ });
	116	+}
21	117
22		- function sendRegistrationId(registrationId, callback) {
23		- console.log('registration id: ' + registrationId);
24		- $http.post('/api/subscribe/', JSON.stringify({
25		- 'registration_id': registrationId
26		- }));
27		- callback(true);
	118	+function unsubscribeDevice() {
	119	+ navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
	120	+ serviceWorkerRegistration.pushManager.getSubscription().then(
	121	+ function(pushSubscription) {
	122	+ // Check we have everything we need to unsubscribe
	123	+ if (!pushSubscription) {
	124	+ return;
28	125	}
29	126
30		- console.log("gonna try to launch service worker now");
31		- if ('serviceWorker' in navigator) {
	127	+ // TODO: Remove the device details from the server
	128	+ // i.e. the pushSubscription.subscriptionId and
	129	+ // pushSubscription.endpoint
32	130
33		- console.log('gonna try to launch service worker now');
34		- navigator.serviceWorker.register('scripts/service-worker.js').then(
35		- function(serviceWorkerRegistration) {
36		- serviceWorkerRegistration.pushManager.subscribe().then(
37		- function(pushSubscription) {
38		- console.log('sub id: ', pushSubscription.subscriptionId);
39		- console.log('endpoint: ', pushSubscription.endpoint);
40		- // The push subscription details needed by the application
41		- // server are now available, and can be sent to it using,
42		- // for example, an XMLHttpRequest.
43		- }, function(error) {
44		- // During development it often helps to log errors to the
45		- // console. In a production environment it might make sense to
46		- // also report information about errors back to the
47		- // application server.
48		- console.log('sub error: ', error);
49		- }
50		- );
	131	+ pushSubscription.unsubscribe().then(function(successful) {
	132	+ console.log('Unsubscribed from push: ', successful);
	133	+ if (!successful) {
	134	+ // The unsubscribe was unsuccessful, but we can
	135	+ // remove the subscriptionId from our server
	136	+ // and notifications will stop
	137	+ // This just may be in a bad state when the user returns
	138	+ console.error('We were unable to unregister from push');
	139	+ }
	140	+
	141	+ }).catch(function(e) {
	142	+ console.log('Unsubscribtion error: ', e);
51	143	});
	144	+ }.bind(this)).catch(function(e) {
	145	+ console.error('Error thrown while revoking push notifications. ' +
	146	+ 'Most likely because push was never registered', e);
	147	+ });
	148	+ });
	149	+}
52	150
53		- } else {
54		- console.log('Service workers aren\'t supported in this browser.');
55		- }
	151	+function permissionStatusChange(permissionStatus) {
	152	+ console.log('permissionStatusChange = ', permissionStatus);
	153	+ // If the notification permission is denied, it's a permanent block
	154	+ switch (permissionStatus.status) {
	155	+ case 'denied':
	156	+ console.log('Ooops Push has been Blocked',
	157	+ 'Unfortunately the user permanently blocked push. Please unblock / ' +
	158	+ 'allow them to switch on push notifications.');
	159	+ break;
	160	+ case 'granted':
	161	+ // Set the state of the push switch
	162	+ console.log("case granted");
	163	+ break;
	164	+ case 'prompt':
	165	+ console.log("case prompt");
	166	+ break;
	167	+ }
	168	+}
56	169
	170	+function setUpPushPermission() {
	171	+ navigator.permissions.query({name: 'push', userVisibleOnly: true})
	172	+ .then(function(permissionStatus) {
	173	+ // Set the initial state
	174	+ permissionStatusChange(permissionStatus);
57	175
58		- });
	176	+ // Handle Permission State Changes
	177	+ permissionStatus.onchange = function() {
	178	+ permissionStatusChange(this);
	179	+ };
	180	+
	181	+ // Check if push is supported and what the current state is
	182	+ navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
	183	+ // Let's see if we have a subscription already
	184	+ serviceWorkerRegistration.pushManager.getSubscription()
	185	+ .then(function(subscription) {
	186	+ if (!subscription) {
	187	+ // NOOP
	188	+ return;
	189	+ }
	190	+
	191	+ // Update the current state with the
	192	+ // subscriptionid and endpoint
	193	+ onPushSubscription(subscription);
	194	+ })
	195	+ .catch(function(e) {
	196	+ console.log('An error occured while calling getSubscription()', e);
	197	+ });
	198	+ });
	199	+ }).catch(function(err) {
	200	+ console.log('Ooops Unable to check the permission',
	201	+ 'Unfortunately the permission for push notifications couldn\'t be ' +
	202	+ 'checked. Are you on Chrome 43+?');
	203	+ });
	204	+}
	205	+
	206	+function setUpNotificationPermission() {
	207	+ // If the notification permission is denied, it's a permanent block
	208	+ if (Notification.permission === 'denied') {
	209	+ console.log('Ooops Notifications are Blocked',
	210	+ 'Unfortunately notifications are permanently blocked. Please unblock / ' +
	211	+ 'allow them to switch on push notifications.');
	212	+ return;
	213	+ } else if (Notification.permission === 'default') {
	214	+ console.log("notification permissions === default");
	215	+ return;
	216	+ }
	217	+
	218	+ // Check if push is supported and what the current state is
	219	+ navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
	220	+ // Let's see if we have a subscription already
	221	+ serviceWorkerRegistration.pushManager.getSubscription()
	222	+ .then(function(subscription) {
	223	+ if (!subscription) {
	224	+ // NOOP
	225	+ console.log("not subscription");
	226	+ return;
	227	+ }
	228	+
	229	+ // Update the current state with the
	230	+ // subscriptionid and endpoint
	231	+ console.log("onpushsubscription should be entered");
	232	+ onPushSubscription(subscription);
	233	+ })
	234	+ .catch(function(e) {
	235	+ console.log('An error occured while calling getSubscription()', e);
	236	+ });
	237	+ });
	238	+}
	239	+
	240	+// Once the service worker is registered set the initial state
	241	+function initialiseState() {
	242	+ // Is the Permissions API supported
	243	+ if ('permissions' in navigator) {
	244	+ console.log("setting push permissions");
	245	+ setUpPushPermission();
	246	+ return;
	247	+ } else {
	248	+ console.log("setting notification permissions");
	249	+ setUpNotificationPermission();
	250	+ }
	251	+}
	252	+window.addEventListener('load', function() {
	253	+ // When the toggle switch changes, enabled / disable push
	254	+ // messaging
	255	+ var enablePushSwitch = document.querySelector('.js-checkbox');
	256	+ enablePushSwitch.addEventListener('change', function(e) {
	257	+ if (e.target.checked) {
	258	+ subscribeDevice();
	259	+ } else {
	260	+ unsubscribeDevice();
	261	+ }
	262	+ });
	263	+
	264	+ // Check that service workers are supported
	265	+ if ('serviceWorker' in navigator) {
	266	+ navigator.serviceWorker.register('scripts/service-worker.js')
	267	+ .then(initialiseState);
	268	+ } else {
	269	+ // Service Workers aren't supported so you should hide the push UI
	270	+ // If it's currently visible.
	271	+ console.log('Ooops Service Workers aren\'t Supported',
	272	+ 'Service Workers aren\'t supported in this browser. ' +
	273	+ 'For this demo be sure to use ' +
	274	+ '<a href="https://www.google.co.uk/chrome/browser/canary.html">Chrome Canary</a>' +
	275	+ ' or version 42.');
	276	+ }
	277	+});

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