프로그레시브 웹 앱 초보자 가이드

게시 됨: 2022-03-10

빠른 요약 ↬ PWA는 최신 기술을 활용하여 최고의 웹 및 모바일 앱을 결합합니다. 이 기사는 브라우저의 최근 발전과 개발자로서 우리가 새로운 세대의 웹 앱을 구축해야 하는 기회를 살펴봅니다.

프로그레시브 웹 앱은 모바일 웹의 다음 큰 일이 될 수 있습니다. 원래 2015년에 Google에서 제안한 이 기능은 상대적으로 개발이 간편하고 애플리케이션의 사용자 경험에서 거의 즉각적인 승리를 거두기 때문에 이미 많은 관심을 받았습니다.

SmashingMag에 대한 추가 정보:

프로그레시브 웹 앱의 빌딩 블록
대화형 디자인 필수 사항: 챗봇 구축을 위한 팁
웹사이트를 활용하는 일류 앱 구축
Foundation For Apps에서 완전한 웹 앱 만들기

프로그레시브 웹 애플리케이션은 최신 기술을 활용 하여 최고의 웹 및 모바일 앱을 결합합니다 . 웹 기술을 사용하여 구축되었지만 앱처럼 작동하고 느껴지는 웹 사이트라고 생각하십시오. 브라우저와 서비스 워커의 가용성, 캐시 및 푸시 API의 최근 발전으로 웹 개발자는 사용자가 웹 앱을 홈 화면에 설치하고 푸시 알림을 수신하며 오프라인에서도 작업할 수 있습니다.

프로그레시브 웹 앱은 훨씬 더 큰 웹 에코시스템, 플러그인 및 커뮤니티를 활용하고 각 앱 스토어의 기본 애플리케이션과 비교할 때 웹사이트를 배포하고 유지 관리하기가 상대적으로 쉽습니다. 모바일과 웹 모두에서 개발하는 사용자의 경우 웹 사이트를 더 짧은 시간에 구축할 수 있고 API가 이전 버전과의 호환성으로 유지 관리될 필요가 없다는 점에 감사할 것입니다. 네이티브 앱의 버전 조각화와 달리 앱을 배포하고 유지 관리하는 것이 일반적으로 더 쉽습니다 .

점프 후 더! 아래에서 계속 읽기 ↓

왜 프로그레시브 웹 앱인가?

한 연구에 따르면 평균적으로 앱은 사용자가 앱을 처음 접한 시점부터 사용자가 앱을 사용하기 시작하는 사이의 모든 단계에서 사용자의 20%를 잃는 것으로 나타났습니다. 사용자는 먼저 앱 스토어에서 앱을 찾아 다운로드하고 설치한 다음 마지막으로 열어야 합니다. 사용자가 프로그레시브 웹 앱을 찾으면 즉시 사용을 시작할 수 있으므로 불필요한 다운로드 및 설치 단계가 필요 없습니다. 그리고 사용자가 앱으로 돌아오면 앱을 설치하고 전체 화면 환경으로 업그레이드하라는 메시지가 표시됩니다.

그러나 기본 앱이 모두 나쁜 것은 아닙니다. 푸시 알림이 있는 모바일 애플리케이션은 푸시가 없는 애플리케이션보다 최대 3배 더 많은 유지율을 달성하고 사용자는 웹사이트보다 모바일 애플리케이션을 다시 열 가능성이 3배 더 높습니다. 또한 잘 설계된 모바일 응용 프로그램은 일부 리소스가 장치에 상주하기 때문에 데이터를 덜 소비하고 훨씬 더 빠릅니다.

프로그레시브 웹 애플리케이션은 모바일 앱의 특성을 활용하여 모바일 애플리케이션 유지 관리와 관련된 복잡성 없이 사용자 유지 및 성능을 향상시킵니다.

사용 사례

프로그레시브 웹 앱은 언제 빌드해야 하나요? 사용자가 자주 방문할 것으로 예상되는 애플리케이션에는 일반적으로 네이티브를 권장하며 프로그레시브 웹 앱도 다르지 않습니다. Flipkart는 인기 있는 전자 상거래 플랫폼인 Flipkart Lite에 프로그레시브 웹 앱을 사용하고 SBB는 온라인 체크인 프로세스에 프로그레시브 웹 앱을 사용하여 사용자가 인터넷 연결 없이 티켓에 액세스할 수 있도록 합니다.

