gauntface / web-push-book

Web Push Book

web-push-book.gauntface.com

Building the Site

This site is built and deployed weekly via GitHub actions, so for an up-to-date set of steps look at .github/workflows/publish.yml.

Requirements

• Node
• Golang
• Hugo (specific version enforced by gulp)

$ go get -u github.com/gauntface/go-html-asset-manager/cmds/htmlassets/
$ go get -u github.com/gauntface/go-html-asset-manager/cmds/genimgs/
$ npm install
$ npm run build

web-push-book's Issues

Add Template to PR and Issue to Tag Me

This will let it show up in octobox.

Transform the web book into a PWA

Add a Service Worker and a manifest to make the site readable offline, and transform the web book into a Progressive Web App!

Example: Resilient Web Design.

(If I find time I will suggest a PR)

Figure out ES5 vs ES2015 for all source code

Future Changes

PushSubscriptionChange:

• Spec Changes: w3c/push-api#234
• Peter Notes: w3c/push-api#120
• Permission Revoked MAY result in pushsubscriptionchange to be fired: w3c/push-api#116

Cover use of notificationclose event

Future of Push

• Inline reply
• Budget API

getSWRegistration not explained or covered

Add Common Errors

• Messages from GCM.
• Messages from FCM.
• Messages from Mozilla Autopush.
• Default Notification
• No Manifest
• Empty Manifest / no gcm_sender_id

Add to Constributors List

• https://github.com/MAKOSCAFEE

Add info about how to run/develop their own web push server/endpoint

