1. [vite-pwa/nuxt](https://github.com/vite-pwa/nuxt/tree/main/playground) nuxt.config.ts 파일 참고해서 PWA 1차적으로 구현,
2. [서비스 워커에 registration 과 pushSubscription 생성](https://web.dev/articles/push-notifications-subscribing-a-user?hl=ko) - 생성전에 애플리케이션 서버 키 필요함. ( 해당 페이지 참고 )
3. [푸시이벤트 등록 및 데이터 출력 ](https://web.dev/articles/push-notifications-handling-messages?hl=ko#the_push_event)
4. [설정 방법 ](https://vite-pwa-org.netlify.app/guide/inject-manifest.html) / [읽을 만한 글](https://github.com/vite-pwa/vite-plugin-pwa/issues/84)
5. push 이벤트 보내는 법 - https://www.npmjs.com/package/web-push
web-push
Web Push library for Node.js. Latest version: 3.6.6, last published: 3 months ago. Start using web-push in your project by running `npm i web-push`. There are 180 other projects in the npm registry using web-push.
www.npmjs.com
이정도 자료면 충분히 구현 가능함.
간단하게.. 요약하면 PWA는 워낙 유명하니 제외..
wervice워커 Subsriber를 만들고, 워커 쪽에 push 이벤트 리스너를 등록해둔다.
서버쪽에서 subscriber 정보를 저장해둔다음 필요할때마다 webpush로 메시지를 보내주는거다.
그게 끝임.
이게 WebPush라는 형태에 맞게끔 메시지가 전달되어야 되기 때문에, postman이나 curl 같은걸로는 메시지를 보낼 수 없음.. WebPush 모듈 깔기 싫어서 몇분 찾다가, 답이 없는걸 보고 그냥 npm으로 web-push 모듈 깔아서 테스트 해보니 정상적으로 잘 동작하는걸 확인.
'일상I생각' 카테고리의 다른 글
| 아시아문화전당 무엇이든 루돌프 수강후기 (1) | 2023.12.18 |
|---|---|
| 삶의 여러가지 방향 (0) | 2023.12.08 |
| 믿음이란..? (0) | 2023.12.01 |
| 현실은 제대로 보자 (5) | 2023.11.29 |
| 나는 잘 모르겠다 (2) | 2023.11.15 |