9 가지 놀라운 PWA 비밀

프로그레시브 웹 앱 (PWA)는 반응 형 웹 디자인 , 인기가 높아지고 있습니다. PWA 지원은 Android의 Chrome에서 시작되었으며 이제 Opera, Firefox, Samsung Internet 및 UCWeb과 같은 대부분의 다른 Android 브라우저와 iOS 11.3의 iPhone 및 iPad, Windows 용 Edge 및 데스크톱 운영 체제의 Chrome에서 사용할 수 있습니다.

시카고 불스 로고의 이미지

상품을 만드는 데 도움이 사용자 경험 점점 늘어나는 청중을 위해 몇 가지 중요한 트릭과 아이디어를 공유 할 것입니다. 더 많은 조언을 얻으려면 다음 기사를 참조하십시오. 앱 만드는 방법 .



01. WebAPK 대 Android 단축키

2017 년 Chrome은 Android 사용자를위한 새로운 기능인 WebAPK를 출시했습니다. 이제 사용자가 PWA를 설치하면 (요구 사항을 충족하는 경우) Google Play 서버가 즉석에서 APK (Android 패키지, 기본 앱 컨테이너)를 생성하고 Play 스토어에서 가져온 것처럼 기기에 설치합니다. . 사용자는 안전하지 않은 소스를 활성화하거나 다른 설정을 터치 할 필요가 없습니다.



PWA가 설치되면 홈 화면, 앱 실행기, 설정 및 시스템에서 사용되는 배터리 및 공간에 대한 정보를 포함하여 OS의 다른 일류 시민 앱으로 나타납니다.

PWA가 모든 요구 사항을 충족하지 않거나 Play 서비스가 다운되었거나 연결 문제가 있거나 Firefox 또는 Samsung Internet과 같은 다른 Android 브라우저를 사용중인 경우 홈 화면에 대한 표준 바로 가기가 생성됩니다. 이 아이콘은 Android 8+의 브라우저 브랜드입니다.



WebAPK는 또한 여러분이 알아야 할 훌륭하지만 위험한 기능을 가능하게합니다. PWA는 Android OS의 경계 내에서 도메인과 경로를 소유합니다. 웹 앱 매니페스트의 범위 속성에 따라 사용자가 해당 범위로 수신하는 모든 링크는 브라우저가 아닌 전체 화면 앱으로 전달되므로 사용하는 URL에주의를 기울여야합니다.

모바일 사용자에게 서비스를 제공하는 PWA가 있고 도메인의 루트 폴더에 있다고 가정 해 보겠습니다. WebAPK를 통해 앱을 설치하면 이제 전체 도메인이 PWA에서 소유됩니다. Facebook을 통해 공유하는 설문 조사가 / survey에 있거나 /terms.pdf에서 사용자에게 이메일로 전송되는 이용 약관이 포함 된 PDF가있는 경우 해당 링크를 클릭 할 때 OS가 브라우저가 아닌 PWA를 엽니 다. PWA 라우팅 시스템이 해당 URL에 대해 알고 있고이를 제공하는 방법을 알고 있는지 확인하고 그렇지 않은 경우 다른 범위의 브라우저에서 여는 것이 중요합니다.

02. 맞춤형 웹앱 설치 배너 생성

우리는 할 수 있습니다



브라우저의 웹 앱 설치 배너는 사용자 정의 할 수 없지만 사용자에게 더 많은 정보를 표시 한 후 연기 할 수 있습니다.

PWA에 대한 해당 사용자의 반복 방문을 포함하여 특정 조건이 충족되면 여러 브라우저가 사용자에게 PWA를 설치하도록 초대합니다. 현재 배너에는 사용자가 수락해야하는 이유에 대한 정보가 충분하지 않습니다. 그러나 이벤트를 사용하여 배너를 피할 수 있고, 더 중요한 것은 설치 아이콘과 같이 승인을 생성 할 가능성이 더 높은 항목에 대해 배너를 연기 할 수 있습니다.

첫 번째 단계는 배너의 모양을 취소하고 나중에 사용할 수 있도록 이벤트 객체를 저장하는 것입니다.