Add info about web push server/endpoint architecture (e.g. https://mozilla-push-service.readthedocs.io) and open source projects (e.g. https://autopush.readthedocs.io, https://github.com/mozilla-services/autopush) for all who want to run/develop their own web push server/endpoint.

Include feature detect of notification features

Discourage use of gcm_sender_id.

Must subscribers list be kept secret?

Must subscribers list really be kept secret?

See https://github.com/gauntface/web-push-book/blob/master/src/demos/node-server/index.js#L128-L129.

What can be done with items from subscribers list without private key?

Replacing Service Worker

https://twitter.com/Rich_Harris/status/795971876275257344

Service worker folks: are there any best practices around grandfathering push notification subscriptions, ie. new worker retains old sub?

Receiving a 2nd notification before the 1st one has been fired (and aggreggating both of them)

Trying to bypass the size limit of push messages, I'm sending several push notifications that get aggregated by the browser.

But sometimes, irregularly and randomly, the 2nd notification is received before the 1st one is fired.

Then calling registration.getNotifications when the 2nd notification is received returns an empty array, the 1st one hadn't been fired.

To circumvent that, on server-side I'm sending notifications using setTimeout, something like that:

notifications.map((notification, index) =>
    setTimeout(() => sendNotification(notification), 150+index*150)
)

On client-side, I'm trying to force sequential firing of notification using setTimeout, but unsuccessfully.

Is there a way to aggregate these notifications when they're received in a very short delay ? Or would it be a bug ?

This happens on Android Chrome 59, Beta and Dev, and on Chrome 59 (Linux).

Cover Notifications vs Data Messages in FCM SDK

For more context, see #40

Fix links for companion site

From: web-push-codelab.appspot.com/
To: https://web-push-codelab.glitch.me/

Can't send push notification to multiple devices

I've deployed https://github.com/gauntface/web-push-book/tree/master/src/demos/node-server app to Heroku: https://limitless-lowlands-14011.herokuapp.com

I can't send push notification to multiple devices. Something strange happens.

I've opened deployed app in Chrome browser on my Nexus 5 smartphone and subscribed to notifications, pressed "Trigger push message" button on admin panel and received push notification on the smartphone. Subscriber list contained only 1 id. All is ok.

Then I've opened deployed app in Chrome browser on my desktop and subscribed to notifications, pressed "Trigger push message" button on admin panel (using desktop) and received push notification only on desktop. I have not received push notification on the smartphone. Subscriber list contained 2 ids. I've also tried to additionally test it by pressing "Trigger push message" button on admin panel, but on my smartphone, but still received push notification only on desktop.

After that I've opened deployed app in Chrome browser on my Nexus 9 tablet and subscribed to notifications, tried to press "Trigger push message" button on admin panel using desktop, smartphone and tablet, but still received push notification only on desktop. Subscriber list contained 3 ids.

Additionally I've tried to open deployed app in another Chrome browser instance on my desktop (Chrome Canary) and in Firefox browser on my desktop — the same result — still received push notification only in Chrome on desktop. Subscriber list contained 5 ids.

Why the app doesn't send push notifications to all subscribers?

Add FAQ about Site has been updated in the background.

Typos

on page https://web-push-book.gauntface.com/chapter-06/01-non-standards-browsers/
paragraph 5
Intead of :
In this section we are going to look at we can add support for these browsers.
Write:
In this section we are going to look at how we can add support for these browsers.

on page https://web-push-book.gauntface.com/chapter-05/01-push-events/#the-push-event
paragraph 1
instead of :
When a message is received, it’ll result in a push event being dispatched in you service worker.
write :
When a message is received, it’ll result in a push event being dispatched in your service worker.

Include UX of a Notification

At the moment we have UX for permissions.

getSWRegistration confused a developer

Add AnchorJS

http://bryanbraun.github.io/anchorjs/

Add Tallon1252 to Contributors

@Tallon1252 feel free to PR this in - otherwise I'll get it done as soon as possible :)

Update firebase server key info.

https://mozilla-services.github.io/WebPushDataTestPage/

Add info: https://mozilla-services.github.io/WebPushDataTestPage/

How to run it?

I've followed the steps to run site locally but I need to set up the demos
I did rvm . do bundle install
Now what?

Add Note on Where To Ask Questions

Getting a number of questions and would be better to direct to Github.

FAQ: How Do I Avoid Lots of Pushes When The Browser Opens?

How Do I Avoid Lots of Pushes When The Browser Opens?

// TODO: Research lots of pushes arrive on the browser and how it's handled
in terms of push events.

Add jeznag to contributors list

cc @jeznag as an FYI.

Add FAQ on display notification from window

Call out the image formats supported for notifications

Call SVG's are not supported.

https://bugs.chromium.org/p/chromium/issues/detail?id=478654

Cover Debugging Push in Chrome

notification.permission

Should use the permission API.

If not fall back for notification.permission BUT only call once.

Cover subscribing / unsubscribing

https://bugs.chromium.org/p/chromium/issues/detail?id=638924#c7

Firebase Cloud Messaging is not fully Web Push spec compliant

Firebase Cloud Messaging (SDK, not endpoint) currently? is not fully Web Push spec compliant. It uses non-standard, e.g. "click_action" instead of "actions", and doesn't support many standard, e.g. "image", "badge", "sound" and etc., keys for notification messages. See Table 2c on https://firebase.google.com/docs/cloud-messaging/http-server-ref#notification-payload-support page.

Please add info about it to https://github.com/gauntface/web-push-book/blob/master/src/_content/chapter-07/01-faq.md#firebase-has-a-javascript-sdk-what-and-why.

Lighthouse Results

• Accessibility
• Add Manifest
• Reduce request chain?

Add Milestones Page

Chrome M51 Payload support (March 2016)
Samsung Payload support on Samsung Beta (March 2017) (See internet://version)

Cover what base64ToArray does / why it's needed.

Feedback from @nikmd23: The book doesn't really cover the base64toarray function you have to use on the pub key. Perhaps you'd like to add an aside with its implementation?

Notice on de-dupe intent to experiment

https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/j-e8iI-WWg8/OjoJbm_zCgAJ

Demo TODOs

• Add notes on how to trigger pushcurl -X 'POST' http://localhost:9012/api/trigger-push-msg/

Make it clear that UX permission is using permission API

See thread from here: https://twitter.com/nekrtemplar/status/858596967538204673

Remove VAPID private key from github

https://github.com/gauntface/web-push-book/blob/master/src/demos/node-server/index.js#L18

In the book, you say, keep your private keys private :P

Add content on LocalStorage / IDB to check change

Cover Analytics in Push

Cover event dispatching (i.e. multiple listeners)

Placement of next arrow

The button for the next page falls out of the normal viewport for me (screenshot included). Was wondering if it's just my browser somehow or if it's even an actual issue

Kinda like how the back button lines up

Questions for PB

• Is the info in HKDF used for ensuring decryption was successful or something else?

Beta Release

• Finish Demos
• Finish Sample App
• Cover 410 to remove subscriptions
• Cover 404 for expired subscriptions.....
• Move around to covering the use of libraries first
• Change over encryption and headers

Make sure the following linking is obvious

• Customise notification behaviour
• How to implement encryption and vapid and web push protocol