At the moment the button made be enabled before the service worker is ready.

Matt, THis seems to be the only Repo that i could find that uses FCM, all others seem to use GCM. IF you have time, please consider writing up a high level guide for this repo. Thanks

Hi,

First thanks for the code. I like the GA Event thing, just trying going through your code. I noticed a mistake. Your file:

/src/styles/main.scss

In your index.html it says its pointing to:

/src/styles/main.css

I thought I'd let you know. Anyway, just going through your code and trying to learn more on push api. Not much information out there on the payload/encryption side (which is the only thing I need to learn now).

main.js:220 PermissionStatus.status is deprecated and will be removed in M47, around November 2015. Please use PermissionStatus.state instead.

https://simple-push-demo.appspot.com/redirect.html?redirect=javascript:alert(/pwnd/)

Is web push notifications compatible with offline cache via service workers? Something like: if the browser is online, then everything proceeds as it normally would; if the browser is offline, the request is saved to IndexedDB, and each time the service worker script starts up it will attempt to "replay" those saved requests, (giving up after one day has passed).

Looks like an interesting use case.

Hi,
https://github.com/gauntface/simple-push-demo/blob/master/app/scripts/push-client.es6.js#L71
checks for 'permissions' in navigator. This isn't supported in Fx44 which we launched Push support. Can you change it to: 'permission' in Notification . I might be able to do a PR shortly

Would you be open to it? I would be happy to do it.

First, thanks for this great demo!

