기존의 웹 사이트에 쉽게 PWA 기능을 첨가하는 방법 - JavaScript

PWA (Progressive Web Applications, 프로그레시브 웹 애플리케이션)는 간단하게 얘기하자면 기존의 웹사이트를 네이티브 애플리케이션 같이 보여주는 기술이죠.  푸시설정이나 오프라인 기능 등을 넣을 수 있어서 각광받는 기술입니다.  특히나 모바일에서 많이 애용되는 기술이죠.
 
근래에는 많은 자바스크립트 기반의 SPA (Single Page Applications)는 PWA기능이 들어가 있는 경우가 많습니다.  하지만 기존의 웹 사이트는 어떻게 하면 PWA기능을 넣을 수 있을까요?  자바스크립트를 이용하는 웹 사이트이면 가능합니다.  이 방법에 대하여 알아보겠습니다.
 
https://ko.wikipedia.org/wiki/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%A0%88%EC%8B%9C%EB%B8%8C_%EC%9B%B9_%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98

프로그레시브 웹 애플리케이션 - 위키백과, 우리 모두의 백과사전

 

반응형

---

이 포스팅에서는 예제로 .NET WebForm을 이용하여 설명해 드리지만 기본적으로는 다른 프레임 워크도 비슷합니다.  
 
우선 알아야 하는 부분은 프레임 워크의 첫 시작점이죠.  닷넷 (.NET) WebForm의 첫 시작점은 Default.aspx라는 페이지입니다.  리액트나 다른 SPA의 경우에는 Index.html이겠죠.  그 시작지점만 다를 뿐, 이 예제에서 사용되는 코드는 똑같습니다.
 
그리고 PWA의 중요한 파일은 manifest.json과 service worker (서비스 워커) 자바스크립트 파일인데 이 두 파일은 쉽게 만들 수 있습니다.  
 
이 포스팅에는 기본 기능으로만 간단하게 시작할 수 있는 방법을 알려 드립니다.

---

1.  우선 PWA Builder사이트에 가신 후에 다음의 주소창에 PWA를 첨가하고자 하는 사이트의 URL 주소를 넣고 Start 버튼을 누르세요:

PWABuilder - 기존 웹 사이트의 주소 넣는 창

https://www.pwabuilder.com/

PWABuilder

---

2. 조금 기다리면 다음 페이지에서 이 사이트에 PWA를 첨가하기 위한 여러 가지 정보를 알려줍니다. 
 
중요한 부분은 manifest.json을 만들어 주는 도우미인데 페이지 중간에 위치해 있습니다.  여기에서 Edit Your Manifest 버튼을 누르세요.

Manifest 작성 도우미

새 도우미 창이 열리면 "(required)"라고 명시된 부분들을 다 넣어 줍니다.  중요한 건 Settings 탭에 Start URL란입니다.  이 이미지에는 Default.aspx라고 있지만 각 프레임 워크마다 다르니 시작하는 페이지를 Default.aspx대신에 넣어 주세요.

시작 페이지 설정

 
그다음에 Icons 탭으로 가면 아이콘을 업로드할 수 있습니다.  이미지는 PNG 이여야 하는데 사이즈별로 종류가 다양해서 다음의 사이트에 가셔서 아이콘을 먼저 만들어 이 메뉴에 업로드하는 것을 권장합니다.  아래의 사이트에 가시면 플랫폼이 이용하는 아이콘들을 자동으로 만들어 줍니다.
 
아이콘 만드는 도우미 페이지
https://www.pwabuilder.com/imageGenerator

PWABuilder

 
아이콘이 업로드가 완성되면 사이트의 스크린 샷도 탭메뉴에서 넣을 수 있습니다.  이 스샷은 나중에 앱 스토어에나 PWA의 정보란에 이 스샷이 보이게 됩니다.

---

3.  정보 기입이 완료가 되면 팝업 창의 아래에 위치한 Download Manifest 버튼을 누르시면 manifest.json 파일이 다운로드됩니다. 
 
저는 코드 탭메뉴에서 카피를 하여 프로젝트에 직접 넣는 것을 선호하여 그런 방식을 썼습니다.  이 파일은 프로젝트의 루트 폴더에 넣어주세요.  이 파일을 열면 아이콘 이미지의 위치나 다른 정보들을 수정할 수 있습니다.
 
theme_color라는 부분은 모바일 브라우저에서나 PWA 인스톨 후에 앱상에서 나타나는 색인데 브라우저의 바탕색이 여기에서 지정된 색깔로 나타나게 됩니다.
 
아이콘 이미지는 서버에 전부 저장이 되어 있어야 하고 주소도 일치해야 하니 주의하여 manifest.json파일을 수정하세요.  그리고 각 아이콘 섹션이 purpose라는 부분이 들어가는데 보통 "any"가 적당합니다

아이콘 이미지의 purpose

 
아이폰의 경우 아직 PWA가 완전 호환이 안되어서 홈화면에 넣기만 되는데 홈화면의 아이콘은 다음의 주소 (아래의 아이폰 아이콘 에디터)에서 만들어서 head섹션에 다음의 코드를 넣어주시면 매끈하게 됩니다

<link rel="apple-touch-icon-precomposed" sizes="PNG 이미지 사이즈 (예 640x640)" href="PNG 이미지 URL 주소">

 
아이폰 아이콘 에디터
https://maskable.app/editor 

Maskable.app Editor

 
그리고 마지막으로 head 섹션에 다음의 코드를 넣어 manifest.json을 레지스터 합니다

<link rel="manifest" href="/manifest.json">

manifest.json은 완료가 되었습니다
 

728x90

---

4. 위의 2번의 페이지에 다시 가시면 아래에  Generate Service Worker라는 버튼을 누르세요.  

서비스 워커 메뉴창이 뜹니다.  그 창의 아래에 Download Service Worker 버튼을 누르시면 js 파일이 다운로드됩니다.  이 서비스 워커는 아주 기본 기능만 들어가 있고 처음 테스트 시작하기 좋은 환경을 만들어 줍니다.

서비스 워커 다운로드

 
이 파일도 프로젝트의 루트 폴더에 넣어 주세요.

---

5.  서비스 워커를 다음의 코드를 시작 페이지에 넣어 레지스터 합니다

<script>
  if (typeof navigator.serviceWorker !== 'undefined') {
    navigator.serviceWorker.register('서비스워커 js파일 이름')
  }
</script>

---

이렇게 하면 모든 준비는 끝이 났습니다.  그리고 사이트를 배포하면 문제가 없으면 좋지만 서버에 따라 manifest.json을 불러오는데 404 에러가 날 수 있죠.  그러면 웹 서버의 MIME 타입에 json 타입을 첨가해 주세요. 
 
문제가 없으면 개발자 콘솔에 서비스워커가 레지스터 되었다는 문구가 뜹니다 (다운로드한 서비스워커 코드를 사용하셨으면).  그리고 크롬의 경우, 주소창에 다음의 인스톨 아이콘이 보입니다.

PWA 인스톨 아이콘

 
그리고 안드로이드 모바일 크롬에는 인스톨할 거냐는 문구가 팝업으로 뜹니다.  

---

테스트를 마치고 나면 2번의 페이지에서 각 앱 스토어에 올릴 수 있는 패키지를 만들 수 있습니다.  패키지를 만드는 방법은 OS 마다 다르지만 이 부분에서 시작을 할 수 있죠.

패키지 만들기

---

즐거운 코딩되세요

---

도움이 되셨거나 즐거우셨다면 아래의 ❤️공감버튼이나 구독버튼을 눌러 주세요~  감사합니다