다음 애플리케이션이 프로그레시브 웹 앱, 웹사이트 또는 기본 모바일 애플리케이션이어야 하는지 평가할 때 먼저 사용자와 가장 중요한 사용자 작업을 식별합니다. "프로그레시브"인 프로그레시브 웹 앱은 모든 브라우저에서 작동하며 사용자의 브라우저가 새롭고 향상된 기능과 API로 업데이트될 때마다 경험이 향상됩니다.

따라서 기존 웹 사이트와 비교하여 프로그레시브 웹 앱의 사용자 경험에는 타협이 없습니다. 그러나 오프라인에서 지원할 기능을 결정해야 할 수 있으며 탐색을 용이하게 해야 합니다(독립형 모드에서는 사용자가 뒤로 버튼에 액세스할 수 없음을 기억하십시오). 웹사이트에 이미 애플리케이션과 유사한 인터페이스가 있는 경우 프로그레시브 웹 앱의 개념을 적용하면 웹사이트가 더 좋아질 것 입니다.

중요한 사용자 작업에 특정 기능이 필요하지만 브라우저 간 지원 부족으로 인해 아직 사용할 수 없는 경우 모든 사용자에게 동일한 경험을 보장하는 기본 모바일 애플리케이션이 더 나은 옵션일 수 있습니다.

프로그레시브 웹 앱의 특성

코드로 넘어가기 전에 프로그레시브 웹 앱에는 다음과 같은 특성이 있음을 이해하는 것이 중요합니다.

프로그레시브 . 정의에 따르면 프로그레시브 웹 앱은 모든 장치에서 작동하고 사용자의 장치와 브라우저에서 사용할 수 있는 모든 기능을 활용하여 점진적으로 향상되어야 합니다.
검색 가능 . 프로그레시브 웹 앱은 웹사이트이므로 검색 엔진에서 검색할 수 있어야 합니다. 이것은 검색 가능성에서 여전히 웹 사이트에 뒤떨어지는 기본 응용 프로그램에 비해 큰 이점입니다.
연결 가능 . 웹사이트에서 물려받은 또 다른 특성으로 잘 디자인된 웹사이트는 URI를 사용하여 애플리케이션의 현재 상태를 나타내야 합니다. 이렇게 하면 사용자가 앱의 URL을 북마크하거나 공유할 때 웹 앱이 상태를 유지하거나 다시 로드할 수 있습니다.
반응형 . 프로그레시브 웹 앱의 UI는 기기의 폼 팩터와 화면 크기에 맞아야 합니다.
앱 같은 . 프로그레시브 웹 앱은 기본 앱처럼 보이고 최소한의 페이지 새로 고침으로 애플리케이션 셸 모델에 구축되어야 합니다.
연결 독립적 . 연결이 낮은 영역이나 오프라인(우리가 가장 좋아하는 특성)에서 작동해야 합니다.
재참여 가능 . 모바일 앱 사용자는 앱을 재사용할 가능성이 더 높으며 프로그레시브 웹 앱은 푸시 알림과 같은 기능을 통해 동일한 목표를 달성하기 위한 것입니다.
설치 가능 . 프로그레시브 웹 앱은 장치의 홈 화면에 설치하여 쉽게 사용할 수 있습니다.
신선한 . 새로운 콘텐츠가 게시되고 사용자가 인터넷에 연결되면 해당 콘텐츠를 앱에서 사용할 수 있어야 합니다.
안전 . 프로그레시브 웹 앱은 보다 친밀한 사용자 환경을 제공하고 모든 네트워크 요청을 서비스 워커를 통해 가로챌 수 있으므로 메시지 가로채기 공격을 방지하려면 HTTPS를 통해 앱을 호스팅해야 합니다.

코딩하자!

최초의 프로그레시브 웹 앱인 Sky High는 공항 도착 일정을 시뮬레이션합니다. 사용자가 웹 앱에 처음 액세스할 때 API에서 검색한 예정된 항공편 목록을 보여주고 싶습니다. 사용자가 인터넷에 연결되어 있지 않고 웹 앱을 다시 로드하는 경우 연결을 통해 마지막으로 다운로드했을 때의 비행 일정을 보여주고자 합니다.

스카이 하이 스크린샷 — 가상의 프로그레시브 웹 앱인 Sky High(큰 미리보기)

기초

