웹앱 매니페스트 & 서비스워커(Web App Manifest & Service Worker)

웹앱 매니페스트(Web App Manifest)

웹앱 매니페스트란 앱에 대한 정보를 담고 JSON 파일입니다. 배경색은 어떠한 색인지, 앱의 이름은 무엇인지, 홈스크린 화면에 추가할 때 아이콘은 어떤 것인지 등의 정보를 담고 있죠. 웹앱 매니페스트는 manifest.json 파일명을 대부분 사용합니다.(출처 : 웹앱 매니페스트 & 서비스워커(Web App Manifest & Service Worker) )

서비스워커(Service Worker)

서비스워커는 브라우저의 백그라운드에서 실행되는 자바스크립트 워커입니다. PWA는 네이티브 앱처럼 오프라인 상태에서도 사용가능하고, 푸시 알림(Notification) 기능도 사용할 수 있는데요. 이런 기능을 할 수 있도록 도와주는 것이 바로 서비스워커입니다. 향후에는 서비스워커에 지오펜싱(Geofencing) 기능도 추가될 예정이라고 하네요.(출처 : 웹앱 매니페스트 & 서비스워커(Web App Manifest & Service Worker) )

PWA(프로그레시브 웹 앱, Progressive Web Apps) 유효성(매니페스트(manifest), service worker ) 검사방법

PWA(프로그레시브 웹 앱, Progressive Web Apps) 가 잘 구현되는지는 스마트폰에서 일일히 검사하지 않고 데스크톱/PC에서도 확인할 수 있습니다. 그 방법은 크롬 브라우저의 개발자도구를 이용하는 방법과 Lighthouse 크롬 확장프로그램(addon, 부가기능) 을 이용하는 방법이 있습니다.  숙달이 되시면 Lighthouse 크롬 확장프로그램을 이용하는 것보다 크롬 개발자 도구를 이용하는 것이 빠르고 쉽습니다. 

1. 크롬 브라우저의 개발자도구를 이용하는 방법

크롬 브라우저에서 [개발자 도구] -> [Application]에서 Manifest 와 Service Workers의 상태를 확인하실 수 있습니다.

매니페스트(manifest)를 검사하는 방법

매니페스트(manifest )를 테스트하려면 Chrome DevTools(크롬에서 개발자도구, 단축키 : F12)를 열고 애플리케이션 / 매니페스트 로 이동하십시오 . 아래에 표시된대로 매니페스트 미리보기를 볼 수 있습니다.

(이미지 출처 :  PC에서 모바일 화면으로 보기 (크롬 브라우저) )

서비스 작업자는 웹 페이지와 별도로 브라우저가 실행하는 JavaScript 프로그램입니다. 푸시 알림 및 백그라운드 동기화 와 같은 유용한 기능에 사용됩니다.

service-worker 를 검사하는 방법

service-worker가 다시 제대로 개방 설치되어있는 경우 확인하려면 크롬 DevTools(개발자도구)에서 Application(응용 프로그램) / Service Worker 를 선택하시면  Service Worker 상태 및 실행중인 모든 클라이언트를 볼 수 있습니다.

2. Lighthouse 크롬 확장프로그램(add-on 부가기능)를 이용하는 방법

Lighthouse 크롬 확장프로그램과 개발자 도구를 통해 이용할 수 있습니다. Lighthouse는 PWA의 유효성을 확인할 수 있는 PWA 스캐너이며 웹 앱의 품질을 개선하는 오픈 소스 자동화 도구입니다. 

검사하고자하는 웹사이트가 좋거나 나쁘다는 걸 알려주고, PWA인지 아닌지, 그리고 PWA라면 얼마나 빠르게 동작하는지 등을 알수 있습니다. 온라인, 오프라인으로 접속을 시도하고 그 결과를 보여주며, 매우 느린 CPU, WiFi 환경에서도 실험해 그 결과를 보여줍니다.(참고 :  Lighthouse는 Chrome 확장프로그램, 커맨드 라인에서, 노드 모듈에서 프로그램으로도 사용할 수 있습니다. Lighthouse에서 확인할 URL을 입력하여 검사를 시작하면, 페이지에 대한 테스트를 실행한 다음, 페이지에 대한 보고서를 새창으로 생성합니다. 여기에서 실패한 테스트 항목은 앱을 개선하는데 사용할 수 있습니다. ) 

