gauntface / simple-push-demo Goto Github PK
View Code? Open in Web Editor NEWA simple example of use push notifications on the web using Service Workers
Home Page: https://simple-push-demo.vercel.app/
License: Apache License 2.0
A simple example of use push notifications on the web using Service Workers
Home Page: https://simple-push-demo.vercel.app/
License: Apache License 2.0
At the moment the button made be enabled before the service worker is ready.
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 ?
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.
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
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.
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
app.js
line 11:SyntaxError: Use of const in strict mode
Across Browsers and OS
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
curl or send a push via xhr throw exception UnauthorizedRegistration
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
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.
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.
Unable to Register SW
Sorry this demo requires a service worker to work and it failed to install - sorry :(
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
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
Thanks again for this demo, and thanks for taking the time to read my questions.
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
print event.data pushed on website instead of status bar in android
The Enable Push Notifications prompt/button is never enabled.
Last one :-)
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.
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.
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
<script type="text/javascript"> function base64UrlToUint8Array(base64UrlData) { const padding = '='.repeat((4 - base64UrlData.length % 4) % 4); const base64 = (base64UrlData + padding) .replace(/\-/g, '+') .replace(/_/g, '/'); const rawData = atob(base64); const buffer = new Uint8Array(rawData.length); for (let i = 0; i < rawData.length; ++i) { buffer[i] = rawData.charCodeAt(i); } return buffer; } (function() { if (!('serviceWorker' in navigator)) { return; } return navigator.serviceWorker.register('service-worker.js') .then(function(registration) { console.log('service worker registered'); return navigator.serviceWorker.ready; }) .then(function(reg) { var channel = new MessageChannel(); channel.port1.onmessage = function(e) { window.document.title = e.data; } reg.active.postMessage('setup', [channel.port2]); var subscribeOptions = { userVisibleOnly: true }; // Figure out the vapid key var searchParam = window.location.search; vapidRegex = searchParam.match(/vapid=(.[^&]*)/); if (vapidRegex) { // Convert the base 64 encoded string subscribeOptions.applicationServerKey = base64UrlToUint8Array(vapidRegex[1]); } console.log(subscribeOptions); return reg.pushManager.subscribe(subscribeOptions); }) .then(function(subscription) { console.log(JSON.stringify(subscription)); window.subscribeSuccess = true; window.testSubscription = JSON.stringify(subscription); }) .catch(function(err) { window.subscribeSuccess = false; window.subscribeError = err; }); })(); </script>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
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.
https://github.com/gauntface/simple-push-demo/blob/c59520bd82f2ff6c673869b03cc266f83dd9b0a2/app/scripts/push-client.es6.js#L107
[19:02:00] Task 'serve' is not in your gulpfile
[19:02:00] Please check the documentation for proper gulpfile formatting
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.
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
Would you be open to it? I would be happy to do it.
In your example use a backend server. How to work him?
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?
Can you please explain a bit why all that [ciphers, crypto, vapid] things? What is required for?
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
When the browser is closed, why doesn't service worker shows the push notifications.
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?
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]
It seems like sequential notifications are replaced instead of showing You have X weather updates.
Any ideas on how to fix this?
The Enable Push Notifications prompt/button is never enabled.
You need single quotes since the JSON body contains double quotes already.
Where is the "Add Payload Text" version?
Thx a lot.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.