Next.js에서 PWA(Progressive Web App)구현 - 단순 궁금증 부터 배포까지

PWA: 웹과 네이티브 앱의 중간 그 어딘가

• 구글 검색 결과
  웹과 네이티브 앱의 기능 모두의 이점을 갖도록 수 많은 특정 기술과 표준 패턴을 사용해 개발된 웹 앱입니다. 출처 MDN

• GPT 질문 결과
  웹 애플리케이션을 개선하여 사용자에게 더 나은 경험을 제공하는 웹 개발 접근 방식입니다. PWA는 웹과 네이티브 앱의 중간에 위치하며, 모바일 기기 및 데스크톱에서 사용자에게 웹 앱과 유사한 경험을 제공합니다.

PWA를 사용하기전에 궁금한 것

PWA로 개발을 한적이 없어서 무지성 의문들을 검색해봤다.

1. 모바일에서 어떤식으로 동작하지?
   • 반응형 인가
     기본적으로 모바일에서 보고, 상황에따라 태블릿, 갤럭시 폴드 등 다양한 화면에서 볼 수 있도록 반응현으로 개발해야 한다.
   • 모바일은 기본적으로 터치를 해야하는데 터치는 어떤식으로 지원해?
     터치 지원의 경우에는 웹 브라우저에서 자동으로 처리되기 때문에 개발자가 따로 처리할 필요는 없다. 실제로 본인이 반응형으로 개발한 웹은 별다른 처리 없이 모바일에서 아주 잘 동작 했다.
   • 그럼 그냥 반응형 웹과 뭐가 달라?
     PWA는 말그대로 웹으로 이루어진 어플리케이션 이고, 반응형 웹은 PC, 폰, 태블릿 등 어느 곳에서 접속해도 크기에 맞게 반응하여 사이즈를 조절해주는 웹이라는 뜻이에요. PWA의 특징 중 반응형이라는 특징이 내포되어있어요. 출처
     차이점
     • 오프라인 동작 여부
     • 네이티브 앱과 같은 동작 여부
     • 푸시 알림 가능 여부
     • 자동 업데이트 가능 여부
     • 등등
2. 웹 페이지는 기본적으로 온라인 상태에서 동작을하는데 오프라인 일때도 동작해야하지 않나?
   • 서비스 워커(Service Workeer) 라는 PWA 기술을 사용하면 오프라인에서도 동작하는 웹 페이지를 만들 수 있다.
     서비스 워커: 백그라운드에서 실행되는 스크립트로, 네트워크 요청을 가로채고 제어할 수 있는 능력을 제공합니다. 이를 통해 필요한 자원을 로컬에 캐시하고, 오프라인 상태에서도 앱을 제공할 수 있습니다.
3. 어쨌든 웹이니까 REST API를 사용할 수 있나?
   • Web App 이라 ㅅㄱㄴ.
4. 앱이 아닌데 푸시 알림은 어떤 방식으로 보내게 되는거지?
   • 이건 좀 복잡한데 서비스워커를 통해 백그라운드에서 실행되는 스크립트를 활용한다고 한다.
     구현은 꾀나 복잡해 보인다.(안해봐서 그런가..) 참고

Next.js 로 웹앱 만들어보기

next-pwa 여기 github 페이지에 나와있는 순서대로만 해도 반은 간다.
지만, 나는 이거 대로 하지 않고 이 블로그(Next-PWA-웹앱-만들기) 대로 했다.
여기서도 다 똑같이 할 수 없었던 것들이 몇 가지 있다.

1. app router 방식
   next.js의 page router 방식에는 _document 파일이 따로 존재하고 meta tag나 head, stript 설정 같은 것을 여기서 다 할 수 있었는데 나는 안타깝게도 app router 방식이었다.
   app router 방식에서는 layout에서 해당 설정 같은 것들을 처리해 줄 수 있다.
   

2. manifast.json
   이거를 root 폴더에 넣어서 계속 에러가 났다.
   public 폴더 하위에 넣어줘야 한다.(쓰고 보니 블고으에도 public에 넣으라고 써져있었다..;)

3. display 설정
   그냥 manifast 설정 사이트에서 만든 파일을 그대로 넣었더니 설정 오류가 났다.
   display 설정은 standalone, fullscreen, 또는 minimal-ui 중에 하나로 해줘야 한다.

결론

에러가 나도 GPT가 너무 잘 알려주고 정보도 많아서 해결하는데 어렵지 않았다. q

GPT가 다했다는 뜻(실제임)

확인

앱을 배포하고 라이트하우스를 켜면 아래와 같이 PWA 체크 표시가 뜬다. 그럼 된거다.
이제부터 앱 마냥 다운로드를 할 수 있다!