사실 처음 붙잡았을 때는 오류 해결하느라 1시간 정도 걸렸고, 글로 정리해서 작성하는 데는 미루다 일주일 넘게 걸렸다... 그래도 manifest.json 등록하는 것은 정말로 금방 할 수 있다!!
PWA란?
Progressive Web Apps 의 약자로 브라우저 기반의 웹을 앱처럼 바로 설치해서 사용 가능한 기술이다.
윈도우라면 윈도우 프로그램처럼 설치되고 작업 표시줄에 등록도 가능하고, 모바일이라면 진짜 별도의 앱처럼 설치된다.
브라우저에서 제공하는 기능이고, 캐시 정보 등은 브라우저에 저장되면서 설치되는 듯하다.
아직까지 한글 정보는 많이 없고 설명이 적어 MDN 공식 문서가 가장 좋았다. MDN 문서 중에서도 번역되지 않은 부분이 많아 나중에 기여해보면 좋을 것 같다.
https://developer.mozilla.org/ko/docs/Web/Progressive_web_apps/Tutorials/js13kGames
프로그레시브 웹 앱 소개 - 프로그레시브 웹 앱 | MDN
이 문서는 프로그레시브 웹 앱(PWA)의 소개입니다. PWA가 무엇이고 일반 웹 앱에 어떤 이점을 가져다주는지 설명합니다.
developer.mozilla.org
PWA 만들기
일반적인 웹을 PWA로 만들기 위해 해주어야 하는 것은 다음 세 가지다. 처음에 manifest.json은 업로드 했는데 index.html에 안 넣어줘서 브라우저에서 PWA 설치 버튼이 뜨지 않아 한참 헤맸다.
- manifest.json 생성 및 업로드
보통 사이트의 root 경로에, 사이트url/manifest.json 입력 시 잘 뜨도록 업로드 해주면 된다. - icon img 등록 (512x512 기준으로 작은 사이즈 1개, 큰 사이즈 최소 1개 이상 필요)
- 메인 사이트 index.html 의 <head> 태그에 manifest.json 경로 <link> 추가하기!!!
<link rel="manifest" href="manifest.json" />
PWA builder 웹사이트 이용해서 manifest.json 쉽게 만들기
pwa builder 웹사이트를 이용하면 보다 쉽게 manifest.json을 작성할 수 있고, 특정 웹사이트에 PWA가 잘 적용되어 있는지, 부족한 점은 무엇인지 자세히 알려준다.
image도 하나를 넣으면 자동으로 사이즈별로 만들어서 다운받을 수 있고, manifest.json에 작성까지 해준다.
PWABuilder
www.pwabuilder.com
manifest.json이 등록이 안 되어 있거나, 업로드는 되어 있어도 index.html에 <link>로 등록되어 있지 않으면 아래 사진처럼 뜬다.
manifest.json을 잘 인식하면 다음과 같이 뜬다. 추가적으로 넣으면 좋지만 빠져 있는 정보들을 알려준다. Windows, iOS, Android, meta(???) store에 등록할 수 있도록 .apk 등의 파일로도 생성해주는 것 같다.
Vite + github pages 로 배포된 서비스에 PWA 적용하기
Vite기반이라 정적 파일인 manifest.json과 img 들은 public 폴더에 넣어주었다.
이후 index.html의 <head> 태그 내 <link> 태그에 manifest.json 경로도 등록해주었다.
manifest.json에 작성하는 color 중 "theme_color"는 앱 내의 주소 창, 위의 남는 부분의 색상이고, "background_color"는 설치되는 앱 아이콘에 공간이 남았을 때 채워지는 색상이다.
트러블슈팅
github page에 배포해서 그런지 start_url 적용에 애먹었다.
manifest.json에 start_url을 "/"로 등록했을 때 경로 시작점이 path parameter의 최상단으로 적용되는 것이다!
처음에 https://kuit-space.github.io/KUIT-Space-front 경로인데 start_url에 “/” 을 넣어두었더니 https://kuit-space.github.io/ 경로를 시작 페이지로 보여주어 404 Not Found가 떴다.
여기서 헤맸던 것이 manifest.json은 배포된 경로, 즉 전자의 경로에 등록된 https://kuit-space.github.io/KUIT-Space-front/manifest.json 을 가져오는데 왜 start_url은 path 처음부터 가져오는 걸까.
- 현재는 start_url을 "start_url": "/KUIT-Space-front" 이렇게 넣어서 잘 작동하는 상태이다.
그런데 또 공식문서 뜯어보면 start_url 경로가 manifest.json이 등록된 곳 기준으로 가져온다고 되어 있는데 잘 모르겠다..
적용 결과 및 장단점
적용 결과는 다음과 같다!!
비록 몇 가지 단점이 있지만 웹 뷰로 감싸지 않아도 푸시알림도 가능하고 거의 네이티브 앱과 흡사하게 사용할 수 있는 건 정말 큰 장점이다.
- 페이지 이동할 때, 특히 카카오 로그인 같이 타 사이트로 리다이렉트 될 때 위에 브라우저처럼 주소 바가 뜬다.
- 상단 노치 바가 있는 아이폰의 경우 화면이 밀려서 아래로 약간 내려가고 노치 바에 주소 바가 가려서 뜨는 문제가 있다.
- 그리고 설정 파일이 변경되는 거라 당연한 것일 수도 있으나 manifest.json이 변경된다면 앱을 새로 받아야 적용된다.
- 웹 기반이라 페이지만 새로 배포된다면 그 즉시 컨텐츠 업데이트가 바로 된다는 장점이 있다
Service Worker
Service Worker를 통해 추가적인 다양한 동작을 만들 수 있다.
- 네트워크 사용 불가한 상황에서 앱에게 특정 동작을 미리 만들어 둘 수 있다.
- DOM에는 접근 불가능
- FCM과 연동해서 사용자 기기에 푸시알림을 띄울 수도 있다!!! → 정말로 네이티브 앱에 가깝게 사용 가능하다.
https://developer.mozilla.org/ko/docs/Web/API/Service_Worker_API
Service Worker API - Web API | MDN
서비스 워커는 웹 응용 프로그램, 브라우저, 그리고 (사용 가능한 경우) 네트워크 사이의 프록시 서버 역할을 합니다. 서비스 워커의 개발 의도는 여러가지가 있지만, 그 중에서도 효과적인 오프
developer.mozilla.org
다음에 PWA와 FCM을 연동해서 유저 기기에 푸시 알림을 띄우는 것까지 시도할 예정이다.
'프로그래밍 > Frontend (React, Javascript, Typescript)' 카테고리의 다른 글
| 전역 상태(zustand)에서 배열 concat의 side effect, 해결 방안 (feat. React Strict Mode) (0) | 2024.12.15 |
|---|---|
| Vite Proxy with Base URL & CORS 해결 (2) | 2024.11.28 |
| React Component와 객체지향의 차이에 관하여 (2) | 2024.09.29 |
| Fixed Menu, 메뉴 바 상단 고정 구현 시 content에 margin-top을 주면 위험한 이유 (feat. margin collapsing) (4) | 2024.09.28 |
| [JavaScript, Node.js] 프론트엔드(JavaScript Runtime)에서의 Race Condition (0) | 2024.04.11 |