https://github.com/sky172839465/pwa-sharing
PWA sharing example
https://github.com/sky172839465/pwa-sharing
notification pwa
Last synced: 7 months ago
JSON representation
PWA sharing example
- Host: GitHub
- URL: https://github.com/sky172839465/pwa-sharing
- Owner: sky172839465
- Created: 2025-02-06T16:31:57.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-02-21T11:49:14.000Z (8 months ago)
- Last Synced: 2025-02-21T12:29:26.507Z (8 months ago)
- Topics: notification, pwa
- Language: JavaScript
- Homepage: https://pwa-sharing.pages.dev
- Size: 1.73 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
PWA sharing exmaple
https://pwa-sharing.pages.dev
### Features
- Install to web app [How](#how-to-make-website-installable)
- Fake install prompt
- Rich install
- Install & update service worker [How](#how-to-install-and-update-sw)
- No page active enter website automatic reload to install & active new service worker
- Have active page, every 10sec detect update & show update banner click to update
- Unregister servic worker
- Parallel precache files
- Notifiaction [How](#how-to-implement-notification)
- Catch notification by service worker
- Click notification to open web app or website in browser
- Click notification redirect to `/home` page
- Can update installed app unreadCount
- Unsubscribe notification
### Quick start
- Install dependencies
> `prepare` will trigger after install finish, create vapid for notification service
```shell
npm install
```
- Generate https certs (PWA requirement)
> `gen:cert` will create certs under `/cert` folder
```shell
npm run install:mkcert
npm run gen:cert
```
- Run website on localhost
```shell
npm run dev
```
- `Another terminal` Run service
> notification server, allow user subscribe & send notification
```shell
npm run dev:server
```
- Open website on `https://localhost:5173` (default, might change)
> notification service will run on `https://localhost:8080`
### Auto update service worker
- Change branch to `auto-update`
https://github.com/sky172839465/pwa-sharing/tree/auto-update
### Simulate Production
- build website & using `hono` as web server & notification server
```shell
npm run preview
```
- Open website on `https://localhost:8080`
- `Another terminal` Update client code & rebuild website to simulate production update service worker
```shell
npm run build:dev
```
### Generate icons
- Default target icon for generate is in `pwa-assets.config.js` > `public/favicon.svg`
https://vite-pwa-org.netlify.app/assets-generator/
```shell
npm run gen:pwa-assets
```
### Explain
#### How to make website installable
- Prepare web app manifests
- exmaple: https://pwa-sharing.pages.dev/manifest.webmanifest
- generate from: https://github.com/sky172839465/pwa-sharing/blob/main/pwa.config.js
- Rich install
-
Fake install prompt
- ref
- https://vite-pwa-org.netlify.app/guide/pwa-minimal-requirements.html#web-app-manifest
- https://developer.mozilla.org/en-US/docs/Web/Manifest
- https://github.com/khmyznikov/pwa-install
> **v^0.4.0 language support zh_TW incorrect**
#### How to install and update sw
- Using library or follow framework suggestion to do it (**recommend**)
- Vite + react https://vite-pwa-org.netlify.app/guide/
- NextJS https://nextjs.org/docs/app/building-your-application/configuring/progressive-web-apps
- Update strategy
- periodically check service worker changed (**recommend**)
> default browser 24hr check one time
> better use `swr` `react-query` handle when reconnect or window refocus
- automatic update
- ref: https://vite-pwa-org.netlify.app/guide/auto-update.html
- prompt for update
- example
- service worker: https://github.com/sky172839465/pwa-sharing/blob/main/public/sw.js
- prompt: https://github.com/sky172839465/pwa-sharing/blob/main/src/client/router/ReloadPrompt.jsx
- Parallel precache files
- problem: https://github.com/GoogleChrome/workbox/issues/2880
- implement: https://github.com/sky172839465/pwa-sharing/pull/26/files
- ref
- https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers
#### How to implement notification
- Prepare vapid `publicKey` `privateKey`
- example: https://github.com/sky172839465/pwa-sharing/blob/main/scripts/genVapid.js
- Client frontend
- Request notification permission from user
- After permission granted, ask `subscription` from browser service
- Send `subscription` to service
> `subscription` provide endpoint & keys allow server send request to browser service make a notification
- example: https://github.com/sky172839465/pwa-sharing/blob/main/src/client/pages/Notification/useNotification.js
- Client service worker
- Add `push` event listener to catch notification from browser service and show notification, update web app badge unread count
> Andriod unread count depend on it implement
- Add `notificationclick` event listener to close notifiction & redirect to specific web app route
- example: https://github.com/sky172839465/pwa-sharing/blob/main/public/sw.js
- Server
- Add endpoint to store `subscription`
- Using `subscription` endpoint send notification to browser service
- example: https://github.com/sky172839465/pwa-sharing/blob/main/src/server/index.js
- Ref
- https://developer.mozilla.org/zh-TW/docs/Web/API/Notifications_API/Using_the_Notifications_API
- https://github.com/web-push-libs/web-push