No response from Push Link in DevTools

[mbozugrace]

Hello,

I hope you could point me in the correct direction. I tested a console.log("Hello world") debugging code outside the push event listener. This line was called when the browser is reloaded, but the code within the self.addEventListener function is not called when the push button in DevTools is clicked. I unregistered the service worker but that hasn't worked. I am using Chrome Version 66.0.3359.181 (Official Build) (64-bit)

Thank you

Code from the sw.js

/

• Push Notifications codelab
• Copyright 2015 Google Inc. All rights reserved.
• Licensed under the Apache License, Version 2.0 (the "License");
• you may not use this file except in compliance with the License.
• You may obtain a copy of the License at
• https://www.apache.org/licenses/LICENSE-2.0
• Unless required by applicable law or agreed to in writing, software
• distributed under the License is distributed on an "AS IS" BASIS,
• WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
• See the License for the specific language governing permissions and
• limitations under the License

• */

/ eslint-env browser, serviceworker, es6 / `'use strict';

self.addEventListener('push', function(event) { console.log('[Service Worker] Push Received.'); console.log([Service Worker] Push had this data: "${event.data.text()}");

const title = 'Push Codelab'; const options = { body: 'Yay it works.', icon: 'images/icon.png', badge: 'images/badge.png' };

const notificationPromise = self.registration.showNotification(title, options); event.waitUntil(notificationPromise); });` Code from main.js

/

• Push Notifications codelab
• Copyright 2015 Google Inc. All rights reserved.
• Licensed under the Apache License, Version 2.0 (the "License");
• you may not use this file except in compliance with the License.
• You may obtain a copy of the License at
• https://www.apache.org/licenses/LICENSE-2.0
• Unless required by applicable law or agreed to in writing, software
• distributed under the License is distributed on an "AS IS" BASIS,
• WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
• See the License for the specific language governing permissions and
• limitations under the License

• */

/ eslint-env browser, es6 /

'use strict';

const applicationServerPublicKey = 'BIeTbIg91IbzJV8Oby2ucSn7BlLCjSC0NGjBw-k-JUUGJKhFS46alHgxAMy-m-xafBOetVenWGEIFde4GJRvtlQ';

const pushButton = document.querySelector('.js-push-btn');

let isSubscribed = false; let swRegistration = null;

function urlB64ToUint8Array(base64String) { 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; }

if ('serviceWorker' in navigator && 'PushManager' in window) { console.log('Service Worker and Push is supported');

navigator.serviceWorker.register('sw.js') .then(function(swReg) { console.log('Service Worker is registered', swReg);

swRegistration = swReg;
 initializeUI();

}) .catch(function(error) { console.error('Service Worker Error', error); }); } else { console.warn('Push messaging is not supported'); pushButton.textContent = 'Push Not Supported'; }

function initializeUI() { pushButton.addEventListener('click', function() { pushButton.disabled = true; if (isSubscribed) { // TODO: Unsubscribe user } else { subscribeUser(); } }); // Set the initial subscription value swRegistration.pushManager.getSubscription() .then(function(subscription) { isSubscribed = !(subscription === null);

if (isSubscribed) {
  console.log('User IS subscribed.');
} else {
  console.log('User is NOT subscribed.');
}

updateBtn();

}); }

function updateBtn() { if (Notification.permission === 'denied') { pushButton.textContent = 'Push Messaging Blocked.'; pushButton.disabled = true; updateSubscriptionOnServer(null); return; } if (isSubscribed) { pushButton.textContent = 'Disable Push Messaging'; } else { pushButton.textContent = 'Enable Push Messaging'; }

pushButton.disabled = false; }

function subscribeUser() { const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey); swRegistration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: applicationServerKey }) .then(function(subscription) { console.log('User is subscribed.');

updateSubscriptionOnServer(subscription);

isSubscribed = true;

updateBtn();

}) .catch(function(err) { console.log('Failed to subscribe the user: ', err); updateBtn(); }); }

function updateSubscriptionOnServer(subscription) { // TODO: Send subscription to application server

const subscriptionJson = document.querySelector('.js-subscription-json'); const subscriptionDetails = document.querySelector('.js-subscription-details');

if (subscription) { subscriptionJson.textContent = JSON.stringify(subscription); subscriptionDetails.classList.remove('is-invisible'); } else { subscriptionDetails.classList.add('is-invisible'); } }

