nextj PWA 설정 하기 1차

nextjs 가이드 나와 있다

https://nextjs.org/docs/app/building-your-application/configuring/progressive-web-apps#3-implementing-server-actions

Configuring: Progressive Web Applications (PWA) | Next.js

 

와 근데 처음 설정 하는데 어려웠다 처음 해보는 거기도 하고

에러 나고 우선 가이드에 있는 대로 설정 해보기

 

1. app/manifest.ts 경로에 생성

2. urlBase64ToUint8Array 함수와 PushNotificationManager 함수는 같은 페이지에 app/page.tsx 경로에

3. app/actions.ts 경로에 생성

4. ./generate-vapid-keys.js 경로에 생성

5. 터미널에 node generate-vapid-keys.js 작성 후 나온 키 복사

6.   .env 파일에 키 복붙 하고 공백 없어야함

7. public/sw.js 경로에 생성

 

 

에러

Failed to subscribe to push notifications: InvalidCharacterError: 
Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.
    at urlBase64ToUint8Array

InvalidCharacterError는 주로 Base64 문자열을 디코딩하는 과정에서 발생하는 오류로,

urlBase64ToUint8Array 함수에서 window.atob를 호출할 때 주어진

문자열이 올바른 Base64 형식이 아니기 때문에 발생

 

아니 넣으라는대로 넣었고 공백도 없는데 계속 같은 에러가 남

 

콘솔로 키가 잘들어 오는지 다 확인 해봄

urlBase64ToUint8Array에 키는 정상적으로 잘 들어는 것 확인 됨

근데 여기에서 디코딩 하면서 에러가 난다는데 

하나의 오타때문이었음..