[사프] PWA 적용하기

세나정·2024년 11월 20일

React next pwa yarn 사이드프로젝트

[PROJECT 3] Wedvice

목록 보기

1/2

오랜만에 긴 여정이 시작될 사이드 프로젝트를 시작했다!
주제는 나중을 위해 !!기밀!!로 하고, 기술적인 부분들을 적어나갈 것이다.

우리는 React로 구현을 하되 (Next 프레임워크) 웹에서 모바일로 동작하기 위해 PWA를 적용할 것인데 한번 초기 세팅을 해보겠다!

우리의 패키지의 매니저는 yarn berry를 사용중!

1. PWA 라이브러리 추가

yarn add next-pwa

를 통해 추가해준다!

한 5분정도! 걸리면 정상적으로 설치된 것을 볼 수 있음!

하지만 너무 초기이다 보니 한가지를 잊으면 안 된다

바로 프로젝트가 https가 되어야만 한다는 것.

2. next.config.js 추가

const withPWA = require("next-pwa")({
  dest: "public",
  disable: process.env.NODE_ENV === "development",
});

module.exports = withPWA({
  reactStrictMode: true,
});

여기에서 가장 기본적인 PWA를 생성해준 후 (물론 라이브러리에 필수 옵션들이 아닌 가장 초기의 세팅만을 해놓은 상태)

3. manifest.json 파일 작성

{
  "theme_color": "#8936FF",
  "background_color": "#2EC6FE",
  "icons": [
    { "purpose": "maskable", "sizes": "512x512", "src": "icon512_maskable.png", "type": "image/png" },
    { "purpose": "any", "sizes": "512x512", "src": "icon512_rounded.png", "type": "image/png" }
  ],
  "orientation": "any",
  "display": "standalone",
  "dir": "auto",
  "lang": "ko-KR",
  "name": "wedvice",
  "short_name": "wedvice",
  "start_url": "http://localhost:3000/",
  "scope": "http://localhost:3000/"
}

여기에도 우선 임시적인 이름과 임시적인 설명 그리고 임시적인 이미지를 넣어 mafifest를 구성을 해주면 됨!
하지만 나중에 더 옵션이 필요하다면 추가적으로 넣어줘야함 (물론 공식문서에 잘 나와있겠죠)

전 개인적으로 아래를 추천드림!
https://progressier.com/pwa-manifest-generator 사이트에서 발행하면 편하게 zip으로 다운이 가능합니다 :)

4. sw.js?

서비스워커가 어디갔는지 의문이신 분들이 있을 수 있지만
next-pwa는 서비스 워커를 자동으로 생성하여줌

그러므로 서비스워커는 신경쓰지 않고 나머지 세팅을 완료하면 된다!

주의할 점!

우리는 next 15버전을 사용하기 때문에 이전 버전에서 존재하던 _app이나 _document 파일이 존재 하지않아서 기존 리소스에대한 정보가 많이 없을 수 있음

최신버전에 존재하는 layout.tsx라는 파일에 head를 추가하고 그 안에 우리의 manifest를 넣어주면 됨

이제 세팅이 얼추 완료 되었으면

yarn build && yarn start // 를 통해 (yarn build; yarn start) 프로젝트를 실행

물론 PWA는 http환경에서 동작하고 아직 vercel로 배포를 하지 않은 상태라면 더욱 명시적으로 확인이 불가!

글을 쓰는 나도 아직 정말 로컬에서만 동작하고 있기에 개발자도구를 통해 serviceWorker가 실행 되었는지 확인을 할 예정

ServiceWorker 확인 방법

서비스 워커란?

브라우저가 백그라운드에서 실행하는 스크립트로, Javascript 파일 형태입니다.
Worker context에서 실행됩니다.
DOM에 접근할 수 없고, Javascript 메인 스레드와는 다른 스레드에서 실행됩니다.
XHR, Web Storage는 Service Worker 안에서 사용할 수 없습니다.
HTTPS에서만 실행됩니다. (보안)
프록시 서버와 비슷하게 동작합니다. : 네트워크 요청을 중간에 가로채고, 리소스를 캐싱하는 역할을 합니다. -> 브라우저의 외부에 위치하기 때문입니다.
설치된 서비스 워커들은 여기서 확인 가능합니다. : chrome://serviceworker-internals/

개발자도구 -> Application