프로그레시브 웹 앱의 첫 번째 특징은 모든 장치에서 작동해야 하고 이를 허용하는 장치와 브라우저에서 향상되어야 한다는 것입니다. 따라서 우리는 전통적인 HTML5와 모의 API에서 데이터 검색을 시뮬레이션하는 JavaScript를 사용하여 웹사이트를 구축했습니다. 애플리케이션 전체에서 우리는 MVVM(Model-View-ViewModel) 바인딩을 처리하기 위해 약간의 녹아웃을 사용하고 있습니다. 이 바인딩은 JavaScript 모델을 HTML 보기에 바인딩할 수 있는 경량 JavaScript 프레임워크입니다. Knockout은 비교적 이해하기 쉽고 코드를 복잡하게 만들지 않기 때문에 Knockout을 사용하기로 결정했습니다. 그러나 이것을 React 또는 AngularJS와 같은 다른 프레임워크로 대체할 수 있습니다.

우리 웹사이트는 디자인과 상호작용을 안내하는 일련의 원칙인 Google의 머티리얼 디자인 가이드라인을 따릅니다. 머티리얼 디자인은 애플리케이션과 디바이스 전반에 걸쳐 통일된 표준 역할을 할 뿐만 아니라 디자인 의미도 부여합니다. Sky High의 도착 보기에 머티리얼 디자인을 사용하여 네이티브 앱 모양과 느낌을 제공하는 프로그레시브 웹 앱을 제공합니다.

마지막으로 앱을 테스트하여 버벅거림이 없고 스크롤이 부드럽고 매끄러운지 확인했습니다. 버벅거림 없는 렌더링은 사용자 참여를 향상시키는 것으로 나타났습니다. 초당 60프레임의 렌더링을 목표로 합니다.

이 데모에서는 실제 API 대신 정적 JSON 파일을 검색합니다. 이것은 단순히 일을 단순하게 유지하기 위한 것입니다. 현실 세계에서는 API를 쿼리하거나 WebSocket을 사용합니다.

index.html

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sky-High Airport Arrivals</title> <link async rel="stylesheet" href="./css/style.css"> <link href="https://fonts.googleapis.com/css?family=Roboto:300,600,300italic,600italic" rel="stylesheet" type="text/css"> </head> <body> <header> <div class="content"> <h3>Arrivals</h3> </div> </header> <div class="container"> <div class="content"> <ul class="arrivals-list" data-bind="foreach: arrivals"> <li class="item"> <span class="title" data-bind="html: title"></span> <span class="status" data-bind="html: status"></span> <span class="time" data-bind="html: time"></span> </li> </ul> </div> </div> <script src="./js/build/vendor.min.js"></script> <script src="./js/build/script.min.js"></script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sky-High Airport Arrivals</title> <link async rel="stylesheet" href="./css/style.css"> <link href="https://fonts.googleapis.com/css?family=Roboto:300,600,300italic,600italic" rel="stylesheet" type="text/css"> </head> <body> <header> <div class="content"> <h3>Arrivals</h3> </div> </header> <div class="container"> <div class="content"> <ul class="arrivals-list" data-bind="foreach: arrivals"> <li class="item"> <span class="title" data-bind="html: title"></span> <span class="status" data-bind="html: status"></span> <span class="time" data-bind="html: time"></span> </li> </ul> </div> </div> <script src="./js/build/vendor.min.js"></script> <script src="./js/build/script.min.js"></script> </body> </html>

index.html 파일은 비교적 표준입니다. HTML 목록을 만들고 data-bind=“foreach: arrivals” 속성을 통해 Knockout을 사용하여 View Model 속성 arrivals 을 바인딩했습니다. View Model arrivals 은 아래 page.js 파일에 선언되고 Page 모듈에 노출됩니다. HTML 페이지에서 arrivals 배열의 각 항목에 대해 title , status 및 time 속성을 HTML 보기에 바인딩했습니다.

