Web Push Libraries

[sergioburdisso]

Hi! When I completed the codelab, went straight to the Web Push Libraries to implement the "server side part" of the whole story. Tried to integrate the pywebpush library to my project but I found out it wasn't as straightforward as it should be (at least for me) and finally ended up coding solidwebpush, a library that works right "out of the box" for someone who has completed the codelab. It may be useful for someone else working with python too... idk...

[gauntface]

@marco-c What do you think of adding this to the web-push org? Or would be be better to capture the differences in solidwebpush and try and make the appropirate changes to pywebpush?

[marco-c]

@sergioburdisso what did you find about pywebpush that was not straightforward? Does solidwebpush support all the features in pywebpush?

I would prefer having a single library for each language (indeed I think we should remove one of the two Java ones). If solidwebpush supports everything and it is simpler to use than pywebpush, I would be open to replacing it. If the changes are small, it might be better to just evolve pywebpush.

I'm also CCing @jrconlin who worked a bit on pywebpush.

[sergioburdisso]

Hi @marco-c ! First things first, my intention was never to replace pywebpush, I just thought that for someone who has finished this codelab, having used the companion site to send push messages by only giving the subscription object and some text to be sent, it would have been better to have a library exposing that same "interface" to the users/developers. Hiding as much "technical details" as possible, putting all HTTP headers stuff, VAPID, JWT, key generations, etc. "under its hood", so user can send push messages knowing only what they already known, which is "I give a subscription object and some text and it'll be sent to the client" (as with the companion site).

I don't really know if it supports all the features in pywebpush since, as I said, my intention was never to replace it... but if what it does is just notify "Web clients" with a given payload, then I guess it does... sorry if I'm bothering you guys... u_u

[gauntface]

You aren't bothering at all.

The companion site doesn't hide any of this for you - but it is a site for a code lab and gives you everything you need.

You are using VAPID by using the companion site (That's what the application server keys are).

I think there is something to be said for the web - push APIs matching the specs more than what developers actually use in their code.

Maybe it would be better if @sergioburdisso could raise some issues of why pywebpush was difficult / concerning to use - it may just be a Readme / docs issue.

[jrconlin]

100% in favor of a simple library that makes all the crap required to send messages invisible from users. Folks have enough to deal with, having to dork around with a library or weird API shouldn't be one of them. I'd love to know what the sore points about pywebpush are (sorry, can't really spend my days scrubbing StackOverflow for questions).

It looks like solidwebpush is pretty similar, except that you pass the subscription info as a parameter to send. Frankly, a pretty valid thought is that most folks aren't going to be sending multiple messages to an endpoint (more just blasting through a list of endpoints sending one message to each one). It might make sense to have a single function that takes subscription info, an optional VAPID info block, and the data blob and does all the magic.

No one will ever hurt my feelings if they want to use something other than pywebpush. I built that mostly for my own ends. Frankly, i'd love getting pointers to better libraries so that I can tell other folks about them.

[sergioburdisso]

@gauntface Of couse we four know that we're using VAPID by using the appllication server key U_U, when I said "for someone who has finished this codelab" I meant:

1. Someone who doesn't know what VAPID is (not even the word VAPID appears in the codelab, and that's OK) but at the same time, he's using it without being aware of it.
2. Someone who doesn't know how everything really works under the hood.

Imagine you wake up in the morning and say to yourself "today I feel like adding web push notifications to my web app", then you google "adding web push notifications to my web app", start doing this great codelab (it's really good and helpful, seriously), once you have completed, at the bottom of the codelab a link to a list of webpush libraries is given, you're so exited because you're this close to add web push notifications to app, only the server part remains; click on pywebpush to find something like this:

WebPusher(subscription_info).send(data, headers, ttl, gcm_key) headers is a dictionary of additional HTTP header values (e.g. VAPID self identification headers)

VAPID? headers? ttl? what?... and that's it, VAPID links to pyvapid, once again, no documentations or examples... you feel lost and probably decide to give up on adding Web Push Notifications to your app.

Instead, what I tried to accomplish with solidwebpush was: once you've finished, you continue reading the example here, and that's it, you'll end up integrating web push in your application, for instance, not being aware that you're using VAPID (among other things), note that not a single "technical word" is given in the API documentation or in the README file of solidwebpush.

As I said, I think solidwebpush is not a replacement for pywebpush, since it only works implementing VAPID (not the GCM API), so it is sort of an "easy-to-use" library for those who want to implement VAPID-based push notifications (for instance, those who've learned the "client part" from this codelab, even if they're not aware of it).

[gauntface]

I move this over to the pywebpush repo.

[z3nix]

@sergioburdisso is perfectly on point. I'm totally new to all of this and I've spent a good number of hours over the past few days trying to get the PHP library going and almost gave up until I saw his python lib, which I'm going to check out now.

Basically, the tutorial is really, really awesome (thank you, Matt!) and it was very exciting to get that first push notification. But why have an example server that would never be used in a real world scenario? I don't understand why you didn't just finish the tut -- maybe you are really busy? I dunno. But for me it was all work up and no finish lol

Thanks to everyone, though. You guys are all really great for putting all of this together, I'm so close to finally getting it up and running on my server and I owe it to you!

[gauntface]

@z3nix - PLEASE PUBLISH FEEDBACK ON THE LIBRARIES!!!

Without feedback from users of the libraries, there is no hope of them improving. If you struggle with something, or the setup doesn't work in your environment or the API isn't easy to use, raise an issue on the project.

This codelab would balloon in size with way too many options to cover all the server side pieces required to get a complete, production ready push process.

IF you want to look at a full, client side and server side demo I have some code here: https://github.com/gauntface/web-push-book/tree/master/src/demos/node-server

Server side walk through here: https://web-push-book.gauntface.com/chapter-04/01-sending-messages-with-web-push-libraries/

[z3nix]

Hi @gauntface I apologize if I am not contributing enough or properly, I'm completely self-taught and doing my best.

At the moment I have already dived into the nodejs library and I've managed to install the web-push-book into a folder on my dev server, installed all dependencies under the folder and ran node src/demos/node-server/index.js to which I got:

Running on http://localhost:9012

I updated index.js and app.js in the approprioate places to reflect the root folder of the app server. Then I visited src/demos/node-server/frontend/ in my browser and got the following in my js console when subscribing:

Service worker successfully registered.
app.js:141 Received PushSubscription:  {"endpoint":"https://fcm.googleapis.com/fcm/send/d1Lcs8HBZOc:APA91bEZ7VqqiNPt5x2mOajIN90…8DgZ8767QCIAvQffFT6A7HArX7I2vi4biNASe0KcU0DSE32peUgW_abSSacVkG5Q2FrcEQXbC7","keys":{"p256dh":"BGjYR_6SkRIEUcx1Zhlzd884hnFry92iCC8aCWvEoSMHe8SKG_r-KtgIVqUxmEpZ5E8A8ePn4fNnwRwWbdFbH4w=","auth":"muhhU2kHQY0vgzT1fFi0mQ=="}}
app.js:193 Failed to subscribe the user. SyntaxError: Unexpected token / in JSON at position 0

I noticed the file subscription-store.db is still empty, so I believe the data isn't being transferred properly to my node server (express??).

Forgive my ignorance, but I don't know exactly what is throwing that error. Is it the nodejs web-push library, the nedb database library, the express server or the index.js or app.js file? The error references app.js on 193, but all that tells me is that the user "failed to subscribe" and tracing the logic backwards is leading me to believe this is server side. However, the browser thinks the user is subscribed.

[gauntface]

@z3nix please post bugs on the relevant github repos.