I'm really liking this, but disappointed I can't even send a topic-string or any id through to Chrome with the PushEvent to resolve a specific data payload. I guess there is always event.timeStamp :-(.

I see that Firefox supports the PushEvent.data property, but have found other evidence via MDN that suggests that GCM will not even support a data payload for web-push, which contradicts the GCM doc.

Questions

1. Is the data limitation totally in Chrome, or also partly in GCM?
2. Is there an issue/thread I can monitor for Chrome development progress besides this one?
3. Are there any alternatives to GCM for the 'web push' space?

Thanks again for this demo, and thanks for taking the time to read my questions.

The Enable Push Notifications prompt/button is never enabled.

As now, we have to select the whole text and copy/paste it, I thought it would be nice to add a quick "click to copy" functionality; like those we have on the Material Design Lite website-which is exactly the one I thought adding.

I have downloaded zip file and extracted it on my website in a test folder Found following reference file name errors and corrected the file names in the folder

main.es6.js ===must be===> main.js
encryption-test.scss ===must be===> encryption-test.css
main.scss ===must be===> main.css

The enable push notification slider is not active unable to slide

Did change my API Key and project Id but can't get it working

Don't know if I am missing something, can you help my demo url is

https://4u2shop.co.za/test/test6/

Thanx
Johan

Where is the "Add Payload Text" version?
Thx a lot.

Hello
3 days i work to fiend problem ,and i use this script to save users only and
https://github.com/web-push-libs/web-push-csharp
to send message.

i saw that all the pepole that register from this script with ID that start with fcm i can send the notification but all the pepole that start with android (gcm ) i am get the error on the title .

also i am fiend code that work fine with gcm (android ) but it make only gcm ID this is the code:

i am add link also to manifest.json

how we can do that the problem will be fixed, this is link to stackoverflow that i open to more info
http://stackoverflow.com/questions/44042472/web-push-unauthorizedregistration-error-400

I have tested the simple-push-demo on chrome, safari and firefox.
Firefox is the only browser that works for me. Is there some tweaks that needs to be
implemented?

Can I get a sample php code or demo for sending push notification from server.
I've tested the demo on a local server but I can't seem to go about how to send custom from a hosted server.

I don't want notifications when tab to my site is closed. It is confusing to the user. How can I check in the service worker that a tab is open? Or can I set the listener in the tab, instead of registering a service worker?

When the browser is closed, why doesn't service worker shows the push notifications.

i got an error (404 does not exist) on fetching the main.js and main.css files which are used in the index.html view.

Sorry, but because the web push protocol requires a stream as the body of the request, there is no CURL command that will stream an encrypted payload.

rather than a CURL command.

I am using Web Push protocol to send push notifications. I have registered a service worker and subscribed successfully with pushManager in one tab. When I send messages push event able to receive notification and logs the messages in console.

I am opening the same url and same service worker is getting registered and returning same subscription using below snippet.

serviceWorkerRegistration.pushManager.getSubscription()

But when I send messages, first tab only logs the messages in console. second tab is not logs the messages in console.

When I close the first tab and send messages, now I am able see the messages in second tab console logged by service worker.

Note: Both the tabs loaded in same origin. Example: https://localhost:8080/WebPush

Below is my service worker code

self.addEventListener('push', function(event) {
  if (event.data) {
     console.log('This push event has data: ', event.data.text());
  } 
  else {
     console.log('This push event has no data.');
  }

});
At the same time when I try using firebase , I am able receive messages in both the tabs.

Can you help me out to receive messages on both the tabs using web push.

I have raised this case in stackoverflow also. Please let me know the possibilities to achieve this.

Thanks in advance.

Hello, I found that script send data to url https://simple-push-demo.appspot.com/api/v2/sendpush
Could you share you code from this resource?

Hi,

Thanks for your great job!

Its working on my local using gulp. Can you please tell how I can use this for my website. I have uploaded all the files on my domain but its not working for me.

Can you please help me

print event.data pushed on website instead of status bar in android

Unable to Register SW
Sorry this demo requires a service worker to work and it failed to install - sorry :(

FYI, if I'm surfing using Monitor #2 and you want a push notification to execute after some user action on the website, the notification can go lost, especially if your setup is [Monitor2] | [Monitor1]

You need single quotes since the JSON body contains double quotes already.

Hi

When I visit https://gauntface.github.io/simple-push-demo/
I click slider for Enable Push Notifications
I enter text 'Test' in field Add Payload Text
I click SEND A PUSH VIA XHR

What I expect to Happen
I see an Android notification 'Test' in the taskbar

What actually happened
I saw a Chrome dialog asking me to add guantface.github.io to the homescreen
After accepting to add to the homescreen, subsequent clicking of SEND A PUSH VIA XHR did not give a Android notification

Environment

Android 7.0
Nexus 6

Additional notes

I also tried the above scenario on a Samsung S6 running Android 6.0.1 and had the same outcome.

Thanks

how would i integrate the code to enable notifications on my website? I downloaded the code but when i change gcm_sender_id and api_key from files, it doesn't work.
Do I have to change PUSH_SERVER_URL in main.js? @gauntface

In your example use a backend server. How to work him?

The Enable Push Notifications prompt/button is never enabled.

Last one :-)

Is there anyway we can send data with registration_ids, such as message + title? How do I read it in serviceworker.js

I've noticed https://developer.mozilla.org/en-US/docs/Web/API/PushEvent but don't seem to work in Chrome.

Appreciate any guidance.

Across Browsers and OS

curl or send a push via xhr throw exception UnauthorizedRegistration

On Click of SEND A PUSH VIA XHR will shows push notification.

But in real Scenario Users Don't Click Buttons to get push notification. Those has to be done on backend, and it should send automatically to browser, so that service workers recognize push notification from server isn't ?

How to approach that ?

Hosted the demo here: https://gothania.com/simple-push/src/

It works without issue on firefox v 48.0.2 windows 7
but not on firefox 48.0.2 on mac osx 10.11.6
also not on safari 9.1.3 on mac osx 10.11.6

Enabling notifications correctly gets the prompt from chrome, but nothing happens thereafter:

(Thanks for your work on this demo! Navigating the web push API has been a big pain point for me and I appreciate this resource a lot.)

[19:02:00] Task 'serve' is not in your gulpfile
[19:02:00] Please check the documentation for proper gulpfile formatting

The deployed version of https://simple-push-demo.appspot.com/service-worker.js triggers the dreaded "This site has been updated in the background." warning notification.

That's because it doesn't waitUntil registration.showNotification resolves. Specifically it has the following minified source code (prettified by DevTools):

function showNotification(t, e, o, i) {
    var n = {
        body: e,
        icon: o ? o : "images/touch/chrome-touch-icon-192x192.png",
        tag: "simple-push-demo-notification",
        data: i
    };
    self.registration.showNotification(t, n)
}

The last line should be return self.registration.showNotification(t, n). I notice this is fine in https://github.com/gauntface/simple-push-demo/blob/master/app/service-worker.js, so it seems either:
a) the site just needs to be redeployed; or
b) the minifier is breaking this.

Can you please explain a bit why all that [ciphers, crypto, vapid] things? What is required for?

Tested with node.js 0.12.9:

• npm-warnings:

npm WARN package.json Dependency 'express' exists in both dependencies and devDependencies, using 'express@^4.13.3' from dependencies
npm WARN deprecated [email protected]: Please use gulp-cssnano instead.
npm WARN deprecated [email protected]: Consider using gulp-htmlmin instead
npm WARN peerDependencies The peer dependency continuation-local-storage@~3 included from cls-bluebird will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN deprecated [email protected]: this package has been reintegrated into npm and is now out of date with respect to npm
npm WARN deprecated [email protected]: lodash@<2.0.0 is no longer maintained. Upgrade to lodash@^3.0.0
npm WARN optional dep failed, continuing [email protected]

• gulp serve:

Task 'serve' is not in your gulpfile
-> should be node app

• in app.js line 11:

SyntaxError: Use of const in strict mode

It seems like sequential notifications are replaced instead of showing You have X weather updates. Any ideas on how to fix this?

https://github.com/gauntface/simple-push-demo/blob/c59520bd82f2ff6c673869b03cc266f83dd9b0a2/app/scripts/push-client.es6.js#L107

Hi, this is not an issue but a question. I checked multiple pwa and yours is the only one that has that label on Android. I looked into your code but I didn't find something related to this.

Any suggestions?