Enough derpy hacking to make the full end to end push work
This relies on the web-push command line however
This commit is contained in:
R. Tyler Croy
parent
f42321f3a4
commit
770e0abef4
|
|
@ -331,6 +331,15 @@
|
|||
"acorn": "5.7.1"
|
||||
}
|
||||
},
|
||||
"agent-base": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.2.1.tgz",
|
||||
"integrity": "sha512-JVwXMr9nHYTUXsBFKUqhJwvlcYU/blreOEUkhNR2eXZIvwd+c+o5V4MgDPKWnMS/56awN3TRzIP+KoPn+roQtg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"es6-promisify": "5.0.0"
|
||||
}
|
||||
},
|
||||
"ajv": {
|
||||
"version": "6.5.2",
|
||||
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.5.2.tgz",
|
||||
|
|
@ -1234,6 +1243,12 @@
|
|||
"isarray": "1.0.0"
|
||||
}
|
||||
},
|
||||
"buffer-equal-constant-time": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
|
||||
"integrity": "sha1-+OcRMvf/5uAaXJaXpMbz5I1cyBk=",
|
||||
"dev": true
|
||||
},
|
||||
"buffer-from": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
|
||||
|
|
@ -2218,6 +2233,15 @@
|
|||
"safer-buffer": "2.1.2"
|
||||
}
|
||||
},
|
||||
"ecdsa-sig-formatter": {
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.10.tgz",
|
||||
"integrity": "sha1-HFlQAPBKiJffuFAAiSoPTDOvhsM=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"safe-buffer": "5.1.2"
|
||||
}
|
||||
},
|
||||
"ee-first": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
|
||||
|
|
@ -2362,6 +2386,21 @@
|
|||
"es6-symbol": "3.1.1"
|
||||
}
|
||||
},
|
||||
"es6-promise": {
|
||||
"version": "4.2.4",
|
||||
"resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.4.tgz",
|
||||
"integrity": "sha512-/NdNZVJg+uZgtm9eS3O6lrOLYmQag2DjdEXuPaHlZ6RuVqgqaVZfgYCepEIKsLqwdQArOPtC3XzRLqGGfT8KQQ==",
|
||||
"dev": true
|
||||
},
|
||||
"es6-promisify": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/es6-promisify/-/es6-promisify-5.0.0.tgz",
|
||||
"integrity": "sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"es6-promise": "4.2.4"
|
||||
}
|
||||
},
|
||||
"es6-symbol": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.1.tgz",
|
||||
|
|
@ -4232,12 +4271,31 @@
|
|||
"sshpk": "1.14.2"
|
||||
}
|
||||
},
|
||||
"http_ece": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/http_ece/-/http_ece-1.0.5.tgz",
|
||||
"integrity": "sha1-tgZg+q8UIVEC0Uk+pyDc2StTNy8=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"urlsafe-base64": "1.0.0"
|
||||
}
|
||||
},
|
||||
"https-browserify": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
|
||||
"integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=",
|
||||
"dev": true
|
||||
},
|
||||
"https-proxy-agent": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.1.tgz",
|
||||
"integrity": "sha512-HPCTS1LW51bcyMYbxUIOO4HEOlQ1/1qRaFWcyxvwaqUS9TY88aoEuHUY33kuAh1YhVVaDQhLZsnPd+XNARWZlQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"agent-base": "4.2.1",
|
||||
"debug": "3.1.0"
|
||||
}
|
||||
},
|
||||
"iconv-lite": {
|
||||
"version": "0.4.23",
|
||||
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz",
|
||||
|
|
@ -5814,6 +5872,27 @@
|
|||
"verror": "1.10.0"
|
||||
}
|
||||
},
|
||||
"jwa": {
|
||||
"version": "1.1.6",
|
||||
"resolved": "https://registry.npmjs.org/jwa/-/jwa-1.1.6.tgz",
|
||||
"integrity": "sha512-tBO/cf++BUsJkYql/kBbJroKOgHWEigTKBAjjBEmrMGYd1QMBC74Hr4Wo2zCZw6ZrVhlJPvoMrkcOnlWR/DJfw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"buffer-equal-constant-time": "1.0.1",
|
||||
"ecdsa-sig-formatter": "1.0.10",
|
||||
"safe-buffer": "5.1.2"
|
||||
}
|
||||
},
|
||||
"jws": {
|
||||
"version": "3.1.5",
|
||||
"resolved": "https://registry.npmjs.org/jws/-/jws-3.1.5.tgz",
|
||||
"integrity": "sha512-GsCSexFADNQUr8T5HPJvayTjvPIfoyJPtLQBwn5a4WZQchcrPMPMAWcC1AzJVRDKyD6ZPROPAxgv6rfHViO4uQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"jwa": "1.1.6",
|
||||
"safe-buffer": "5.1.2"
|
||||
}
|
||||
},
|
||||
"killable": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/killable/-/killable-1.0.0.tgz",
|
||||
|
|
@ -8948,6 +9027,12 @@
|
|||
"requires-port": "1.0.0"
|
||||
}
|
||||
},
|
||||
"urlsafe-base64": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/urlsafe-base64/-/urlsafe-base64-1.0.0.tgz",
|
||||
"integrity": "sha1-I/iQaabGL0bPOh07ABac77kL4MY=",
|
||||
"dev": true
|
||||
},
|
||||
"use": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
|
||||
|
|
@ -9094,6 +9179,39 @@
|
|||
"minimalistic-assert": "1.0.1"
|
||||
}
|
||||
},
|
||||
"web-push": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/web-push/-/web-push-3.3.2.tgz",
|
||||
"integrity": "sha512-ExPr0dz/IGthbHQqvoZYKsDodEgvET7lyRRuBvC4EjVixlSV7c7jxRRBTVop1XhcbXsBacQTTsA5BJ7/8+x4WA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"asn1.js": "5.0.1",
|
||||
"http_ece": "1.0.5",
|
||||
"https-proxy-agent": "2.2.1",
|
||||
"jws": "3.1.5",
|
||||
"minimist": "1.2.0",
|
||||
"urlsafe-base64": "1.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"asn1.js": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-5.0.1.tgz",
|
||||
"integrity": "sha512-aO8EaEgbgqq77IEw+1jfx5c9zTbzvkfuRBuZsSsPnTHMkmd5AI4J6OtITLZFa381jReeaQL67J0GBTUu0+ZTVw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"bn.js": "4.11.8",
|
||||
"inherits": "2.0.3",
|
||||
"minimalistic-assert": "1.0.1"
|
||||
}
|
||||
},
|
||||
"minimist": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
|
||||
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"webidl-conversions": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@
|
|||
"jest": "^23.4.1",
|
||||
"source-map-loader": "^0.2.3",
|
||||
"typescript": "^2.9.2",
|
||||
"web-push": "^3.3.2",
|
||||
"webpack": "^4.16.0",
|
||||
"webpack-cli": "^3.0.8",
|
||||
"webpack-dev-server": "^3.1.5"
|
||||
|
|
|
|||
68
src/index.ts
68
src/index.ts
|
|
@ -16,6 +16,46 @@ if ('serviceWorker' in navigator) {
|
|||
console.debug('Service Workers are enabled for this browser');
|
||||
}
|
||||
|
||||
|
||||
|
||||
function urlBase64ToUint8Array(base64String : string) {
|
||||
const padding = '='.repeat((4 - base64String.length % 4) % 4);
|
||||
const base64 = (base64String + padding)
|
||||
.replace(/\-/g, '+')
|
||||
.replace(/_/g, '/');
|
||||
|
||||
const rawData = window.atob(base64);
|
||||
const outputArray = new Uint8Array(rawData.length);
|
||||
|
||||
for (let i = 0; i < rawData.length; ++i) {
|
||||
outputArray[i] = rawData.charCodeAt(i);
|
||||
}
|
||||
return outputArray;
|
||||
}
|
||||
|
||||
const vapidPublicKey : string = 'BE42XeNY7SE-DUthy_tRuTpFPKkotXYrJWxlrc3LDGckhSZWM8VoBP6ewrDjfjNdbqCV3ugtm4yvQ1NygznCMDk';
|
||||
const convertedVapidKey : Uint8Array = urlBase64ToUint8Array(vapidPublicKey);
|
||||
|
||||
function registerServiceWorker() {
|
||||
return navigator.serviceWorker.register('worker.js')
|
||||
.then(function(registration) {
|
||||
console.log('Service worker successfully registered.');
|
||||
console.log(registration);
|
||||
|
||||
registration.pushManager.subscribe({
|
||||
userVisibleOnly: true,
|
||||
applicationServerKey: convertedVapidKey
|
||||
}).then((subscription: any) => {
|
||||
console.log(`Received push subscription ${JSON.stringify(subscription)}`);
|
||||
}).catch(err => console.log(err));
|
||||
return registration;
|
||||
})
|
||||
.catch(function(err) {
|
||||
console.error('Unable to register service worker.', err);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function askPermission() {
|
||||
return new Promise(function(resolve: Function, reject: Function) {
|
||||
const permissionResult = Notification.requestPermission(function(result: string) {
|
||||
|
|
@ -32,6 +72,7 @@ function askPermission() {
|
|||
}
|
||||
else {
|
||||
const n = new Notification('Thanks for granting notification permissions!', {});
|
||||
registerServiceWorker();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -39,31 +80,4 @@ function askPermission() {
|
|||
window.addEventListener('load', () => {
|
||||
console.debug('Window loaded');
|
||||
askPermission();
|
||||
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
|
||||
serviceWorkerRegistration.pushManager.subscribe({userVisibleOnly: true})
|
||||
.then(function(subscription) {
|
||||
// The subscription was successful
|
||||
console.log('subscription successful');
|
||||
|
||||
// TODO: Send the subscription subscription.endpoint
|
||||
// to your server and save it to send a push message
|
||||
// at a later date
|
||||
// return sendSubscriptionToServer(subscription);
|
||||
})
|
||||
.catch(function(e) {
|
||||
if (Notification.permission === 'denied') {
|
||||
// The user denied the notification permission which
|
||||
// means we failed to subscribe and the user will need
|
||||
// to manually change the notification permission to
|
||||
// subscribe to push messages
|
||||
console.debug('Permission for Notifications was denied');
|
||||
} else {
|
||||
// A problem occurred with the subscription, this can
|
||||
// often be down to an issue or lack of the gcm_sender_id
|
||||
// and / or gcm_user_visible_only
|
||||
console.debug('Unable to subscribe to push.', e);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1 +1,18 @@
|
|||
console.debug('Service Worker has been initialized');
|
||||
|
||||
const publicKey : string = 'BE42XeNY7SE-DUthy_tRuTpFPKkotXYrJWxlrc3LDGckhSZWM8VoBP6ewrDjfjNdbqCV3ugtm4yvQ1NygznCMDk';
|
||||
|
||||
self.addEventListener('push', function(event : any) {
|
||||
console.log('[Service Worker] Push Received.');
|
||||
console.log(`[Service Worker] Push had this data: "${event.data.text()}"`);
|
||||
|
||||
const title = 'How You Can Help Us';
|
||||
const options = {
|
||||
body: 'Yay it works.',
|
||||
icon: 'images/icon.png',
|
||||
badge: 'images/badge.png'
|
||||
};
|
||||
|
||||
event.waitUntil(self.registration.showNotification(title, options));
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue