PWA (Progressive Web App)
Updated:
PWA란 무엇인가?
-
HTML, CSS, JS 를 이용해서 만든 웹앱을 modern 한 웹 브라우저 APIs 와 결합해서 크로스 플랫폼에서 동작하는 app 을 쉽게 만들수 있는 프로그램입니다.
-
이미 만들어진 app 에다가 몇가지 사항만 추가 하면 데스크탑, 모바일에서도 동작할 수 있는 app 으로 만들수 있음
PWA 유용한 tools
1.PWA builder
- PWA builder 는 MS 에서 만든 오픈소스 프로젝트로 웹사이트를 PWA 로 전환할 떼, 어떤지 검토해주고 빠진부분들을 자동으로 채워주면서 PWA 로 심플하게 만들 수 있게 도와 줍니다.
2.Workbox
- Workbox 는 구글이 다양한 PWA 를 위한 service worker를 자동으로 만들어주는 라이브러리를 제공합니다
3.Maskable
- Maskable 은 더 나은 PWA 사용성으로 위한 adaptive icons 를 디자인할 수 있는 tool 입니다.
PWA 4가지 필수 Requirement
1.deploy 된 website or webApp
2.Https - 보안
3.Application Manifest
- Json format 으로 된 text 파일로써 webApp 에 대한 여러가지 정보들이 담겨있는 파일입니다. 이 manifest 를 이용해서 다양한 기기들의 webApp 을 설치할 수 있도록 도와 줍니다.
4.Service Worker
- JS 파일로써, Webapp 과 서버와 데이터를 주고 받을때 중간에서 그 모든 요청들을 통제하고 관리할 수 있습니다. 그래서 어떤 특정한 네트위크 요청과 반응에 한해서 어떠한 부분을 따로 저장을 해놓았다가 offline 상태일때 저장해둔 데이터를 보여주는 역활, 또는 최신의 사항들은 미리 fetch 해와서 사용자가 webapp 을 키자마자 데이터를 바로 보여줄수 있도록 하는 것, 성능이 좋은 webapp 을 만들기 위해서 service worker 를 사용할 수 있습니다.
PWA 만들기
- Sample 로 http://todo.jacobko.info/ 사이트를 pwa 로 만들어 보겠습니다.
PWA builder를 통해서 http://todo.jacobko.info/ 사이트가 적합한지 먼저 test 해 봅니다.
📌 web app manifest 에 필수로 들어가야 되는 사항들
-
short_nameorname -
icons: must include a 192px and a 512px icon -
start_url -
display: must be one offullscreen,standalone, orminimal-ui -
prefer_related_applicationsmust not be present, or befalse -
PWA builder 에서 manifest 에서 필요한 사항들을 알맞게 입력합니다
Name, Short Name, Description, Start URL, Icon upload, display(standalone)
- Service worker 에서 offline 일때 사용자에게 어떠한 것을 보여 줄지 미리 데이터를 잘 cash 해 두었다면 offline 이더라도 데이터를 보여 줄수 있습니다.
🔷 Next 버튼을 눌러서 Download PWA base file 을 다운로드 해주면 pwa 에 필요한 파일들을 자동으로 만들어 줍니다.
다운로드 받고 다음과 같이 project 에 파일을 저장해 줍니다
📌 RCA 으로 만들었기 때문에 project 내 public 폴더에 해당 파일들을 저장합니다.
Project 내에 파일 넣기
1.manifest.json 을 project 에 복사합니다.
2.images 폴더도 전부 project 내부로 복사합니다.
3.pwabuilder-sw 폴더에서 pwabuilder-sw.js 파일도 복사합니다.
4.Add a manifest link tag 를 index.html head 부분에 넣습니다.
<link rel="manifest" href="manifest.json" />
5.Service worker.js 파일을 index.html 에서 링크하기 (head 제일 마지막 부분에 넣기)
<script type="module">
import "https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate";
const el = document.createElement("pwa-update");
document.body.appendChild(el);
</script>
6.Offline 일때 설정하기
offline.html 을 만들어서 offline 일때 해당페이지가 나오게 하기
// TODO: replace the following with the correct offline fallback page i.e.: const offlineFallbackPage = "offline.html";
const offlineFallbackPage = "offline.html";
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>No Internet Connection</title>
</head>
<body>
<p>Please check your internet connection</p>
</body>
</html>
7.변경된 사항을 publish and deploy 하기
PWA builder 에서 완성된 상태 확인 하기
🔷 
🔶 🔷 📌 🔑
Referencehttps://jacobko.info/chat-app-react-firebase/
Dream Coding - https://www.youtube.com/watch?v=FEBkne7Nyu4
Web.dev - https://web.dev/install-criteria/
Leave a comment