lighthouse 를 이용하실때는 안내창에도 나오지만 탭을 1개만 열어놓고 실행하셔야 합니다. (Multiple tabs are being controlled by the same service worker. Close your other tabs on the same origin to audit this page. 동일한 서비스 작업자(service worker)가 여러 개의 탭을 제어합니다. 동일한 출처의 다른 탭을 닫아야 이 페이지를 감사(검사)할 수 있습니다.)

[개발자 도구] -> [Audits(감사)] : 확장프로그램을 이용하지  않고 개발자 도구로 보는 방법

크롬 확장프로그램을 이용하지 않고 크롬 브라우저에서 [개발자 도구] -> [Audits(감사)]에서 바로 실행할 수 있습니다.  (참고 : Chrome 확장 프로그램은이 페이지의 로드 성능에 부정적인 영향을 미칩니다. 이 방법을 사용하실때는 크롬 확장프로그램을 시크릿 모드 또는 확장 프로그램이 없는 환경에서 이용하세요. )

상세 사용법은 아래의 이미지로 설명하였습니다. 

아래의 동영상은 실제 실행화면입니다. 
[Source : Think with Google] 페이지 로딩 시간이 1 초에서 7 초로 증가함에 따라, 사이트 방문자의 이탈률은 113 % 증가합니다.(As page load time increases from one second to seven seconds, the probability of a mobime site visitor bouncing increases 113%.)
[Source : WPO Stats] BBC는 페이지로드가 1초 지연될 때마다 사용자의 10 %가 손실되는 것을 목격했습니다.(BBC has seen a loss of 10% of their users for every extra second of page load.
[Source : Google Developers Blog]사이트가 상호 작용할 수 있게 전환되기까지 1 초 이상 걸리면 사용자는 주의를 잃고 페이지 작업 완료에 대한 인식이 깨집니다.(If a site takes >1 second to become interactive, users lose attentions, and their perception of completing the page task is broken.)

….

들 처럼 재미있는 데이터들이 제공됩니다. 

web 으로 이용하는 방법 ( web.dev )

https://web.dev/measure 에서 gmail 로 로그인한 후, View Report 하시면 이용하시면 크롬 확장프로그램이나 [개발자 도구] -> [Audits(감사)]와 동일한 상세 결과를 보실 수 있습니다. 

참고로 https://web.dev/learn 은 PWA를 포함하여 웹을 개선하는 방법들을 알려주십니다. 

3. 웹 매니페스트 검사기(Web Manifest Validator)를 이용하여 매니페스트를 검사하는 방법

이 페이지는 웹 매니페스트의 유효성을 테스트하는 데 사용됩니다((This page is meant to be used to test the validity of a Web Manifest.) The parser follows the rules from the W3C specification

(1) URL 을 입력하여 조회하는 방법, (2)web manifest 를 붙여넣기하여 조회하는 방법, (3)업로드한 파일을 조회하는 방법하여 3가지 방법으로 유효성을 검토해줍니다. 

Enter a Website URL

 VALIDATE

Paste a Web Manifest

VALIDATE

Upload a Web Manifest File

    Success: Manifest is valid! Manifest URL: https://www.aiforu.kr/wp-json/app/v1/pwp-manifest JSON parsed successfully. Parsed `name` property is: (click 하시면) SeenBuy app이 스마트폰/태블릿의 홈화면에 추가됩니다. Parsed `short_name` property is: SeenBuy Parsed `start_url` property is: https://www.aiforu.kr/ Parsed `display` property is: standalone Parsed `orientation` property is: portrait Parsed `icons` property is: [ { “src”: “https://www.aiforu.kr/wp-content/uploads/2016/12/cropped-seenbuy_sumnail-144×144.png”, “type”: “image/png”, “density”: 1, “sizes”: {} }, { “src”: “https://www.aiforu.kr/wp-content/uploads/2016/12/cropped-seenbuy_sumnail-192×192.png”, “type”: “image/png”, “density”: 1, “sizes”: {} }, { “src”: “https://www.aiforu.kr/wp-content/uploads/2016/12/cropped-seenbuy_sumnail-512×512.png”, “type”: “image/png”, “density”: 1, “sizes”: {} } ] Parsed `related_applications` property is: [] Parsed `prefer_related_applications` property is: false Parsed `theme_color` property is: #ffffff Parsed `background_color` property is: #ffffff

참고자료 : 1.PC에서 모바일 화면으로 보기 (크롬 브라우저)

2. Lighthouse – 웹 진단 및 성능 향상시키기