Web Push | Getting Started

Show article

Project

.
├── README.md
├── config
│   └── default.example.json
├── css
│   └── common.css
├── index.html
├── login.html
├── package.json
├── src
│   ├── 💻 server
│   │   ├── constants.ts
│   │   ├── logger.ts
│   │   ├── middlewares.ts
│   │   ├── server.ts
│   │   └── types.ts
│   └── 🌍 web
│       ├── index.ts
│       └── service-worker.ts
├── tsconfig.json
├── tsconfig.server.json
├── tsconfig.web.json
└── yarn.lock

• Server
  • src/server/server.ts: server entry code
• Web page
  • src/web/index.ts: page script
  • src/web/service-worker.ts: service worker script

Setup

• Pre-requirements

  • = Node 16

  • yarn

    npm i -g yarn

• create vapid key pairs

  yarn generate-vapid-keys

• create config/default.json (check config/default.example.json)

  {
    "gcmKey": "GCM API Key HERE",
    "subject": "mailto:[email protected]",
    "vapid": {
      "public": "PUBLIC KEY HERE",
      "private": "PRIVATE KEY HERE"
    }
  }

  • How to get GCM API key?
    • Visit Google Firebase Console and create project
    • Open Project > Project settings > Cloud Messaging
    • Cloud Messaging API > Server Key
• setup project

  # Install dependencies
  yarn
  
  # Build scripts (TS -> JS)
  yarn build
  
  # Start demo server
  yarn start

Done! visit http://localhost:8080

Preview