// global variable for the event object var installPromptEvent; window.addEventListener('beforeinstallprompt', function(event) { event.preventDefault(); installPromptEvent = event; });

다음 단계는 설치의 장점을 설명하는 사용자 인터페이스 또는 설치 단추를 제공하는 것입니다. 해당 사용자 인터페이스는 다음 함수를 호출합니다.

function callInstallPrompt() { // We can't fire the dialog before preventing default browser dialog if (installPromptEvent !== undefined) { installPromptEvent.prompt(); } }

03. PWA에서 콘텐츠 공유

호환되는 브라우저에서 Web Share API는 운영 체제에서 잘 알려진 공유 대화 상자를 트리거합니다.

호환되는 브라우저에서 Web Share API는 운영 체제에서 잘 알려진 공유 대화 상자를 트리거합니다.

PWA가 전체 화면 모드에 있으면 사용자가 소셜 네트워크와 콘텐츠를 공유 할 수 있도록 브라우저에서 URL 표시 줄 또는 공유 작업이 없습니다. Web Share API를 활용하고 기본 소셜 앱을 열 수 있습니다.

function share() { var text = 'Add text to share with the URL'; if ('share' in navigator) { navigator.share({ title: document.title, text: text, url: location.href, }) } else { // Here we use the WhatsApp API as fallback; remember to encode your text for URI location.href = 'https://api.whatsapp.com/send?text=' + encodeURIComponent(text + ' - ') + location.href } }

04. 분석 추적

PWA가있는 경우 가능한 한 많은 이벤트를 추적해야하므로 현재 측정 할 수있는 모든 항목을 살펴 보겠습니다. Google Analytics API 또는 기타 분석 도구를 사용하여 나중에 이러한 이벤트를 추적 할 수 있습니다.

window.addEventListener('appinstalled', function(event) { // Track event: The app was installed (banner or manual installation) }); window.addEventListener('beforeinstallprompt', function(event) { // Track event: The web app banner has appeared event.userChoice.then(function(result) { if (result.outcome === 'accepted') { // Track event: The web app banner was accepted } else { // Track event: The web app banner was dismissed } }); });

다음으로 중요한 추적 이벤트는 사용자가 홈 화면에서 앱을 열 때입니다. 즉, 사용자가 앱 아이콘을 클릭했거나 WebAPK를 지원하는 Android에서는 PWA 범위를 가리키는 링크도 클릭했습니다.

이를 수행하는 가장 간단한 방법은 매니페스트의 start_url 속성을 통해 다음과 같이 Analytics 스크립트에서 원본으로 자동으로 사용될 수있는 추적 이벤트를 URL에 추가하는 것입니다.

start_url: '/?utm_source=standalone&utm_medium=pwa'

또한 다음 스크립트는 사용자가 현재 브라우저 (true) 또는 독립형 앱 모드 (false)에 있는지 여부를 나타내는 부울을 남겨 둡니다.

var isPWAinBrowser = true; // replace standalone with fullscreen or minimal-ui according to your manifest if (matchMedia('(display-mode: standalone)').matches) { // Android and iOS 11.3+ isPWAinBrowser = false; } else if ('standalone' in navigator) { // useful for iOS < 11.3 isPWAinBrowser = !navigator.standalone; }

그런 다음 푸시 알림을 사용하는 경우 서비스 워커에서 다음과 같은 여러 이벤트를 추적 할 수 있습니다.

self.addEventListener('push', function(e) { // Track event: Push Message Received }); self.addEventListener('notificationclick', function(e) { // Track event: Push Message Clicked, you can read e.action.id to track actions }); self.addEventListener('notificationclose', function(e) { // Track event: Push Message Dismissed });

05. 호환되는 iOS PWA 생성

iOS에서 PWA를 수행 할 때 항상 상태 표시 줄 정의를 확인하여 다른 상태 표시 줄 환경을 만듭니다.

iOS에서 PWA를 수행 할 때 항상 상태 표시 줄 정의를 확인하여 다른 상태 표시 줄 환경을 만듭니다.

많은 사람들이 PWA 지원이 iOS 11.3에서 처음으로 출시 될 것이라고 생각하지만, 사실은 이름이 다르더라도이 개념이 WWDC 07에서 10 년 전에 Steve Jobs에 의해 발표되었다는 것입니다. 이것이 iOS가 홈 화면을 지원하는 이유입니다. 레거시 기술을 사용하여 잠시 동안 오프라인 앱. 그러나 iOS 11.3부터는 Android와 동일한 사양을 지원하기 시작합니다.

iOS 11.3 이전에 설치 경험을 계속 제공하려면 메타 태그를 추가하거나이 작성자가 https://github.com/firtman/iWAM에서 만든 polyfill을 사용해야합니다.

이제 PWA는 iOS를 선택하지 않아도 오프라인에서 사용할 수 있으며 iOS에 설치할 수 있습니다. iOS에서 PWA 사용자 경험에 영향을 미칠 수있는 몇 가지 차이점을 이해하는 것이 중요합니다.

  1. iOS의 아이콘은 UI 문제를 방지하기 위해 정사각형이고 투명하지 않아야합니다. Android에있는 것과 동일한 아이콘을 사용하지 마십시오. iPhone의 경우 120x120 및 180x180을 사용합니다.
  2. SPA가 있거나 범위의 다른 페이지에 링크하는 경우 UI 내에서 탐색 링크를 제공하지 않으면 iOS 사용자가 뒤로 또는 앞으로 이동할 방법이 없으므로 탐색에주의하십시오. 스 와이프 제스처는 전체 화면 PWA에서 작동하지 않습니다.
  3. iOS 11.3의 첫 번째 버전부터 OS는 앱에 액세스 할 때마다 PWA를 다시로드하므로 사용자가 나중에 다시 돌아 오기 위해 앱에서 나가야하는 경우 (예 : 양방향 인증 프로세스) 앱은 기본적으로 처음부터 시작됩니다.

06. 백그라운드에서 데이터 동기화

서비스 워커는 PWA 창 또는 브라우저 탭과 별도의 라이프 사이클을 갖습니다. 그렇기 때문에 사용자가 PWA를 닫은 후에도 백그라운드에서 네트워크 작업을 수행 할 수 있습니다. 보류중인 작업이 있고 해당 지점에서 사용 가능한 네트워크 액세스가없는 경우 나중에 연결이 감지되면 엔진이 백그라운드에서 처리 할 수 ​​있도록합니다.

백그라운드 동기화 API는 현재 일부 브라우저에서만 사용할 수 있으므로 대체를 제공해야합니다. 아이디어는 PWA가 백그라운드 동기화 작업을 수행해야 함을 나타내는 문자열 태그로 플래그를 설정한다는 것입니다.

navigator.serviceWorker.ready.then(function(reg) { reg.sync.register('myTag') });

그런 다음 ServiceWorker에서 이벤트를 수신하고 레이블 인 경우 promise를 반환 할 것으로 예상합니다. 약속이 충족되면 작업이 완료된 것으로 플래그가 지정됩니다. 그렇지 않으면 나중에 백그라운드에서 계속 시도합니다.

self.addEventListener('sync', function(event) { if (event.tag === 'myTag') { event.waitUntil(doAsyncOperationForMyTag()); } });

07. 소셜 네트워크 및 의사 브라우저

사용자가 소셜 네트워크에서 PWA 콘텐츠를 공유하거나 의사 브라우저 (자체 엔진은 없지만 웹보기를 사용하는 브라우저)를 사용하는 경우 몇 가지 문제를 알고 있어야합니다.

예를 들어 Facebook은 Android 및 iOS 앱 내부에서 WebView를 사용하여 사용자가 링크를 클릭 할 때 앱 내 브라우징 경험을 제공합니다. Android에서 대부분의 WebView는 서비스 워커를 지원하지 않으며 PWA를 설치할 수 없으므로 사용자가 Facebook에서 콘텐츠를 열면 PWA는 캐시 된 파일이나 세션 세부 정보없이 호환되지 않는 브라우저 인 것처럼 작동합니다. .

iOS 11.3부터 ​​WebView는 서비스 워커를 지원하지만 사용자가 Safari 또는 iOS의 Chrome 또는 Firefox와 같은 다른 의사 브라우저에서 사용한 것과 동일한 PWA의 복제본입니다.

따라서 앱 설치의 가치를 설명하는 설치 배너 또는 설치 힌트 대화 상자를 렌더링하는 경우 사용자가 단계를 따를 수 없기 때문에 WebView 내에 있는지 확인하십시오. 해당 정보를 숨기거나 기본 브라우저에서 URL을 열도록 사용자를 초대합니다. 이는 Android의 Facebook, iOS의 Facebook, iOS의 Chrome 및 iOS의 Firefox에 적용됩니다. WebView에 있는지 여부를 실시간으로 확인하는 것은 까다 롭지 만 도우미 도구 사용 가능 .

08. Android 기기 및 에뮬레이터에서 테스트

서비스 워커 및 웹 앱 매니페스트를 테스트하려면 로컬 호스트를 제외하고 https가 필요합니다. 처음에는 로컬 데스크톱 테스트가 좋지만 한 시점에서 Android 장치에서 PWA가 작동하는 것을보고 싶습니다. 어떻게 할 수 있습니까? 전화 또는 Android 에뮬레이터에서 개발 서버에 액세스하는 것은 https가 아니고 Android OS 관점에서 localhost가 아니기 때문에 작동하지 않습니다.

솔루션은 Chrome 개발자 도구와 함께 나타납니다. chrome : // inspect로 이동하여 USB 디버깅이 연결된 에뮬레이터 또는 실제 장치를 열면 포트 포워딩을 활성화 할 수 있습니다. 그런 다음 Android 장치의 http : // localhost가 호스트 컴퓨터의 localhost 또는 다른 호스트로 전달됩니다. 이 트릭을 사용하면 Android는 비보안 연결을 통해 PWA를 올바르게 렌더링합니다. 그러나 WebAPK가 패키지를 만들고 설치하는 동안 독립 실행 형 모드에서는 작동하지 않을 수 있습니다.

09. 매장에 게시

PWA Builder는 Windows 10 및 기타 운영 체제 용 스토어 호환 PWA 패키지를 생성하는 Microsoft 온라인 도구입니다.

PWA Builder는 Windows 10 및 기타 운영 체제 용 스토어 호환 PWA 패키지를 생성하는 Microsoft 온라인 도구입니다.

PWA 접근 방식은 매장을 염두에두고 시작되지 않았지만 Play Store의 Twitter Lite 및 Google Maps Go를 비롯한 일부 제품이 매장에서 PWA를 제공하기 시작했습니다. 이것이 관심이있는 경우 Cordova로 패키징하지 않고 PWA를 배포하려면 다음과 같은 옵션을 사용할 수 있습니다.

  • Microsoft Store : 공식 도구를 사용하여 Windows 10 용 PWA를 만들 수 있습니다. pwabuilder.com
  • Google Play Store : 작성 당시 Canary Channel에서 사용할 수있는 신뢰할 수있는 웹 활동을 사용하면 소유 한 PWA를 열고 스토어에 배포하는 Android 앱을 만들어 WebAPK와 유사한 솔루션을 만들 수 있습니다. 당신은 더 배울 수 있습니다 여기 .
  • Apple App Store : 현재 PWA 배포에 대한 공식 솔루션은 없지만 WKWebView는 iOS 11.3의 서비스 워커를 지원하므로 PWA에 대한 간단한 래퍼를 만드는 것이 어렵지 않습니다. 문제는 애플이 스토어에서 그것을 승인 할 것인가? 애플은 래퍼가있는 웹 사이트 솔루션을 원하지 않습니다.

이 기사는 원래의 304 호에 게시되었습니다. 그물 , 웹 디자이너와 개발자를위한 세계 베스트셀러 잡지입니다. 여기서 304 호 구매 또는 여기에서 구독하세요 .

관련 기사: