Giter VIP home page Giter VIP logo

demo-push's Introduction

Local running

Setup

  1. Install dependencies

    npm install
  2. Run migrations locally

    npm run db:migrate:local
  3. Create then store new encryption keys

Web worker (Pages Function):

  1. Start the server

    npm run run:web
  2. Browse to localhost:8787

Notifier worker (cron worker):

  1. Start the notifier

    npm run run:notifier
  2. Simulate cron run:

    curl -X GET localhost:8788/__scheduled

Deploying

  1. Create the database

    npm run db:create:remote
  2. Migrate the database

    npm run db:migrate:remote
  3. Create then store new encryption keys

  4. Deploy web

    npm run deploy:web
  5. Deploy notifier

    npm run deploy:notifier

Creating keys

Keys are required for end-to-end encryption via the Web Push API. They need to generated in VAPID format. The easiest way to do this is with the web-push library. It's not needed at runtime but is an easy-to-use tool.

npm install --global web-push

Once installed, generate keys with the following command:

web-push generate-vapid-keys --json
  1. The private key needs to be provided as a secret to the notifier:
    • For local running, Enter it into src/notifier/.dev.vars: PUSH_SERVER_PRIVATE_KEY=...
    • For deployment, execute npx wrangler -c src/notifier/wrangler.toml secret put PUSH_SERVER_PRIVATE_KEY then provide the value when prompted
  2. The public key needs to be provided to the notifier and the frontend:
    • For the notifier, enter it in the vars section of src/notifier/wrangler.toml
    • For the frontend, provide it as the SERVER_PUBLIC_KEY in src/web/key.js

Web Push API - A diagram

sequenceDiagram
    actor User
    box Purple App Frontend
    participant A as Client Window
    participant B as Client Worker
    end
    box brown Not our software
    participant C as Browser
    participant OS
    participant D as Push Server
    end
    participant E as App Backend
    User->>A: Turn on notifications
    A->>C: Notifications permissions?
    A->>B: Register a worker
    A->>C: Subscribe my worker to push messages. Here's the public signing key. What's the endpoint?
    activate A
    C->>D: Make an endpoint for this worker. Here's the public signing key.
    D-->>C: Here's your endpoint
    C->>C: Generate encryption keys
    C-->>A: Here's your endpoint and public encryption key
    A->>E: Here's the endpoint and public encryption key
    E->>E: Store sensitive endpoint and encryption key
    destroy A
    User-xA: Close
    C--xB: Done with you
    Note right of E: Notification to send?
    E->>E: Encrypt and sign data
    E->>D: Signed and encrypted notification
    D->>D: Verify it's signed by expected server
    Note right of D: Can't decrypt
    D--)C: New notification
    C->>C: Decrypt
    C->>B: Wake up and deal with this
    B->>C: Notify
    C->>OS: Notify
    OS->>User: Ding!
Loading

demo-push's People

Contributors

albertnis avatar

Stargazers

Sarah Hay avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.