gauntface/simple-push-demo

Unable to Register SW

ZiadJ opened this issue ยท 10 comments

ZiadJ commented

The demo page gives this message: "Sorry this demo requires a service worker to work and it failed to install - sorry :("

Try using https

you should automatically redirect http to https imo

Also the service worker in this demo uses Google Analytics to track push, notificationclick and notificationclose events. So ad blockers may prevent the service worker to be installed.

Try to disable ad blockers in your browser.

Sorry for the insane lag on this.

I'm planning on a large change to this demo to make it easier for me to maintain and this should get addressed as part of that:

  1. Move backend proxy to lambda so it's something I can maintain going forward
  2. Improve the scripts by:
    • Move to TS so I get type checking
    • Use async and await instead of promise chains
    • Remove old / redundant code (i.e. legacy GCM support)
  3. Remove the analytics logic. This was done as a proof of concept but seems to cause lots of problems.

I may move the frontend to S3 so I can manage the HTTP -> HTTPS logic, but we'll see.

@gauntface

Move backend proxy to lambda so it's something I can maintain going forward
I may move the frontend to S3 so I can manage the HTTP -> HTTPS logic, but we'll see.

What about Firebase Hosting for frontend and Firebase Cloud Functions for backend (CORS proxy)?

Move to TS so I get type checking
Use async and await instead of promise chains
Remove old / redundant code (i.e. legacy GCM support)

PTAL at https://github.com/jimmywarting/jimmy.warting.se/tree/master/packages/webpush and https://github.com/alastaircoote/webpush-webcrypto. ๐Ÿ˜‰

@jimmywarting Are there any plans to create a npm package from your https://github.com/jimmywarting/jimmy.warting.se/tree/master/packages/webpush?

I like how you cleaned the @gauntface's https://github.com/gauntface/simple-push-demo/tree/main/frontend/scripts/encryption code. ๐Ÿ‘

Also I like the JSDoc instead of TypeScript approach (1, 2).

This npm package could be used in this demo. ๐Ÿ˜‰

It seems Web Crypto API (along with ES Modules) is currently supported in Node.js (https://www.nearform.com/blog/implementing-the-web-cryptography-api-for-node-js-core/) and Deno (https://www.infoworld.com/article/3648354/deno-118-completes-web-crypto-api.html), not only in browsers.

So this universal npm package could replace the Node.js-only https://github.com/web-push-libs/web-push npm package that can't be used in browser.

As an idea, it could be 2 npm packages, e.g. web-push-core and web-push-cli to completely replace the https://github.com/web-push-libs/web-push npm package.

If you're interested, I'd be happy to contribute. ๐Ÿ˜‰

I could make a mom release of it if you like.

@gauntface

I'm planning on a large change to this demo

I expect from the new demo something like a step by step tutorial that helps developers a way to understand and audit the various encryption bits needed to send data via web push protocol. Something like https://mozilla-services.github.io/WebPushDataTestPage/ (https://github.com/jrconlin/WebPushDataTestPage) and https://tests.peter.sh/push-encryption-verifier/ (https://github.com/beverloo/peter.sh/tree/master/tests/push-encryption-verifier).

I've shy'd away from Typescript for now, largely because I really like not needing a build process to make this demo run.

JavaScript modules + async/await seems to be enough to help cleanup the logic.

@FluorescentHallucinogen I should add links to those sites because I've definitely used them in the past.

Analytics was removed to reduce noise, @FluorescentHallucinogen added links to those pages and I've raised a number of cleanup PRs.

The switch to vercel for hosting has HTTP => HTTPS which should address the original issue.