솔미는 성장중

PWA 적용기 : 본문

카테고리 없음

PWA 적용기 :

solming 2024. 3. 18. 19:15
728x90

야놀자 부트캠프 파이널 프로젝트를 진행할 때 기획적으로 모바일이 더 적합하다는 판단을 해서 PWA를 도입해 웹앱을 만들기로 했다!

푸시알림을 꼭 도입하고 싶었기 때문이다..희희

PWA란?

Progressive Web App

네이티브 앱의 장점과 웹의 장점을 결합한 것! 

 

- 가볍다!

- 진입장벽이 아주 낮다!

- 여러 모바일 환경에 대응할 수 있다! (iOS, Andriod 다 하나로 퉁-)

- 보안상 이유로 브라우저가 접근 못하는 시스템 하드웨어&소프트웨어에 접근 가능

- 검색엔진을 통해 찾을 수 있다. (+ 앱스토어 배포도 원한다면 가능하당)

but

- 고성능 게임 개발 같은건 당연히.. 어렵다

- 지원하지 않는 브라우저도 존재

- 아직 완전히 자리잡지 않아서 기능적인 한계들이 일부 존재

 

그럼 이제 어떻게 적용할건지에 대해서 알아보자

조건도 몇 가지 없다 👍

 

PWA를 적용하기 위한 조건

1. https

https는 보안이 강화된 http이다.

http에 Secure Socket이 추가돼 데이터를 주고받는 과정에서 내용이 암호화되어 통신할 수 있도록 한 것이다.

PWA는 보안이 연결된 사이트에서만 동작하기 때문에 HTTPS 도메인에서 제공되어야 한다.

 

2. 서비스 워커 (Service Worker)

서비스 워커는 백그라운드에서 실행되는 JS 형태의 스크립트이다!

오프라인 환경에서도 웹이 작동할 수 있도록 네트워크 요청을 가로채 네트워크 불량 상태 등 접속성이 안 좋은 상황을 커버한다. 네트워크 요청을 가로챈다는 점에서 중간자 공격에 취약하기 때문에 https에서만 작동하는 것이다.

중간자 공격(man in the middle attack, MITM)
네트워크 통신을 조작해 통신 내용을 도청/조작하는 공격기법

 

3. 매니페스트 (Manifest)

PWA에 대해 브라우저에 알려주고, 사용자의 데스크탑 or 모바일에 설치할 때 어떻게 작동해야 하는지 알려주는 JSON 파일이다. (웹 페이지 url, 앱 이름, 화면 표시 방식 등 기능과 표시 방법에 대한 정보를 담고있음!)

 

 

 

pwa에 대해 알아보는 김에 좋은 pwa를 만들기 위해선 어떤 것을 고려해야하는지도 추가로 살펴보았다. :)

 

좋은 PWA를 만들기 위해선?

 

체크리스트

디바이스 크기/입력 유형에 관계없이 모든 사용자가 앱을 설치하고 사용할 수 있는가?

  • Starts fast, stays fast (빠르게 로드 & 빠르게 유지)
  • Works in any browser (모든 브라우저에서 작동)
  • Responsive to any screen size (모든 화면 크기에 대응)
  • Provides a custom offline page (오프라인 환경에서 맞춤형 오프라인 페이지 제공)
  • Is installable (설치가능)
  • Support DeepLink (앱 홈페이지 뿐만아니라 앱 내 특정 페이지에 URL로 접속 가능)

적용 시 겪었던 이슈

우리는 푸시알림을 위해서 pwa를 도입한 것이었기에 firebase-fcm과 함께 적용했다.

 

간단하게 전체적인 흐름 정리
Firebase 설치 및 연동 - Firebase 프로젝트 생성 & VAPID 키 발급 - VAPID키를 이용해서 토큰 발급 - 해당 토큰을 백엔드에게 전달

적용방법은 아래 깃허브 주소들을 참고했다.
https://github.com/firebase/quickstart-js/blob/master/messaging/vite.config.js (공식 예제 사이트)
https://lemontia.tistory.com/1047 (전체적인 플로우 참고)

https://github.com/kheeyaa/FCM-with-React?tab=readme-ov-file (폴더구조 참고)

 

 

그리고 프론트, 백엔드 각각에서 어떤 작업을 해야하는지에 대해서도 정리를 해보았다.

 

 

1. 이미지 등록하기

