[ZIMZIM] pwa로 만들어 보는건 어떨까?(1)

ZIMZIM은 사용자가 운동 기록과 음수량을 기록하는 어플이다.

하지만 웹어플리케이션일 경우 사용자에게는 사이트에 접속하여 기록을 하는 것이 귀찮을 수 있다.

그렇다면 사용자에게 앱으로 제공한다면 편히 이용할 수 있지 않을까?

react-native로 구성할 수도 있겠고 아니면 pwa로 구성할 수도 있을 것 같다.

 

이번에는 pwa로 구성해보기로 했다.

 

먼저 pwa 플러그인을 설치한다.

npm install next-pwa

netxt.config.js에 pwa를 사용할 수 있게 설정을 해준다.

그리고 public 폴더 안에 manifest.json을 만들어준다.

public 폴더 안에 sw.js도 만들어준다.

pwa는 https에서만 구동되기 때문에 로컬에서 구동시키려면 인증서를 받아야 한다.

먼저 brew install mkcert 설치해준다.

mkcert localhost 로 로컬호스트 인증서를 발급한다.

여기까지 해주면 root에 localhost pem파일들이 생성된다.

로컬호스트에서 https를 사용할 때 http-server나 serve를 사용할 수 있고, 나는 http-server를 사용하기로 했다.

 

 

이런 방식으로 시도했었지만 되지않았다.

공식 문서에 찾아보니 app > manifest.ts를 만들어주고 그 안에 값만 넣어주면 된다는 것을 알게 되었다.

값을 넣어 준 후 npm run build, npm run dev를 하게 되면 이렇게 pwa으로 만들어졌다는 것을 확인할 수 있다.

그리고 공식문서에도 나와있지만 pwa는 https로 접근해야 되기 때문에 next dev --experimental-https 실행시키면 https로 접근가능하다.

https://nextjs.org/docs/app/building-your-application/configuring/progressive-web-apps

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

 

 

이제 프론트는 https로 실행되고 있고 쿠키를 주고 받으려면 서버도 https로 실행되어야 하는데 그러면 인증서를 설치해주고 실행시키면 된다.

brew install mkcert 한 후 mkcert localhost를 실행시키면 루트에 locolhost pem파일들이 생성된다.

 

이후 app.js에 pem 파일을 읽을 수 있는 로직을 추가해준다.

이렇게 설정한 뒤 서버를 실행시키면 프론트와 연결이 잘 된다.

 

manifest에 아이콘까지 설정하고 나면 이렇게 설치할 수 있다.

 

아이콘은 favicon generator에서 해주면 되고 아이콘의 이미지를 실제로 border radius를 줄 필요는 없다.