페이지.js

 (var Page = (function() { // declare the view model used within the page function ViewModel() { var self = this; self.arrivals = ko.observableArray([]); } // expose the view model through the Page module return { vm: new ViewModel(), hideOfflineWarning: function() { // enable the live data document.querySelector(".arrivals-list").classList.remove('loading') // remove the offline message document.getElementById("offline").remove(); // load the live data }, showOfflineWarning: function() { // disable the live data document.querySelector(".arrivals-list").classList.add('loading') // load html template informing the user they are offline var request = new XMLHttpRequest(); request.open('GET', './offline.html', true); request.onload = function() { if (request.status === 200) { // success // create offline element with HTML loaded from offline.html template var offlineMessageElement = document.createElement("div"); offlineMessageElement.setAttribute("id", "offline"); offlineMessageElement.innerHTML = request.responseText; document.getElementById("main").appendChild(offlineMessageElement); } else { // error retrieving file console.warn('Error retrieving offline.html'); } }; request.onerror = function() { // network errors console.error('Connection error'); }; request.send(); } } })();

이 page.js 파일은 ViewModel vm 과 두 개의 함수 hideOfflineWarning 및 showOfflineWarning 을 포함하는 Page 모듈을 노출합니다. View Model ViewModel 은 애플리케이션 전체에서 사용될 간단한 JavaScript 리터럴입니다. ViewModel에 arrivals 속성은 Knockout의 observableArray 이며, HTML을 JavaScript 배열에 자동으로 바인딩하여 JavaScript의 배열에 항목을 푸시 및 팝하고 페이지의 HTML을 자동으로 업데이트할 수 있습니다.

hideOfflineWarning 및 showOfflineWarning 함수를 사용하면 나머지 애플리케이션에서 이러한 함수를 호출하여 온라인 연결 여부를 표시하는 페이지의 UI를 업데이트할 수 있습니다. showOfflineWarning 은 목록을 페이드하기 위해 arrivals-list HTML 요소에 loading 클래스를 추가한 다음 XHR을 통해 HTML 파일 offline.html 을 검색합니다. 파일이 성공적으로 검색되었다고 가정하고( response.status === 200 ), 이것을 HTML에 추가합니다. 물론 서비스 워커를 사용하지 않고 사용자가 인터넷에 연결되어 있지 않은 경우 offline.html 을 검색할 수 없으므로 사용자는 브라우저의 오프라인 페이지를 보게 됩니다.

API에서 데이터를 검색하고 이를 뷰 모델 및 뷰에 바인딩하는 비즈니스 로직은 arrivals.js 에 있으며 Knockout을 사용하는 표준 MVVM 기능입니다. arrivals.js 파일에서 애플리케이션 전체에서 사용할 서비스와 뷰 모델을 초기화하고 데이터를 검색하고 뷰 모델에 바인딩하는 Arrivals.loadData() 함수를 노출합니다.

웹 앱 매니페스트

웹 앱을 더 앱처럼 만들자. 웹 앱 매니페스트 파일은 W3C 사양을 따르는 간단한 JSON 파일입니다. 이를 통해 전체 화면 모드에서 웹 앱을 독립 실행형 애플리케이션으로 실행하고, 애플리케이션이 장치에 설치될 때 표시될 아이콘을 할당하고, 앱에 테마와 배경색을 할당할 수 있습니다. 또한 Android의 Chrome은 웹 앱 설치 배너를 통해 사용자가 웹 앱을 설치하도록 사전에 제안합니다. 설치 프롬프트를 표시하려면 웹 앱에서 다음을 수행해야 합니다.

유효한 웹 앱 매니페스트 파일이 있어야 합니다.
HTTPS를 통해 제공
유효한 서비스 워커가 등록되어 있어야 합니다.
두 번 방문했으며 각 방문 사이에 최소 5분 간격을 두고 방문했습니다.

매니페스트.json

 { "short_name": "Arrivals", "name": "Arrivals at Sky High", "description": "Progressive web application demonstration", "icons": [ { "src": "launcher-icon.png", "sizes": "48x48", "type": "image/png" }, { "src": "launcher-icon-96.png", "sizes": "96x96", "type": "image/png" }, { "src": "launcher-icon-144.png", "sizes": "144x144", "type": "image/png" }, { "src": "launcher-icon-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "launcher-icon-256.png", "sizes": "256x256", "type": "image/png" } ], "start_url": "./?utm_source=web_app_manifest", "display": "standalone", "orientation": "portrait", "theme_color": "#29BDBB", "background_color": "#29BDBB" }

이 매니페스트 파일을 분석해 보겠습니다.

short_name 은 사람이 읽을 수 있는 애플리케이션 이름입니다. Android용 Chrome에서는 홈 화면의 아이콘과 함께 표시되는 이름이기도 합니다.
name 은 사람이 읽을 수 있는 응용 프로그램의 이름이기도 하며 응용 프로그램이 나열되는 방식을 정의합니다.
description 은 웹 애플리케이션에 대한 일반적인 설명을 제공합니다.
icons 은 응용 프로그램의 아이콘 집합으로 사용할 다양한 크기의 이미지 배열을 정의합니다. Android용 Chrome에서 아이콘은 시작 화면, 홈 화면 및 작업 전환기에서 사용됩니다.
start_url 은 애플리케이션의 시작 URL입니다.
display 는 웹 애플리케이션의 기본 디스플레이 모드를 정의합니다: fullscreen , standalone , minimal-ui 또는 browser .
orientation 은 웹 애플리케이션의 기본 방향인 portrait 또는 landscape 를 정의합니다.
theme_color 는 애플리케이션의 기본 테마 색상입니다. Android에서는 상태 표시줄의 색상을 지정하는 데에도 사용됩니다.
background_color 는 웹 애플리케이션의 배경색을 정의합니다. Chrome에서는 시작 화면의 배경색도 정의합니다.
related_applications 는 이 예에서 구현되지 않았지만 다양한 앱 스토어에서 기본 애플리케이션 대안을 지정하는 데 사용됩니다.

index.html 파일의 head 태그에 manifest.json 참조를 추가합니다.

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

사용자가 홈 화면에 웹 앱을 추가하면 브라우저를 직접 열 필요 없이 기기에서 즉시 귀하의 애플리케이션에 다시 참여할 수 있습니다. 이것이 웹 책갈피 그 이상임을 알 수 있습니다.

Vimeo의 Smashing Magazine에서 Android용 Chrome의 홈 화면에 추가하세요.

Android용 Chrome의 홈 화면에 추가

서비스 워커

프로그레시브 웹 앱의 더 흥미로운 측면 중 하나는 오프라인에서 작업할 수 있다는 것입니다. 서비스 워커를 사용하면 앱의 이전 세션(IndexedDB 사용)에서 검색된 데이터를 표시하거나, 또는 애플리케이션 셸을 표시하고 사용자에게 인터넷에 연결되어 있지 않음을 알릴 수 있습니다(우리가 사용한 접근 방식 이 데모에서 가져옴). 사용자가 다시 연결하면 서버에서 최신 데이터를 검색할 수 있습니다.

이 모든 것은 네트워크 가져오기를 포함하여 도메인 전체 이벤트에 액세스할 수 있는 이벤트 기반 스크립트(JavaScript로 작성됨)인 서비스 워커를 통해 가능합니다. 이를 통해 모든 정적 리소스를 캐시할 수 있으므로 네트워크 요청을 크게 줄이고 성능도 상당히 향상시킬 수 있습니다.

애플리케이션 셸

애플리케이션 셸은 사용자 인터페이스를 구동하는 데 필요한 최소한의 HTML, CSS 및 JavaScript입니다. 기본 모바일 응용 프로그램에는 배포 가능 파일의 일부로 응용 프로그램 셸이 포함되어 있는 반면 웹 사이트는 일반적으로 네트워크를 통해 이를 요청합니다. 프로그레시브 웹 애플리케이션은 애플리케이션 셸의 리소스와 자산을 브라우저 캐시에 배치하여 이 격차를 해소합니다. Sky High 응용 프로그램에서 응용 프로그램 셸이 상단 헤더 표시줄, 글꼴 및 이를 우아하게 렌더링하는 데 필요한 CSS로 구성되어 있음을 알 수 있습니다.

서비스 워커를 시작하려면 먼저 루트 디렉터리에 서비스 워커의 JavaScript 파일 sw.js 를 만들어야 합니다.

sw.js

 // Use a cacheName for cache versioning var cacheName = 'v1:static'; // During the installation phase, you'll usually want to cache static assets. self.addEventListener('install', function(e) { // Once the service worker is installed, go ahead and fetch the resources to make this work offline. e.waitUntil( caches.open(cacheName).then(function(cache) { return cache.addAll([ './', './css/style.css', './js/build/script.min.js', './js/build/vendor.min.js', './css/fonts/roboto.woff', './offline.html' ]).then(function() { self.skipWaiting(); }); }) ); }); // when the browser fetches a URL… self.addEventListener('fetch', function(event) { // … either respond with the cached object or go ahead and fetch the actual URL event.respondWith( caches.match(event.request).then(function(response) { if (response) { // retrieve from cache return response; } // fetch as normal return fetch(event.request); }) ); });

서비스 워커를 자세히 살펴보겠습니다. 먼저 cacheName 변수를 설정합니다. 이것은 캐시된 자산에 변경 사항이 있는지 여부를 확인하는 데 사용됩니다. 이 예에서는 자산이 변경되지 않거나 업데이트가 필요하지 않음을 의미하는 정적 이름을 사용합니다.

 self.addEventListener('install', function(e) { // declare which assets to cache }

install 이벤트는 서비스 워커의 설치 단계에서 발생하며 서비스 워커가 이미 설치된 경우 한 번만 발생합니다. 따라서 페이지를 새로 고쳐도 설치 단계가 다시 시작되지 않습니다. 설치 단계에서 캐시할 자산을 선언할 수 있습니다. 위의 예에서는 CSS 파일 1개, JavaScript 파일 2개, 글꼴 파일, 오프라인 HTML 템플릿 및 물론 응용 프로그램 루트를 캐싱하고 있습니다. self.skipWaiting() 은 대기 중인 서비스 작업자를 강제로 활성화합니다.

지금까지 서비스 워커를 선언했지만 실제로 적용되기 전에 JavaScript에서 이를 참조해야 합니다. 우리 애플리케이션에서 main.js 에 등록합니다.

 // Register the service worker if available. if ('serviceWorker' in navigator) { navigator.serviceWorker.register('./sw.js').then(function(reg) { console.log('Successfully registered service worker', reg); }).catch(function(err) { console.warn('Error whilst registering service worker', err); }); } window.addEventListener('online', function(e) { // Resync data with server. console.log("You are online"); Page.hideOfflineWarning(); Arrivals.loadData(); }, false); window.addEventListener('offline', function(e) { // Queue up events for server. console.log("You are offline"); Page.showOfflineWarning(); }, false); // Check if the user is connected. if (navigator.onLine) { Arrivals.loadData(); } else { // Show offline message Page.showOfflineWarning(); } // Set Knockout view model bindings. ko.applyBindings(Page.vm);

세션 상태가 online 에서 offline 으로 또는 그 반대로 변경되었는지 확인하기 위해 두 개의 이벤트 리스너도 포함했습니다. 그런 다음 이벤트 핸들러는 Arrivals.loadData() 를 통해 데이터를 검색하고 Page.showOfflineWarning 및 Page.hideOfflineWarning 을 통해 오프라인 메시지를 활성화 또는 비활성화하기 위해 서로 다른 함수를 호출합니다. 우리 애플리케이션은 또한 navigator.onLine을 사용하여 사용자가 현재 온라인 상태인지 확인하고 그에 따라 데이터를 검색하거나 오프라인 경고를 표시합니다. 그리고 main.js 의 마지막 줄에서 Knockout 바인딩을 View Model Page.vm 에 적용합니다.

처음으로 애플리케이션을 로드하면(Chrome 개발자 도구를 사용하여) 새로운 것이 표시되지 않습니다. 그러나 다시 로드하면 서비스 작업자로부터 많은 네트워크 리소스가 검색된 것을 볼 수 있습니다. 이것은 우리의 응용 프로그램 셸입니다.

Chrome 개발자 도구의 애플리케이션 셸 네트워크 리소스(큰 버전 보기)

오프라인 테스트

인터넷 연결 없이 응용 프로그램을 실행하는 사용자(이미 페이지에 있다고 가정)는 단순히 응용 프로그램 셸과 오프라인 경고가 표시됩니다. 이는 Chrome의 배회하는 t-rex보다 개선된 것입니다. 사용자가 네트워크 연결을 설정하면 경고를 비활성화하고 최신 데이터를 검색합니다.

정상적으로 실패 — Chrome의 기본 페이지 대신 사용자 정의 HTML 페이지 렌더링(큰 버전 보기)

Guardian은 오프라인 사용자가 웹사이트에 액세스할 때 특히 흥미로운 접근 방식을 취하여 다음과 같은 크로스워드 퍼즐을 제공합니다.

푸시 알림

푸시 알림을 통해 사용자는 신뢰하는 애플리케이션에서 시기적절한 업데이트를 선택하여 앱에 다시 참여할 수 있습니다. 웹의 푸시 알림을 사용하면 브라우저가 닫힌 상태에서도 청중과 소통할 수 있습니다.

Push API는 Chrome, Opera, Samsung 브라우저에서 지원되며 Firefox 및 Microsoft Edge에서 개발 중입니다. 불행히도 이 기능이 Safari에서 구현될 것이라는 표시는 없습니다.

성능

서비스 작업자가 얻을 수 있는 가장 쉬운 방법 중 하나는 거의 또는 전혀 노력을 들이지 않고도 성과를 개선할 수 있다는 것입니다. 서비스 워커가 구현되기 전과 페이지 로드 시 200KB 이상을 검색하기 전의 웹 사이트 자체를 비교합니다. 이제 13KB로 줄어듭니다. 일반 3G 네트워크에서는 페이지를 로드하는 데 3.5초가 걸렸습니다. 이제 500밀리초가 걸립니다.

이러한 성능 향상은 응용 프로그램 자체가 매우 작고 기능이 제한되어 있기 때문에 과감합니다. 그럼에도 불구하고 캐싱을 올바르게 사용하면 특히 연결성이 낮은 장소의 사용자에게 성능과 인지된 성능을 크게 향상시킬 수 있습니다.

등대

Google의 Chrome 팀은 프로그레시브 웹 앱을 테스트하기 위한 도구를 만들었습니다. Lighthouse는 Node.js 또는 Chrome 플러그인으로 실행되며 GitHub에서도 찾을 수 있습니다.

Lighthouse 테스트를 실행하려면 웹사이트가 온라인에서 사용할 수 있어야 합니다. 즉, localhost 에서 테스트할 수 없습니다.

시작하려면 npm 패키지를 다운로드하십시오.

 npm install -g GoogleChrome/lighthouse

설치가 완료되면 Chrome(버전 52 이상)을 실행합니다.

 npm explore -g lighthouse -- npm run chrome lighthouse https://incredibleweb.github.io/pwa-tutorial/

Lighthouse 실행의 출력은 명령줄에서 볼 수 있으며 구현한 프로그레시브 웹 앱 기능 및 속성(예: manifest.json 파일을 사용 중인지 또는 페이지를 오프라인에서 사용할 수 있는지 여부)에 따라 웹사이트 등급을 지정합니다. .

결론

이 기사는 프로그레시브 웹 앱을 위한 전채 요리일 뿐입니다. 푸시 API로 푸시 알림을 지원하거나 앱을 다시 사용할 수 있도록 하거나 IndexedDB 및 백그라운드 동기화를 사용하여 오프라인 경험을 개선하는 등 사용자가 원하는 앱과 유사한 경험을 만들기 위해 더 많은 일을 할 수 있습니다.

브라우저 간 지원

이는 프로그레시브 웹 앱의 초기 단계이며, 특히 Safari 및 Edge에서 브라우저 간 지원은 여전히 제한적입니다. 그러나 Microsoft는 프로그레시브 웹 앱을 공개적으로 지원하며 연말까지 더 많은 기능을 구현해야 합니다.

서비스 워커 및 캐시 API . Chrome, Firefox, Opera 및 Samsung 브라우저에서 지원됩니다. Microsoft Edge에서 개발 중이며 2016년 말에 제공될 예정입니다. Safari용으로 고려 중입니다.
홈 화면에 추가합니다 . Chrome, Firefox, Opera, Android 브라우저 및 삼성 브라우저에서 지원됩니다. Microsoft는 프로그레시브 웹 앱을 스토어 목록으로 사용할 수 있음을 나타내는 것 같습니다. 사파리는 아직 계획이 없습니다.
푸시 API . Chrome, Firefox, Opera 및 Samsung의 브라우저에서 주로 지원됩니다. Microsoft Edge에서 개발 중입니다. 사파리는 아직 계획이 없습니다.

더 많은 개발자가 상대적으로 구현하기 쉽고 즉각적인 보상을 제공하는 프로그레시브 웹 앱이 제공하는 기능을 활용하면 사용자는 지원되는 브라우저에서 이러한 웹 앱을 사용하는 것을 선호하여 다른 브라우저 공급업체가 적응할 수 있기를 바랍니다.

소스 코드

이 자습서의 전체 소스 코드는 Github 리포지토리에서 사용할 수 있으며 데모는 GitHub 페이지에서 사용할 수 있습니다.