30 |
31 |
32 | Enable push toggle
34 |
35 |
Enable push notifications
36 |
39 |
48 |
49 |
This Browsers Subscription
50 |
Below is your current subscription.
51 |
52 |
53 |
54 |
55 |
Supported Content Encodings
56 |
A change to the web push spec moves browsers from aesgcm
57 | to aes128gcm content encoding.
58 |
To determine which is supported in the current browser you can view
59 | PushManager.supportedContentEncodings.
60 |
61 |
Below is the list of supported encodings.
62 |
63 |
64 |
65 |
66 |
67 |
CURL Command
68 |
69 |
70 | Download the binary payload file.
71 | Run the terminal from the folder where the payload.bin
72 | file has been downloaded. Copy and paste the following CURL
73 | command into your terminal to send a push message to this browser.
74 |
75 |
76 |
77 |
78 |
79 |
80 |
Push from a Server
81 |
82 |
Some push services don't allow CORS. So you can't make a network
83 | request directly from the browser. That's why this demo uses a CORS
84 | proxy server under the hood to forward push message to push endpoint.
85 | To send a push message to this browser, you need to make a network
86 | request from your server with the following pieces of info (this
87 | is essentially a breakdown of the CURL command above):
88 |
89 |
Endpoint URL
90 |
91 |
92 |
93 |
Request Headers
94 |
95 |
96 |
97 |
Request Body
98 |
99 |
100 |
101 |
102 |
103 |
106 |
107 |
108 |
109 |
110 |
113 |
Browser Notes:
114 |
115 |
116 | On iOS and iPadOS, to request permission to receive push notifications, web apps must first be added to the Home Screen. The user can manage those permissions per web app in Notifications Settings.
117 | On Meta Quest, to request permission to receive push notifications, web apps must be packaged .
118 |
119 |
120 |
Further reading:
121 |
122 |
128 |
129 |
Tools/Samples:
130 |
131 |
139 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
--------------------------------------------------------------------------------
/frontend/scripts/encryption/encryption-aes-128-gcm.js:
--------------------------------------------------------------------------------
1 | /* eslint-env browser */
2 |
3 | import {
4 | uint8ArrayToBase64Url,
5 | base64UrlToUint8Array,
6 | joinUint8Arrays,
7 | arrayBuffersToCryptoKeys,
8 | cryptoKeysToUint8Array,
9 | generateSalt} from './helpers.js';
10 | import {HKDF} from './hkdf.js';
11 | import {APPLICATION_KEYS} from '../constants.js';
12 | import {VapidHelper2} from './vapid-helper-2.js';
13 |
14 | export class EncryptionAES128GCM {
15 | constructor(options = {}) {
16 | this._b64ServerKeys = options.serverKeys;
17 | this._b64Salt = options.salt;
18 | this._b4VapidKeys = options.vapidKeys;
19 | }
20 |
21 | getServerKeys() {
22 | if (this._b64ServerKeys) {
23 | return arrayBuffersToCryptoKeys(
24 | base64UrlToUint8Array(this._b64ServerKeys.publicKey),
25 | base64UrlToUint8Array(this._b64ServerKeys.privateKey),
26 | );
27 | }
28 |
29 | return EncryptionAES128GCM.generateServerKeys();
30 | }
31 |
32 | getSalt() {
33 | if (this._b64Salt) {
34 | return base64UrlToUint8Array(this._b64Salt);
35 | }
36 |
37 | return generateSalt();
38 | }
39 |
40 | getVapidKeys() {
41 | if (this._b4VapidKeys) {
42 | return this._b4VapidKeys;
43 | }
44 |
45 | return APPLICATION_KEYS;
46 | }
47 |
48 | async getRequestDetails(subscription, payloadText) {
49 | const vapidHelper = VapidHelper2;
50 |
51 | const endpoint = subscription.endpoint;
52 |
53 | const vapidHeaders = await vapidHelper.createVapidAuthHeader(
54 | this.getVapidKeys(),
55 | subscription.endpoint,
56 | 'mailto:simple-push-demo@gauntface.co.uk');
57 | const encryptedPayloadDetails = await this.encryptPayload(
58 | subscription, payloadText);
59 |
60 | let body = null;
61 | const headers = {};
62 | headers.TTL = 60;
63 |
64 | if (encryptedPayloadDetails) {
65 | body = encryptedPayloadDetails.cipherText;
66 | headers['Content-Encoding'] = 'aes128gcm';
67 | } else {
68 | headers['Content-Length'] = 0;
69 | }
70 |
71 | if (vapidHeaders) {
72 | Object.keys(vapidHeaders).forEach((headerName) => {
73 | headers[headerName] = vapidHeaders[headerName];
74 | });
75 | }
76 |
77 | const response = {
78 | headers: headers,
79 | endpoint,
80 | };
81 |
82 | if (body) {
83 | response.body = body;
84 | }
85 |
86 | return response;
87 | }
88 |
89 | async encryptPayload(subscription, payloadText) {
90 | if (!payloadText || payloadText.trim().length === 0) {
91 | return Promise.resolve(null);
92 | }
93 |
94 | const salt = this.getSalt();
95 |
96 | const serverKeys = await this.getServerKeys();
97 | const exportedServerKeys = await cryptoKeysToUint8Array(
98 | serverKeys.publicKey);
99 | const encryptionKeys = await this._generateEncryptionKeys(
100 | subscription, salt, serverKeys);
101 |
102 | const contentEncryptionCryptoKey = await crypto.subtle.importKey('raw',
103 | encryptionKeys.contentEncryptionKey, 'AES-GCM', true,
104 | ['decrypt', 'encrypt']);
105 | encryptionKeys.contentEncryptionCryptoKey = contentEncryptionCryptoKey;
106 |
107 | const utf8Encoder = new TextEncoder('utf-8');
108 | const payloadUint8Array = utf8Encoder.encode(payloadText);
109 |
110 | const paddingBytes = 0;
111 | const paddingUnit8Array = new Uint8Array(1 + paddingBytes);
112 | paddingUnit8Array.fill(0);
113 | paddingUnit8Array[0] = 0x02;
114 |
115 | const recordUint8Array = joinUint8Arrays([
116 | payloadUint8Array,
117 | paddingUnit8Array,
118 | ]);
119 |
120 | const algorithm = {
121 | name: 'AES-GCM',
122 | tagLength: 128,
123 | iv: encryptionKeys.nonce,
124 | };
125 |
126 | const encryptedPayloadArrayBuffer = await crypto.subtle.encrypt(
127 | algorithm, encryptionKeys.contentEncryptionCryptoKey,
128 | recordUint8Array,
129 | );
130 | const payloadWithHeaders = await this._addEncryptionContentCodingHeader(
131 | encryptedPayloadArrayBuffer,
132 | serverKeys,
133 | salt);
134 | return {
135 | cipherText: payloadWithHeaders,
136 | salt: uint8ArrayToBase64Url(salt),
137 | publicServerKey: uint8ArrayToBase64Url(
138 | exportedServerKeys.publicKey),
139 | };
140 | }
141 |
142 | static generateServerKeys() {
143 | // 'true' is to make the keys extractable
144 | return crypto.subtle.generateKey({name: 'ECDH', namedCurve: 'P-256'},
145 | true, ['deriveBits']);
146 | }
147 |
148 | async _addEncryptionContentCodingHeader(
149 | encryptedPayloadArrayBuffer, serverKeys, salt) {
150 | const keys = await cryptoKeysToUint8Array(serverKeys.publicKey);
151 | // Maximum record size.
152 | const recordSizeUint8Array = new Uint8Array([0x00, 0x00, 0x10, 0x00]);
153 |
154 | const serverPublicKeyLengthBuffer = new Uint8Array(1);
155 | serverPublicKeyLengthBuffer[0] = keys.publicKey.byteLength;
156 |
157 | const uint8arrays = [
158 | salt,
159 | // Record Size
160 | recordSizeUint8Array,
161 | // Service Public Key Length
162 | serverPublicKeyLengthBuffer,
163 | // Server Public Key
164 | keys.publicKey,
165 | new Uint8Array(encryptedPayloadArrayBuffer),
166 | ];
167 |
168 | const joinedUint8Array = joinUint8Arrays(uint8arrays);
169 | return joinedUint8Array.buffer;
170 | }
171 |
172 | async _generateEncryptionKeys(subscription, salt, serverKeys) {
173 | const infoResults = await Promise.all([
174 | this._generatePRK(subscription, serverKeys),
175 | this._generateCEKInfo(subscription, serverKeys),
176 | this._generateNonceInfo(subscription, serverKeys),
177 | ]);
178 |
179 | const prk = infoResults[0];
180 | const cekInfo = infoResults[1];
181 | const nonceInfo = infoResults[2];
182 |
183 | const cekHKDF = new HKDF(prk, salt);
184 | const nonceHKDF = new HKDF(prk, salt);
185 | const keyResults = await Promise.all([
186 | cekHKDF.generate(cekInfo, 16),
187 | nonceHKDF.generate(nonceInfo, 12),
188 | ]);
189 | return {
190 | contentEncryptionKey: keyResults[0],
191 | nonce: keyResults[1],
192 | };
193 | }
194 |
195 | _generateCEKInfo() {
196 | const utf8Encoder = new TextEncoder('utf-8');
197 | const contentEncoding8Array = utf8Encoder
198 | .encode('Content-Encoding: aes128gcm');
199 | const paddingUnit8Array = new Uint8Array(1).fill(0);
200 | return joinUint8Arrays([
201 | contentEncoding8Array,
202 | paddingUnit8Array,
203 | ]);
204 | }
205 |
206 | _generateNonceInfo() {
207 | const utf8Encoder = new TextEncoder('utf-8');
208 | const contentEncoding8Array = utf8Encoder
209 | .encode('Content-Encoding: nonce');
210 | const paddingUnit8Array = new Uint8Array(1).fill(0);
211 | return joinUint8Arrays([
212 | contentEncoding8Array,
213 | paddingUnit8Array,
214 | ]);
215 | }
216 |
217 | async _generatePRK(subscription, serverKeys) {
218 | const sharedSecret = await this._getSharedSecret(subscription, serverKeys);
219 |
220 | const keyInfoUint8Array = await this._getKeyInfo(subscription, serverKeys);
221 | const hkdf = new HKDF(
222 | sharedSecret,
223 | subscription.getKey('auth'),
224 | );
225 | return hkdf.generate(keyInfoUint8Array, 32);
226 | }
227 |
228 | async _getSharedSecret(subscription, serverKeys) {
229 | const keys = await arrayBuffersToCryptoKeys(
230 | subscription.getKey('p256dh'));
231 | if (!(keys.publicKey instanceof CryptoKey)) {
232 | throw new Error('The publicKey must be a CryptoKey.');
233 | }
234 |
235 | const algorithm = {
236 | name: 'ECDH',
237 | namedCurve: 'P-256',
238 | public: keys.publicKey,
239 | };
240 |
241 | return crypto.subtle.deriveBits(
242 | algorithm, serverKeys.privateKey, 256);
243 | }
244 |
245 | async _getKeyInfo(subscription, serverKeys) {
246 | const utf8Encoder = new TextEncoder('utf-8');
247 |
248 | const keyInfo = await cryptoKeysToUint8Array(serverKeys.publicKey);
249 | return joinUint8Arrays([
250 | utf8Encoder.encode('WebPush: info'),
251 | new Uint8Array(1).fill(0),
252 | new Uint8Array(subscription.getKey('p256dh')),
253 | keyInfo.publicKey,
254 | ]);
255 | }
256 | }
257 |
--------------------------------------------------------------------------------
/frontend/scripts/encryption/encryption-aes-gcm.js:
--------------------------------------------------------------------------------
1 | /* eslint-env browser */
2 |
3 | import {
4 | uint8ArrayToBase64Url,
5 | base64UrlToUint8Array,
6 | joinUint8Arrays,
7 | arrayBuffersToCryptoKeys,
8 | cryptoKeysToUint8Array,
9 | generateSalt} from './helpers.js';
10 | import {APPLICATION_KEYS} from '../constants.js';
11 | import {VapidHelper1} from './vapid-helper-1.js';
12 | import {HKDF} from './hkdf.js';
13 |
14 | export class EncryptionAESGCM {
15 | constructor(options = {}) {
16 | this._b64ServerKeys = options.serverKeys;
17 | this._b64Salt = options.salt;
18 | this._b4VapidKeys = options.vapidKeys;
19 | }
20 |
21 | getServerKeys() {
22 | if (this._b64ServerKeys) {
23 | return arrayBuffersToCryptoKeys(
24 | base64UrlToUint8Array(this._b64ServerKeys.publicKey),
25 | base64UrlToUint8Array(this._b64ServerKeys.privateKey),
26 | );
27 | }
28 |
29 | return EncryptionAESGCM.generateServerKeys();
30 | }
31 |
32 | getSalt() {
33 | if (this._b64Salt) {
34 | return base64UrlToUint8Array(this._b64Salt);
35 | }
36 |
37 | return generateSalt();
38 | }
39 |
40 | getVapidKeys() {
41 | if (this._b4VapidKeys) {
42 | return this._b4VapidKeys;
43 | }
44 |
45 | return APPLICATION_KEYS;
46 | }
47 |
48 | async getRequestDetails(subscription, payloadText) {
49 | const vapidHeaders = await VapidHelper1
50 | .createVapidAuthHeader(
51 | this.getVapidKeys(),
52 | subscription.endpoint,
53 | 'mailto:simple-push-demo@gauntface.co.uk');
54 | const encryptedPayloadDetails = await this.encryptPayload(
55 | subscription, payloadText);
56 |
57 | let body = null;
58 | const headers = {};
59 | headers.TTL = 60;
60 |
61 | if (encryptedPayloadDetails) {
62 | body = encryptedPayloadDetails.cipherText;
63 |
64 | headers.Encryption = `salt=${encryptedPayloadDetails.salt}`;
65 | headers['Crypto-Key'] =
66 | `dh=${encryptedPayloadDetails.publicServerKey}`;
67 | headers['Content-Encoding'] = 'aesgcm';
68 | } else {
69 | headers['Content-Length'] = 0;
70 | }
71 |
72 | if (vapidHeaders) {
73 | Object.keys(vapidHeaders).forEach((headerName) => {
74 | if (headers[headerName]) {
75 | headers[headerName] =
76 | `${headers[headerName]}; ${vapidHeaders[headerName]}`;
77 | } else {
78 | headers[headerName] = vapidHeaders[headerName];
79 | }
80 | });
81 | }
82 |
83 | const response = {
84 | headers: headers,
85 | endpoint: subscription.endpoint,
86 | };
87 |
88 | if (body) {
89 | response.body = body;
90 | }
91 |
92 | return response;
93 | }
94 |
95 | async encryptPayload(subscription, payloadText) {
96 | if (!payloadText || payloadText.trim().length === 0) {
97 | return Promise.resolve(null);
98 | }
99 |
100 | const salt = this.getSalt();
101 |
102 | const serverKeys = await this.getServerKeys();
103 |
104 | const exportedServerKeys = await cryptoKeysToUint8Array(
105 | serverKeys.publicKey);
106 | const encryptionKeys = await this._generateEncryptionKeys(
107 | subscription, salt, serverKeys);
108 | const contentEncryptionCryptoKey = await crypto.subtle.importKey('raw',
109 | encryptionKeys.contentEncryptionKey, 'AES-GCM', true,
110 | ['decrypt', 'encrypt']);
111 | encryptionKeys.contentEncryptionCryptoKey = contentEncryptionCryptoKey;
112 |
113 | const paddingBytes = 0;
114 | const paddingUnit8Array = new Uint8Array(2 + paddingBytes);
115 | const utf8Encoder = new TextEncoder('utf-8');
116 | const payloadUint8Array = utf8Encoder.encode(payloadText);
117 | const recordUint8Array = new Uint8Array(
118 | paddingUnit8Array.byteLength + payloadUint8Array.byteLength);
119 | recordUint8Array.set(paddingUnit8Array, 0);
120 | recordUint8Array.set(payloadUint8Array, paddingUnit8Array.byteLength);
121 |
122 | const algorithm = {
123 | name: 'AES-GCM',
124 | tagLength: 128,
125 | iv: encryptionKeys.nonce,
126 | };
127 |
128 | const encryptedPayloadArrayBuffer = await crypto.subtle.encrypt(
129 | algorithm, encryptionKeys.contentEncryptionCryptoKey,
130 | recordUint8Array,
131 | );
132 |
133 | return {
134 | cipherText: encryptedPayloadArrayBuffer,
135 | salt: uint8ArrayToBase64Url(salt),
136 | publicServerKey: uint8ArrayToBase64Url(
137 | exportedServerKeys.publicKey),
138 | };
139 | }
140 |
141 | static generateServerKeys() {
142 | // 'true' is to make the keys extractable
143 | return crypto.subtle.generateKey({name: 'ECDH', namedCurve: 'P-256'},
144 | true, ['deriveBits']);
145 | }
146 |
147 | async _generateEncryptionKeys(subscription, salt, serverKeys) {
148 | const results = await Promise.all([
149 | this._generatePRK(subscription, serverKeys),
150 | this._generateCEKInfo(subscription, serverKeys),
151 | this._generateNonceInfo(subscription, serverKeys),
152 | ]);
153 |
154 | const prk = results[0];
155 | const cekInfo = results[1];
156 | const nonceInfo = results[2];
157 |
158 | const cekHKDF = new HKDF(prk, salt);
159 | const nonceHKDF = new HKDF(prk, salt);
160 |
161 | const finalKeys = await Promise.all([
162 | cekHKDF.generate(cekInfo, 16),
163 | nonceHKDF.generate(nonceInfo, 12),
164 | ]);
165 |
166 | return {
167 | contentEncryptionKey: finalKeys[0],
168 | nonce: finalKeys[1],
169 | };
170 | }
171 |
172 | async _generateContext(subscription, serverKeys) {
173 | const cryptoKeys = await arrayBuffersToCryptoKeys(
174 | subscription.getKey('p256dh'));
175 | const keysAsCryptoKeys = {
176 | clientPublicKey: cryptoKeys.publicKey,
177 | serverPublicKey: serverKeys.publicKey,
178 | };
179 | const keysAsUint8 = await Promise.all([
180 | cryptoKeysToUint8Array(keysAsCryptoKeys.clientPublicKey),
181 | cryptoKeysToUint8Array(keysAsCryptoKeys.serverPublicKey),
182 | ]);
183 | const keys = {
184 | clientPublicKey: keysAsUint8[0].publicKey,
185 | serverPublicKey: keysAsUint8[1].publicKey,
186 | };
187 |
188 | const utf8Encoder = new TextEncoder('utf-8');
189 | const labelUnit8Array = utf8Encoder.encode('P-256');
190 | const paddingUnit8Array = new Uint8Array(1).fill(0);
191 |
192 | const clientPublicKeyLengthUnit8Array = new Uint8Array(2);
193 | clientPublicKeyLengthUnit8Array[0] = 0x00;
194 | clientPublicKeyLengthUnit8Array[1] = keys.clientPublicKey.byteLength;
195 |
196 | const serverPublicKeyLengthBuffer = new Uint8Array(2);
197 | serverPublicKeyLengthBuffer[0] = 0x00;
198 | serverPublicKeyLengthBuffer[1] = keys.serverPublicKey.byteLength;
199 |
200 | return joinUint8Arrays([
201 | labelUnit8Array,
202 | paddingUnit8Array,
203 | clientPublicKeyLengthUnit8Array,
204 | keys.clientPublicKey,
205 | serverPublicKeyLengthBuffer,
206 | keys.serverPublicKey,
207 | ]);
208 | }
209 |
210 | async _generateCEKInfo(subscription, serverKeys) {
211 | const utf8Encoder = new TextEncoder('utf-8');
212 | const contentEncoding8Array = utf8Encoder
213 | .encode('Content-Encoding: aesgcm');
214 | const paddingUnit8Array = new Uint8Array(1).fill(0);
215 | const contextBuffer = await this._generateContext(subscription, serverKeys);
216 | return joinUint8Arrays([
217 | contentEncoding8Array,
218 | paddingUnit8Array,
219 | contextBuffer,
220 | ]);
221 | }
222 |
223 | async _generateNonceInfo(subscription, serverKeys) {
224 | const utf8Encoder = new TextEncoder('utf-8');
225 | const contentEncoding8Array = utf8Encoder
226 | .encode('Content-Encoding: nonce');
227 | const paddingUnit8Array = new Uint8Array(1).fill(0);
228 | const contextBuffer = await this._generateContext(subscription, serverKeys);
229 | return joinUint8Arrays([
230 | contentEncoding8Array,
231 | paddingUnit8Array,
232 | contextBuffer,
233 | ]);
234 | }
235 |
236 | async _generatePRK(subscription, serverKeys) {
237 | const sharedSecret = await this._getSharedSecret(subscription, serverKeys);
238 | const utf8Encoder = new TextEncoder('utf-8');
239 | const authInfoUint8Array = utf8Encoder
240 | .encode('Content-Encoding: auth\0');
241 |
242 | const hkdf = new HKDF(
243 | sharedSecret,
244 | subscription.getKey('auth'));
245 | return hkdf.generate(authInfoUint8Array, 32);
246 | }
247 |
248 | async _getSharedSecret(subscription, serverKeys) {
249 | const keys = await arrayBuffersToCryptoKeys(
250 | subscription.getKey('p256dh'));
251 | if (!(keys.publicKey instanceof CryptoKey)) {
252 | throw new Error('The publicKey must be a CryptoKey.');
253 | }
254 |
255 | const algorithm = {
256 | name: 'ECDH',
257 | namedCurve: 'P-256',
258 | public: keys.publicKey,
259 | };
260 |
261 | return crypto.subtle.deriveBits(
262 | algorithm, serverKeys.privateKey, 256);
263 | }
264 | }
265 |
--------------------------------------------------------------------------------
/frontend/scripts/app-controller.js:
--------------------------------------------------------------------------------
1 | /* eslint-env browser */
2 |
3 | import {EncryptionFactory} from './encryption/encryption-factory.js';
4 | import {APPLICATION_KEYS, BACKEND_ORIGIN} from './constants.js';
5 | import {PushClient} from './push-client.js';
6 |
7 | class AppController {
8 | constructor() {
9 | this._encryptionHelper = EncryptionFactory.generateHelper();
10 | this._stateChangeListener = this._stateChangeListener.bind(this);
11 | this._subscriptionUpdate = this._subscriptionUpdate.bind(this);
12 |
13 | this._pushClient = new PushClient(
14 | this._stateChangeListener,
15 | this._subscriptionUpdate,
16 | APPLICATION_KEYS.publicKey,
17 | );
18 |
19 | // This div contains the UI for CURL commands to trigger a push
20 | this._sendPushOptions = getElement('.js-send-push-options');
21 | this._subscriptionJSONCode = getElement('.js-subscription-json');
22 | this._payloadContainer = getElement('.js-payload-textfield-container');
23 | this._infoPayload = getElement('.js-endpoint');
24 | this._infoHeadersTable = getElement('.js-headers-table');
25 | this._infoBodyTable = getElement('.js-request-body-table');
26 | this._curlElement = getElement('.js-curl-code');
27 | this._payloadDownload = getElement('.js-payload-download');
28 | this._payloadLink = getElement('.js-payload-link');
29 | this._errorContainer = getElement('.js-error-message-container');
30 | this._errorTitle = getElement('.js-error-title');
31 | this._errorMessage = getElement('.js-error-message');
32 |
33 | this._encodingElement = getElement('.js-supported-content-encodings');
34 | this.setupEncoding();
35 |
36 | this._payloadTextField = getElement('.js-payload-textfield');
37 | this._payloadTextField.oninput = () => this.updatePushInfo();
38 |
39 | this._toggleSwitch = getElement('.js-enable-checkbox');
40 | this._toggleSwitch.addEventListener('click', () => this.togglePush());
41 |
42 | this._sendPush = getElement('.js-send-push-button');
43 | this._sendPush.addEventListener('click', () => this.sendPushMessage());
44 | }
45 |
46 | setupEncoding() {
47 | const encodings = EncryptionFactory.supportedEncodings();
48 | this._encodingElement.textContent = JSON.stringify(encodings, null, 2);
49 | }
50 |
51 | togglePush() {
52 | if (this._toggleSwitch.checked) {
53 | this._pushClient.subscribeDevice();
54 | } else {
55 | this._pushClient.unsubscribeDevice();
56 | }
57 | }
58 |
59 | registerServiceWorker() {
60 | // Check that service workers are supported
61 | if ('serviceWorker' in navigator) {
62 | navigator.serviceWorker.register('./service-worker.js')
63 | .catch((err) => {
64 | console.error(err);
65 | this.showErrorMessage(
66 | 'Unable to Register SW',
67 | 'Sorry this demo requires a service worker to work and it ' +
68 | 'failed to install - sorry :(',
69 | );
70 | });
71 | } else {
72 | this.showErrorMessage(
73 | 'Service Worker Not Supported',
74 | 'Sorry this demo requires service worker support in your browser. ' +
75 | 'Please try this demo in Chrome or Firefox Nightly.',
76 | );
77 | }
78 | }
79 |
80 | _stateChangeListener(state, data) {
81 | if (typeof state.interactive !== 'undefined') {
82 | if (state.interactive) {
83 | this._toggleSwitch.disabled = false;
84 | } else {
85 | this._toggleSwitch.disabled = true;
86 | }
87 | }
88 |
89 | if (typeof state.pushEnabled !== 'undefined') {
90 | if (state.pushEnabled) {
91 | this._toggleSwitch.checked = true;
92 | } else {
93 | this._toggleSwitch.checked = false;
94 | }
95 | }
96 |
97 | switch (state.id) {
98 | case 'UNSUPPORTED':
99 | this.showErrorMessage(
100 | 'Push Not Supported',
101 | data,
102 | );
103 | break;
104 | case 'ERROR':
105 | this.showErrorMessage(
106 | 'Ooops a Problem Occurred',
107 | data,
108 | );
109 | break;
110 | default:
111 | break;
112 | }
113 | }
114 |
115 | _subscriptionUpdate(subscription) {
116 | this._currentSubscription = subscription;
117 | if (!subscription) {
118 | // Remove any subscription from your servers if you have
119 | // set it up.
120 | this._sendPushOptions.classList.add('u-hidden');
121 | return;
122 | }
123 |
124 | this._subscriptionJSONCode.textContent =
125 | JSON.stringify(subscription, null, 2);
126 |
127 | // This is too handle old versions of Firefox where keys would exist
128 | // but auth wouldn't
129 | const subscriptionObject = JSON.parse(JSON.stringify(subscription));
130 | if (
131 | subscriptionObject &&
132 | subscriptionObject.keys &&
133 | subscriptionObject.keys.auth &&
134 | subscriptionObject.keys.p256dh) {
135 | this._payloadContainer.classList.remove('u-hidden');
136 | } else {
137 | this._payloadContainer.classList.add('u-hidden');
138 | }
139 |
140 | this.updatePushInfo();
141 |
142 | // Display the UI
143 | this._sendPushOptions.classList.remove('u-hidden');
144 | }
145 |
146 | async updatePushInfo() {
147 | // Let's look at payload
148 | const pt = this._payloadTextField.value;
149 | const s = this._currentSubscription;
150 | const reqDetails = await this._encryptionHelper.getRequestDetails(s, pt);
151 |
152 | const curlCommandParts = [
153 | 'curl',
154 | `"${reqDetails.endpoint}"`,
155 | '--request POST',
156 | ];
157 |
158 | this._infoPayload.textContent = reqDetails.endpoint;
159 |
160 | this._infoHeadersTable.innerHTML = '';
161 |
162 | Object.keys(reqDetails.headers).forEach((header) => {
163 | const value = reqDetails.headers[header];
164 |
165 | const row = document.createElement('tr');
166 | row.innerHTML = `