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는 맞춤형 인앱 설치 흐름을 제공하며 사용자에게 다음을 수행하라는 메시지를 표시합니다. 사용자가 첫 번째 동영상을 다운로드하자마자 앱을 설치해야 합니다. 이것은 사용자가 앱을 설치하려는 의도가 분명히 드러났기 때문에 앱을 오프라인으로 사용할 수 있습니다.
다운로드 항목에 액세스하기 위해 오프라인 페이지 만들기
기기가 인터넷에 연결되어 있지 않고 사용자가 페이지가 오프라인 모드에서 사용할 수 없는 경우, 특별 페이지가 대신 표시됩니다. 이전에 다운로드한 모든 동영상 또는 이전에 다운로드한 다운로드) 오프라인 기능에 대한 간단한 설명이 나와 있습니다.
적응형 기능에 프레임 로드 속도 사용
풍부한 사용자 환경을 제공하기 위해 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는 맞춤설정, 교차 기기 및 플랫폼 보기, 푸시 알림이 있습니다.