Skip to content

leegeunhyeok/web-push

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

29 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

top

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

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:your@domain.com",
      "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

main

notification

About

πŸ”” Web Push | Getting Started

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published