PWA는 필수적으로 이미지를 등록시켜줘야 한다. (이 이미지는 모바일 화면에 나타나는 모바일 앱 이미지로 사용된다!)

이때 이미지를 꼭 크기별로 만들어서 저장해주어야하는데, 직접 하나하나 만들기 귀찮아서 명령어를 만들어주었다.

 

npm i @vite-pwa/assets-generator -D
// package.json
{
  "scripts": {
    "generate-pwa-assets": "pwa-assets-generator --preset minimal public/logo.svg"
  }
}

(파일명에 따라 logo.svg 부분을 수정해주면 된다.)

참고 링크) https://www.saurabhmisra.dev/setup-react-pwa-using-vite

 

manifest에 아래처럼 아이콘 정보를 제대로 설정해주고, index.html에서 manifeset.JSON을 인식할 수 있게 헤더에
 <link rel="manifest" href="/manifest.json" /> 를 추가해주었는데, dev서버에서 실행시켰을 때와 build하고 실행시켰을 때 PWA가 공통적으로 적용되지 않는 이슈가 있었다. 

// manifest.json 일부
"icons": [
    {
      "src": "pwa-64x64.png",
      "sizes": "64x64",
      "type": "image/png"
    },
    {
      "src": "pwa-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "pwa-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "maskable-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],

 

이런저런 시도를 해보았고, 결국에는 이미지 경로를 못찾아서 발생하는 문제였다.;;;;

 

  1. 개발 서버:
    • 개발 서버에서는 보통 서비스 워커 등록 경로를 루트 경로에 맞춘다.
    • 따라서 <link rel="manifest" href="/manifest.json" />와 같이 루트 경로를 가리키는 링크를 사용한다.
  2. 빌드 후 실행:
    • 빌드 후 실행 시에는 웹 앱이 정적 파일로 빌드되며, 서버 상에서는 해당 파일들을 서비스한다.
      이 때는 웹 앱의 루트가 실제 웹 서버의 루트로 이동하게 되므로, 서비스 워커 및 기타 리소스의 경로를 업데이트해야 할 수 있습니다.
    • 예를 들어, 웹 앱이 /assets 폴더 내의 이미지를 사용하고 있고, 빌드 후에는 이 이미지들이 public/assets에 위치한다면, 서비스 워커 및 매니페스트 파일에서도 이를 고려하여 경로를 설정해야 한다.

즉, 각각 어디에 있는 이미지를 바라볼지를 다르게 설정해두어 public/assets , public 어떤 위치에 이미지가 저장되어있느냐에 따라 pwa가 특정 경우만 적용되는 현상이 발생했던 것이다.

 

 

2. service worker 등록

service worker를 등록해주려면 외부에서 접근이 가능하도록 만들어주어야한다.

따라서 firebase-messaging-sw.js는 public에 위치되어야한다.

 

 

 

장장 13시간만에 마주한 사랑스런 결과물 🥹

 

그외 마주쳤던 에러들

 

1)

The package "@esbuild/linux-x64" could not be found, and is needed by esbuild.


해결법: optional dependencies에 패키지 설치

"optionalDependencies": {
    "@rollup/rollup-linux-x64-gnu": "4.6.1",
    "esbuild": "^0.19.11"
}
 
2) 
An error occurred while retrieving token. FirebaseError: Messaging: We are unable to register the default service worker


해결법: firebase-messaging-sw.js를 public에 위치시킴 

 

3)

importScripts firebase not working


해결법: 경로에 -compat 추가 &   self.importScripts 가 아닌  importScripts 로 변경하고 eslint 에러 무시 주석 추가

 

 

그외 다른 방법)

PWA builder 라는 사이트에서 가이드라인을 따라가도 좋다.

https://www.pwabuilder.com/

 

PWABuilder

 

www.pwabuilder.com

 

사용 후기

적용방법은 생각보다 간단한데, 아무도 사용해본 사람이 없었기에 설정에서 어려움을 느꼈던 것 같다.

너무너무 좋지만 아직은 자리를 잡아가고 있는 중이기에 기능적인 한계를 느끼기도 했다.

예를 들어 ios지원도 최근에서야 가능해졌다. 

 

하지만 진입장벽이 낮다는 점, 여러 언어를 익힐 필요없다는 점 떄문에 앞으로 점점 활성화 될 것으로 기대된다 😆

728x90