ZDF가 오프라인 지원, 설치 가능 여부, 어두운 모드와 같은 최신 기능을 갖춘 프로그레시브 웹 앱 (PWA)을 만들었는지 알아보세요.
방송사 ZDF가 프런트엔드 기술의 재설계를 고려 중이었을 때 프로그레시브 웹 앱을 자세히 살펴보고 ZDFmediathek 스트리밍 사이트입니다. 개발 대행사 Cellular는 웹 기반 ZDF의 플랫폼별 iOS 및 Android 앱과 동등한 수준의 환경을 제공합니다. 이 PWA에서는 설치 가능, 오프라인 동영상 재생, 전환 애니메이션 및 어두운 모드를 탭합니다.
서비스 워커 추가
PWA의 주요 기능은 오프라인 지원입니다. ZDF의 경우 대부분의 어려운 작업은 Workbox - 라이브러리 집합 다양한 캐싱 전략을 쉽게 지원할 수 있는 Node 모듈입니다. 이 ZDF PWA는 TypeScript 및 React로 빌드되었으므로 Workbox 라이브러리를 사용합니다. Google Kubernetes Engine, create-react-app을 사용하여 정적 자산을 사전 캐시합니다. 이렇게 하면 애플리케이션이 동적 이미지를 만드는 데 집중할 수 있습니다. 동영상 및 메타데이터입니다.
기본 아이디어는 매우 간단합니다. 동영상을 가져와 IndexedDB. 그런 다음 재생 중에 온라인/오프라인 이벤트를 수신하고 기기가 오프라인 상태가 되면 다운로드한 버전을 복원합니다.
하지만 안타깝게도 상황이 좀 더 복잡해졌습니다. 프로젝트 중 하나 웹 브라우저를 사용하는 것이 좋았는데, 오프라인 지원 플레이어는 콘텐츠 ID를 입력으로 사용하여 ZDF API와 통신합니다. 관련 동영상을 재생합니다.
그래서 웹의 가장 강력한 기능 중 하나가 필요합니다. 서비스 워커
서비스 워커는 플레이어가 수행한 다양한 요청을 가로챌 수 있고 IndexedDB의 데이터로 응답합니다. 이렇게 하면 플레이어 코드를 한 줄도 변경하지 않고 새로운 기능을 구현할 수 있습니다.
오프라인 동영상은 꽤 큰 편이므로, 오프라인 동영상은 실제로 기기에 저장될 수 있습니다. StorageManager 이용 API 작업을 시작하기 전에 공간이 부족할 경우 사용자에게 알림 다운로드가 시작됩니다. Safari는 브라우저 목록에 없습니다 이 API를 구현하고 이 문서를 작성하는 당시에는 다른 브라우저에서 할당량을 적용한 방법에 대한 정보 따라서 팀은 소형 유틸리티를 사용하여 사용할 수 있습니다. 이제 종합적인 기사가 하나 더 있는데요, 확인하세요.
커스텀 설치 프롬프트 추가
ZDF PWA는 맞춤형 인앱 설치 흐름을 제공하며 사용자에게 다음을 수행하라는 메시지를 표시합니다. 사용자가 첫 번째 동영상을 다운로드하자마자 앱을 설치해야 합니다. 이것은 사용자가 앱을 설치하려는 의도가 분명히 드러났기 때문에 앱을 오프라인으로 사용할 수 있습니다.
![설치 맞춤 초대입니다.](https://web.developers.google.cn/static/case-studies/zdf/image/custom-invitation-instal-10ab87790d8bb.jpg?authuser=19&hl=ko)
![오프라인으로 소비하기 위해 동영상을 다운로드할 때 트리거되는 맞춤 설치 메시지](https://web.developers.google.cn/static/case-studies/zdf/image/custom-install-prompt-bei-fcf49ed4703b6.jpg?authuser=19&hl=ko)
다운로드 항목에 액세스하기 위해 오프라인 페이지 만들기
기기가 인터넷에 연결되어 있지 않고 사용자가 페이지가 오프라인 모드에서 사용할 수 없는 경우, 특별 페이지가 대신 표시됩니다. 이전에 다운로드한 모든 동영상 또는 이전에 다운로드한 다운로드) 오프라인 기능에 대한 간단한 설명이 나와 있습니다.
![오프라인으로 시청할 수 있는 모든 콘텐츠를 보여주는 오프라인 페이지](https://web.developers.google.cn/static/case-studies/zdf/image/offline-page-showing-con-97273fdc6db79.png?authuser=19&hl=ko)
![오프라인으로 시청할 수 있는 콘텐츠가 없음을 보여주는 오프라인 페이지](https://web.developers.google.cn/static/case-studies/zdf/image/offline-page-showing-no-8a1022d8134c8.png?authuser=19&hl=ko)
적응형 기능에 프레임 로드 속도 사용
풍부한 사용자 환경을 제공하기 위해 ZDF PWA에 몇 가지 섬세한 전환이 포함되어 있습니다.
사용자가 스크롤하거나 이동할 때 발생합니다. 다음과 같은 저사양 기기에서
애니메이션은 일반적으로 반대 효과가 있으며 앱이 느려지고
60fps에서 실행되지 않으면 응답 속도가
느려집니다 이것을
앱이 requestAnimationFrame()
를 통해 실제 프레임 속도를 측정하는 동안
값이
특정 임곗값에
집중할 수 있습니다
const frameRate = new Promise(resolve => {
let lastTick;
const samples = [];
function measure() {
const tick = Date.now();
if (lastTick) samples.push(tick - lastTick);
lastTick = tick;
if (samples.length < 20) requestAnimationFrame(measure);
else {
const avg = samples.reduce((a, b) => a + b) / samples.length;
const fps = 1000 / avg;
resolve(fps);
}
}
measure();
});
이 측정값이 기기의 대략적인 측정치만 제공하더라도 각 부하에 따라 달라지지만, 여전히 문제 해결에 도움이 되는 많은 것을 배웠습니다. 사용 사례에 따라 새로운 적응형 로드 기술 개발자가 구현할 수 있는 API입니다. 이 접근 방식의 한 가지 큰 이점은 모든 플랫폼에서 사용할 수 있습니다
어두운 모드
최신 모바일 환경에서 인기 있는 기능은 어두운 모드 특히 많은 사람들이 어두운 UI를 선호합니다. ZDF PWA 사용자가 조명과 조명 간에 전환할 수 있는 스위치를 제공할 뿐만 아니라 OS 전체 색상 환경설정의 변화에도 반응합니다. 이 방향으로 앱이 미리 보기 설정을 설정한 기기에서 테마 기반을 변경합니다.
결과
새로운 프로그레시브 웹 앱이 2020년 3월 공개 베타 버전으로 비공개 출시되었습니다. 긍정적인 의견을 많이 받았습니다. 베타 단계에서는 PWA는 여전히 자체 임시 도메인에서 실행됩니다. 그러나 PWA는 공개적으로 홍보되지 않았으며 사용자가 꾸준히 증가하고 있습니다. 여러 항목 이 중 Windows 10 사용자는 Microsoft Store에서 제공되는 PWA에 관해 알아보고 플랫폼별 앱처럼 설치합니다.
다음 단계
ZDF는 맞춤설정, 교차 기기 및 플랫폼 보기, 푸시 알림이 있습니다.