추식 알림을 해보고 싶다!!!

근데 kotlin이랑 swift 다 안 나오네~
브라우저도 웹소켓?너 그거 먹을 수 있어?
인프라 엔지니어 자신에게는 엄격하죠
...
이렇게 생각하면 서비스 워커를 사용하면 브라우저에서 간단하게 시도할 수 있다는 소문을 듣게 된다
그리고create-react-app(cra)으로 템플릿을 만들면 서비스워커의 보일러판도 달라붙어 사용하기로 했습니다.
또 필자는 앞부분에 조예가 전혀 없으니 재미, 단어 등이 틀렸다면 지적해 주십시오.

환경

linux

chromium(72.0.3626.119)

firefox dev edition(66.0b12)

인도물

step by step

등장인물

프런트엔드(react)

백엔드(적절한 웹 서버)

push 서비스(firefox는mozilla,chromium은google)

일반 종속 모듈 설치

안심할 테니 typescript로 보내주세요.
eslint는cra에 (최신판 yarn start 넣을 때 욕을 먹는다)

yarn create create-react-app pj --typescript
cd pj
yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser @typescript-eslint/typescript-estree esli
nt-config-prettier eslint-plugin-prettier eslint-plugin-react husky lint-staged

서비스 작업자 등록

commit
만약 이렇다면precache만 주시기 때문에 알림을 받을 수 있도록 편집합니다src/serviceWorker.ts에서 3점 추가

applicationServerPublicKey

web-push 사용 생성

urlB64ToUint8Array

base64를 uint8array의 보조 함수로 변환

https://github.com/GoogleChromeLabs/web-push-codelab/blob/master/app/scripts/main.js#L31

registration.pushManager.subscribe({})...

pushManager에subscribe 정보 등록

push 서비스에서 단점 정보를 되돌려 백엔드에 통지

이 때 기본 상태를 유지하지 않으면 형식 정의가 없으면 tsconfig라고 욕을 먹습니다.json의lib에서 추기webworker

서비스 작업자 활성화

commit
기본적으로 서비스worker의register가 닫혀서 사용합니다src/index.tsx의serviceWorker.unregister()을(를) serviceWorker.register()로 변경
이 녀석을 기용해도 프로덕션의 env가 아니면 움직이지 않는다react documentbuild라고 써있어봐)

알림 버튼 배치

commit
구성 요소를 App.tsx 에 배치합니다.인상으로 보치라면 알림이 날아가는 느낌이에요.
디버깅할 때 귀찮아서 서비스 워커의 unregister 단추도 준비했습니다.

sw의 교체

그럼에도 불구하고 서비스워커는 이동하지만기본 웹 팩.config.jsworkbox의GenerateSW에서 서비스워커를 생성하기 때문에precache 기능만 발휘할 수 있습니다
그래서 직접 만든 sw로 바꿔보도록 하겠습니다.

react-app-rewired 추가

commit
참고 자료
진행yarn eject 후 나오는 웹팩.config.js를 다시 쓸 수 있지만 거스를 수 없는 변화는 무섭다...
따라서craconfigreact-app-rewired를 덮어쓸 수 있습니다

yarn add -D react-app-rewired

config-overrides.js

자신의 서비스 워커 쓰기

commit
typescript로 쓰려고 했는데 웹팩력이 없어서 포기했어요

쓰기 백엔드

otiai10 씨의 보도
하는 일은 typescript화일 뿐이기 때문에 생략

이동

yarn build && serve -s build

oO(왜 크롬의 아이콘이 변하지 않는지...)

느끼다

typescript로 서비스worker를 못 써서 정말 달갑지 않아요!!!

서비스워커 자체가 문서가 충실해서 금방 만들었어요

크롬과 파이어폭스의 행동은 미묘하게 다르다(오류 등), 힘들다(크롬이 주는 인상은 오류가 더 많다)

브라우저를 처음 터치하는 devtool은 다음과 같은 측면에서 크롬을 사용하기 쉽다

Javascript context(예: sw.js로 설정하면 self는 ServiceWorkerGlobalScope)

서비스 작업기의 unregister는 devtool을 통해 진행할 수 있다(firefox는 about:serviceworkers

최초이 문장에 따라 about:debugging#workers 이 페이지를 열면 전체 Firefox가 동결될 때까지 CPU 부하가 증가합니다.

warning에서도 썼지만multiple content processes와 병용된 이유

push 서비스의endpoint의url짧음(기분 문제)

프런트엔드(특히 생태계)

기타 메모

서비스worker는 https 또는 통지원을 통해localhost일 때만 유효

typescript로 서비스-worker를 쓸 때시간이 좀 걸려요.

참고 문헌

Making a Progressive Web App · Create React App

Push and Retrieve Payload Recipe - Web Push - ServiceWorker Cookbook

웹 브라우저에 푸시 알림을 보내는 서버와 js 예시 - DRY 메모

Push API - Web APIs | MDN

Workbox webpack Plugins  |  Workbox  |  Google Developers

How to build a custom PWA with Workbox in create-react-app