Comments (11)
I need to spend some time cleaning this up.
I think its using an old glitch backend and some other bits that aren't well maintained or documented. Will try and look at this next week.
from simple-push-demo.
Good!
Could you please then merge #204 first to avoid merge conflicts?
from simple-push-demo.
Oh, I've found a main
branch, and it's 4 commits ahead of master
branch.
The gh-pages is created from main
, not master
.
@gauntface Could you please remove the master
branch and make the main
branch default to avoid future contributors confusion?
from simple-push-demo.
But the server code in the main
branch and the server code deployed to the https://simple-push-demo-api.glitch.me are still different. Just compare https://github.com/gauntface/simple-push-demo/blob/13eca6424e20f2b68fc35c98028d35ab3fa8e528/server/server.js and https://glitch.com/edit/#!/simple-push-demo-api?path=server.js.
The interesting part is that both codes don't work correctly. 🙈
The code deployed to the https://simple-push-demo-api.glitch.me doesn't send the body at all:
https://glitch.com/edit/#!/simple-push-demo-api?path=server.js%3A12%3A0
That's why displaying a notification for a push with payload doesn't work:
The message payload is smaller than the smallest valid message (104 bytes)
And the code in the main
branch doesn't decode the body from Base64:
simple-push-demo/server/server.js
Line 50 in 13eca64
That's why displaying a notification for a push with payload doesn't work:
The public key included in the binary message header must be a valid P-256 ECDH uncompressed point that is 65 bytes in length.
from simple-push-demo.
Thank you for all the digging here.
This project got very little attention as the server had to moved around a lot and I didn't give it the time it needed.
I'm putting together a page that should make debugging this a little easier because even with the inclusion of the body, the request doesn't seem to be valid and comparing to web-push there are differences.
from simple-push-demo.
Small update on this - I go the server working locally with payloads, however, I've broken glitch with a memory issue.
I'll probably look at a different hosting solution and GitHub -> Glitch doesn't seem particularly clean.
from simple-push-demo.
I've broken glitch with a memory issue.
Consider Firebase Cloud Functions. 😉
simple-push-demo/frontend/scripts/app-controller.js
Lines 259 to 267 in 8249042
By dropping Base64 conversion I mean sending fetch()
request to CORS proxy "as is" with body
of type ArrayBuffer
and pass the original push endpoint address in the request header, e.g. X-Endpoint
. That's exactly what @beverloo did in his demo https://tests.peter.sh/push-message-generator/. In this case, there is no need to JSON.stringify
and convert the body to Base64. See https://github.com/beverloo/peter.sh/blob/aa735a65e42e3d86db3d12adf72dcea666a212f6/tests/push-message-generator/push_generator.js#L779-L791.
Also, what about using cors-anywhere
npm package for CORS proxy?
@beverloo Any plans to enable CORS for https://fcm.googleapis.com/fcm/send/ so it can be used directly from the browser without the need for the CORS proxy?
from simple-push-demo.
@FluorescentHallucinogen I'll take a look and see if the server is needed at all. If we can stream the content to FCM then I can make the request with 'no-cors'.
I think when I first made this demo the content wasn't a stream and worked, then it required a stream but the fetch API didn't support it, so I introduced the proxy server.
I'll probably do a pass of topics and break out this bug into smaller chunks.
For now I've moved hosting to vercel.
from simple-push-demo.
I'll take a look and see if the server is needed at all. If we can stream the content to FCM then I can make the request with 'no-cors'.
Unfortunately, you can't, because you can't use headers like Authorization
, Content-Encoding
, etc. with no-cors
. See https://stackoverflow.com/a/44748092 and https://stackoverflow.com/a/44987520 for more info.
from simple-push-demo.
BTW, my initial idea instead of implementing #204 for displaying and sending the payload via CURL has been displaying the fetch()
code instead of CURL command.
As an idea, I could make a pull request that adds displaying the fetch()
code in addition to the CURL command and a hint to add --disable-web-security
console line argument for Chromium-based browsers.
from simple-push-demo.
I think I've addressed most of your questions in the first batch.
Could you please update the code in this repo?
Done
Any plans to place the code of https://simple-push-demo-api.glitch.me/api/v3/sendpush to the repo?
Done
Also found
simple-push-demo/src/scripts/app-controller.js
Lines 283 to 289 in 3b55ad9
// Can't send a stream like is needed for web push protocol,
// so needs to convert it to base 64 here and the server will
// convert back and pass as a stream
if (requestInfo.body && requestInfo.body instanceof ArrayBuffer) {
requestInfo.body = this.toBase64(requestInfo.body);
fetchOptions.body = requestInfo;
}In fact, this is not true. The body for fetch() can be ArrayBuffer. There is no need to >convert it to Base64. I've tried to make the network request to the push service directly >from the browser via fetch() with body of type ArrayBuffer. And it worked!
Raised separate issue for this.
The only problem I faced is that https://fcm.googleapis.com/fcm/send/ requires CORS (this >problem can be bypassed by --disable-web-security console line argument for the browser). >That's why this demo requires the CORS proxy. Although the > >https://updates.push.services.mozilla.com/wpush/v2/ works like a charm!
I'm trying to make this something where folks can learn about web push and it's encryption from the browser without needing to go anywhere else, include using specific flags or pulling our a separate tool (i.e. node). So I wouldn't encourage the use of the extra flag.
Any plans to drop the Base64 conversion?
See new bug
Also found
[simple-push-demo/src/scripts/encryption/encryption-aes-128-gcm.js]> (
)simple-push-demo/src/scripts/encryption/encryption-aes-128-gcm.js
Lines 49 to 50 in 3b55ad9
Lines 49 to 50 in 3b55ad9
if (endpoint.indexOf('https://fcm.googleapis.com') === 0) {
endpoint = endpoint.replace('fcm/send', 'wp');
Is that still required?
Nope and fixed.
See also #203.
Any plans to fix it?
Firefox worked for me using aesgcm, BUT the spec says only aes128gcm is needed. I also raised
mdn/browser-compat-data#17146 to update MDN compat table.
Can https://github.com/web-push-libs/web-push library be used in the browser? If so, any plans to migrate this project to using it instead of maintaining https://github.com/gauntface/simple-push-demo/tree/master/src/scripts/encryption files?
I don't think there are any plans to make that run in the browser and I don't think there would be much value in it because the main use case for sending push messages would be to send them from a server/backend which web-push does.
This demo is more a toy/educational tool.
That being said, if there was a way to use web-push in the browser, I would love to switch to it as it'll be more future proof (and maybe at that point the demo should be moved to the web-push-libs org).
I'm going to close this issue as I think the core problems have been fixed, but please feel free to open other issues if I've missed anything or I've introduced new problems.
from simple-push-demo.
Related Issues (20)
- add a LICENSE if you want
- doesn't work on my phone (Samsung a5 on android 7 with chrome 61.0.3163.98) HOT 2
- ReferenceError: Can't find variable: PushManager
- Ios safari is not opening the prompt box. HOT 2
- Pushing twice causes crash on Chrome android
- Unable to Register SW HOT 10
- .git folder is MASSIVE HOT 2
- service-worker.js without third party? HOT 2
- Library / minimal example / documentation HOT 5
- Not working on mobile phones HOT 2
- Push to killed Android Chrome isn't received HOT 1
- Not working with Node 10 ? HOT 1
- Simple push notification fails on Samsung Galaxy S10 HOT 1
- gulp dev does not work anymore, how can I use this client? HOT 2
- don't work in firefox HOT 1
- Rename project from simple-push-demo to web-push-demo HOT 1
- Switch to sending ArrayBuffer to proxy server HOT 1
- Testing on iOS 16.4 ( Safari, Firefox. Chrome) HOT 9
- Aborterror: Registration failed - push service error HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from simple-push-demo.