[cby016]

I am having this same issue. I updated to the latest version of chrome and get the same results. I'm running Chrome Version 67.0.3396.62 (Official Build) beta (64-bit) on macOS High Sierra 10.13.2

[cby016]

Just an FYI, if you continue on through the tutorial, sending the push notification from the companion site does work.

[JasXSL]

Same issue in Version 67.0.3396.79 (Official Build) (64-bit). The dev tools push doesn't work.

[DanJ210]

Same issue with latest chrome build 67+, the push button does not work.

I'm inside a company domain and my webserver will not be served outside of the network so I cannot use the companion site. Why can't the test push button in dev tools work? Or be removed if it has no purpose?

[kronos93]

Same issue, ¿somebody know how to use or activate the button or any alternative?

[cby016]

@kronos93 Like I mentioned before if you continue on through the tutorial, sending the push notification from the companion site does work.

[Akash91]

@nitish173 Looks like some issue with the recent update

[rossobianero]

I wasn't able to debug this in Chrome v67.0.3396.87 (but I'm having the same problem), but I could in Firefox v60.0.0 (there's a similar feature in its dev tools). It dies on this line:

console.log([Service Worker] Push had this data: "${event.data.text()}");

"event" is null

[DanJ210]

@cby016 That's great that continuing on through the tutorial works with the companion site but I mentioned just before, that's not possible for me.

So why have the "push" button at all to test if it's function is of no purpose? Just saying. I was hoping that the tutorial owner would be keeping up with this repo as he might suggest to Google that the "push" button be removed or fixed to properly do what it's supposed to do.

Regardless, I cannot use the companion site and the "push" button does not work in dev tools or the tutorial app is not tying up to the "push" button correctly.

[lems3]

I have the same issue. Push button not working. Having a companion site just to allow dev to test a feature feel stupid when we say it out loud... I see that this have been broken a while ago, anyone have info on how to put some pressure on a fix ?

[scottwilson312]

I am using Chrome Version 68.0.3440.106 (Official Build) (64-bit) on Ubuntu and followed the tutorial step by step, and I double and triple checked that. I tried restarted the browser, the computer, and restarting the tutorial from scratch to no avail.

Sending the notification from the dev tools does not work for me, but sending it from the companion site did.

[DanJ210]

@lems3 I'd say creating issues here would be what would put some pressure to get a fix but it looks like Google has abandoned this. I don't see any assignee's or any interaction at all. So I guess that's Google's standard operating procedure, fragmented...

[paladinu]

FWIW, I am also having the same problem. Disappointing.

[kronos93]

I still waiting for any update about the issue with push emulation in Chrome. https://stackoverflow.com/questions/49753582/how-to-use-the-chrome-devtools-push-debug-feature https://stackoverflow.com/questions/51255467/chrome-devtools-cant-simulate-push-event

[sably]

you can test this with edge browser!

[kronos93]

@sably yes, we can test in Edge but in Chrome the notifications looks better :) and some features of the notification API, are not supported by Edge yet,

[Akash91]

Hey guys WTF ?

[nanomen]

Hey! It doesn't work for me too!

[DanJ210]

@sably Are you saying that we can use Edge over Chrome to test the push notifications?

[pdoria]

Chrome Version 69.0.3497.100 (Official Build) (64-bit) Push on Dev Tools still now working

[klausbadelt]

Chrome macOS Version 70.0.3538.77 (Official Build) (64-bit) Push on Dev Tools not working

[vovanec]

Chrome Mac OS Version 70.0.3538.110 (Official Build) (64-bit) This is not working for me...

[gauntface]

Hi everyone - crbug.com is the right place to call out this issue as it sounds like a DevTools bug rather than an issue with the codelab itself.

[Ariel205]

Chrome Mac OS Version 69.0.3497.92 (Build oficial) (64 bits) Not working yet...

[ep-mberkan]

I have the same issue. Push button not working :-(. Version: 70.0.3538.67, Linux.

[TeacherStijn]

Same here. Not working with same code examples.