PWA 만들기 첫걸음, 설치 가능한 웹앱 (샘플 코드)
누구나 쉽게 따라서 간단한 PWA를 만들어 볼 수 있도록 PWA 만들기 과정을 단계별로 정리해 보았고, 더불어 데모 PWA와 샘플 코드가 있습니다.
PWA...
Progressive Web Applications!
프로그레시브 웹 애플리케이션
진보적·점진적(조금씩 앞으로 나아가는 것)인 웹 앱?
PWA란 어떤 웹 애플리케이션을 말하는 걸까요❓
단지 네이티브 앱 같은 웹 앱을 지향하는 걸까요❓
간단한 PWA을 함께 만들어 보기 전에, Google 개발자가 PWA에 대해 설명하는 내용을 (구글 번역기를 돌려서) 대강 읽어 보면 PWA에 대한 개념이 잡힐 수도 있습니다. 개인적으로 어떤 속성을 가지고 있어야 PWA로 인정되는 지를 단정짓기는 어렵다고는 생각합니다.
https://web.dev/what-are-pwas
→ 조금 아래로 스크롤하면 나오는 참고 이미지만 보더라도 대충 감이 오지 않나요?
https://web.dev/pwa-checklist
→ PWA가 갖춰야 할 기본 항목 체크리스트와 PWA 최적화를 위해 필요한 항목 체크리스트를 확인할 수 있습니다. 물론 그 체크리스트를 모두 통과해야 하는 건 아닙니다.
이 페이지에서는 PWA가 갖추어야 할 가장 기본 항목인 '설치 가능'을 목표로 하고 있습니다. 기존의 웹 애플리케이션을 PWA화 하기 위한 첫걸음이라고 생각합니다. 참고로 기기(PC·모바일 등)에 앱을 설치하는 사용자는 해당 앱에 더 많이 참여하는 경향이 있다고 합니다.
PWA화의 첫걸음, 기존의 웹 앱을 '설치 가능'하도록
(기존) 웹 애플리케이션 준비
웹 애플리케이션을 준비합니다.
여기에서 PWA화에 사용할 웹 애플리케이션은 이번 테스트용으로 아주 심플한 하나의 HTML 파일로 구성된 단일 페이지라도 괜찮습니다. 또는 이전에 만들어 둔 기존의 웹 앱(웹사이트 등)을 그대로 사용하면 됩니다.
저는 사전에 만들어 둔 '카운트다운 타이머'를 가지고 PWA화를 진행해 보겠습니다.
iOS 사파리의 경우
iOS(애플의 모바일 OS)에서는 사파리(웹 브라우저)를 통해서만 웹 앱을 설치할 수 있습니다. 그리고 모바일에서는 웹 앱을 설치하는 것을 '홈 화면에 추가'라고 합니다.
iOS 사파리의 경우에 대응은 아래의 코드를 HTML의 <head> 요소 내에 넣어 주기만 하면 됩니다.
그리고 'icons/icon-152x152.png' 앱 아이콘 이미지를 만들어 주세요.
Android와 PC, 크롬·엣지의 경우
Android와 PC의 경우에는 '웹 앱 매니페스트'(manifest.json)와 '서비스 워커'(sw.js)로 설치(홈 화면에 추가)를 가능하게 합니다.
[3.1단계] 아래의 코드를 HTML의 <head> 요소 내에 넣어 주세요.
[3.2단계] 아래의 코드로 manifest.json 파일을 만들어 주세요.
[3.3단계] 아래의 코드로 sw.js 파일을 만들어 주세요.
그리고 'icons/icon-192x192.png'와 'icons/icon-512x512.png' 앱 아이콘 이미지를 만들어 주세요.
파일의 위치는 위 샘플 코드를 변경하지 않고 그대로 사용한다면 아래와 같습니다.
루트 폴더에
- index.html
- manifest.json
- sw.js
- icons/icon-152x152.png(iOS용)
- icons/icon-192x192.png
- icons/icon-512x512.png
'웹 앱 매니페스트'는 웹 앱이 아닌 네이티브 앱으로서의 자신의 정보를 JSON 형식으로 담고 있는 파일입니다.
'서비스 워커'는 웹 앱을 보다 '네이티브 앱'스럽게 하기 위해서 사용됩니다. 예를 들어, 웹 자원을 캐싱해서 사용자의 기기가 오프라인에서도 문제없이 동작하도록 하거나 '푸시 알림'을 처리하도록 할 때 앞으로 코드를 차곡차곡 넣어 갈 곳입니다.
[주의점]
서비스 워커는 안전한 HTTPS 환경에서만 정상적으로 동작합니다. 하지만 예외적으로 localhost에서도 동작합니다. 운영 환경은 HTTPS로 구축하고 로컬 개발 환경은 일반적인 'http://localhost:포트번호' 이렇게 사용해도 문제는 없어 보입니다. 하지만 로컬 개발 환경을 HTTPS로 만들어 주면 더 정확하겠죠? localhost에 https로 접속하는 방법은 여기를 참고하세요.
설치 가능한 데모 PWA 보기
데모 PWA 보기↓↓↓
모든 샘플 소스 코드와 이미지는 여기↓↓↓
'설치 가능' 확인 방법
iOS 사파리
화면 아래의 공유 아이콘을 탭(Tap)(①)하고, '홈 화면에 추가'를 탭(②)하세요.
Android 크롬
주소창 오른쪽의 메뉴 아이콘을 탭(①)하고, '홈 화면에 추가'를 탭(②)하세요.
PC 크롬
주소창의 오른쪽에 (+) 아이콘 보이시죠? 아래 이미지를 참고하세요.
많은 도움 되었습니다. 감사합니다.
답글삭제