Google I/O를 시청해 주셔서 감사합니다. 주문형 콘텐츠를 확인하세요.

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

PWA로 사용되는 산타 추적기

요약

Santa Tracker는 2016년 연말연시 시즌에 오프라인 프로그레시브 웹 앱으로 빠르게 업그레이드되었습니다. 기존 장면 디자인 덕분입니다

결과

산타는 홈 화면에 추가 (ATHS) 및 오프라인을 지원하는 프로그레시브 웹 앱 (PWA)입니다.
요건을 충족하는 세션의 10% 가 ATHS 아이콘을 통해 시작됨
사용자의 75% 가 웹 구성요소의 두 가지 핵심 부분인 커스텀 요소와 Shadow DOM을 기본적으로 지원
Lighthouse 점수 81
Service Worker API를 통한 오프라인은 지연 로드와 연결되어 방문한 장면만 캐시하고 새 버전에서 이를 자동으로 업그레이드합니다.

배경

산타 추적기는 Google의 연말연시 전통입니다. 매년 12월 한 달 동안 게임과 교육 경험을 통해 연말연시를 기념할 수 있습니다. 산타가 잠시 쉴 수 있는 동안 엘프 친구들은 산타 추적기를 공개하기 위해 웹에서 오픈소스로 Android.

웹의 산타 추적기는 대형 대화식 사이트로서 많은 독특한 '장면'이 있으며 Polymer는 대부분의 최신 브라우저를 지원합니다. 사용자 브라우저가 '최신' 상태인지에 대한 평가 특성 감지를 통해 결정됩니다. 산타 찾기 Set 및 Web Performance API 중에서 기타 등등

2016년에 우리는 산타 추적기의 기반 엔진을 업그레이드하여 대부분의 만들 수 있습니다. YouTube 동영상이나 산타의 실시간 위치를 다루는 장면은 제외됩니다. 물론 북극과 직접 연결된 경우에만 사용할 수 있습니다! 📶☃️

도전과제

산타는 휴대전화, 태블릿, 데스크톱에서 원활하게 작동하는 반응형 디자인을 채택했습니다. 이 사이트는 멋진 멀티미디어를 사용하여 즐거움을 선사합니다. 여기에는 양식화된 시각 자료와 휴일 테마의 오디오 등이 포함됩니다. 그러나 산타 추적기의 일반 빌드는 수백 메가바이트입니다. 여기에는 다음과 같은 몇 가지 이유가 있습니다.

산타는 35개 이상의 언어로 지원되므로 많은 애셋이 중복되어야 합니다.
플랫폼에 따라 미디어 지원 여부가 다릅니다 (예: mp3 및 ogg).
멀티미디어 파일은 경우에 따라 다양한 크기와 해상도로 제공될 수 있습니다.

산타의 엘프도 12월 한 달 동안 분주하게 열심히 노력하고 있습니다. 한 달 동안 계속 표시됩니다 즉, 사용자의 브라우저에서 이미 캐시한 애셋은 재방문 시 새로고침해야 할 수 있습니다.

이러한 과제는 다음과 같습니다.

다양한 '장면'을 위한 대규모 멀티미디어 리소스
한 달 동안 변경사항 공개

비효율적인 오프라인 전략으로는 적합하지 않습니다.

Polymer로 만든 산타

산타의 전반적인 디자인에 대해 이야기한 다음 오프라인 PWA로 업그레이드했습니다.

산타는 Polymer 0.5로 작성된 단일 페이지 애플리케이션으로, 지금은 Polymer로 업그레이드되었습니다. 1.7. 산타는 공유 코드 집합(라우터, 공유 탐색 애셋 등)으로 구성됩니다. 독특한 '장면'도 많이 있습니다.

각 장면은 다른 URL(/village.html, /codelab.html, /boatload.html이며 자체 웹 구성요소입니다. 사용자가 장면을 열면 모든 필수 HTML 및 애셋 (이미지, 오디오, CSS, js)이 미리 로드됩니다. 산타 추적기 저장소의 /scenes/[[sceneName]] 아래에 있습니다. 이때 사용자에게 진행률을 보여주는 친숙한 프리로더가 표시됩니다.

이 접근 방식을 사용하면 사용자에게 보이지 않는 장면에 불필요한 애셋을 로드할 필요가 없습니다. (데이터가 엄청나죠) 이는 또한 내부 '캐시 매니페스트'를 필요한 모든 애셋을 모든 장면에 있습니다. 캐시 매니페스트는 파일 이름과 MD5 해시 간의 매핑을 저장하는 JSON 파일입니다. 확인할 수 있습니다

사용 중인 항목 로드

이 모델은 대역폭을 절약해 주므로 사용자가 방문하는 장면에 필요한 리소스만 제공하므로 전체 사이트를 한 번에 미리 로드하는 것보다 훨씬 더 편리할 수 있습니다 산타 추적기는 Polymer의 기능을 활용하여 로드 시간을 단축할 수 있습니다. 다음 코드를 참조하세요.

<lazy-pages id="lazypages" selected-item="&#123;{selectedScene}}" ... >
    <dorf-scene id="village" route="village" icon="1f384" permanent
        mode$="[[mode]]"
        path$="scenes/dorf/dorf-scene_[[language]].html"
        class="santa-scene" allow-page-scrolling></dorf-scene>

    <boatload-scene route="boatload" icon="26f5"
        path$="scenes/boatload/boatload-scene_[[language]].html"
        loading-bg-color="#8fd7f7"
        loading-src="scenes/boatload/img/loading.svg"
        logo="scenes/boatload/img/logo.svg"
        class="santa-scene"></boatload-scene>

산타 추적기가 다음 단계에 따라 장면을 로드합니다. boatload-scene:

모든 장면 요소 (<boatload-scene> 포함)를 처음에는 알 수 없으며 모두 다음으로 처리됩니다. 일부 추가 속성이 있는 HTMLUnknownElement.
선택한 장면이 변경되면 <lazy-pages> 요소에 알림이 전송됩니다.
<lazy-pages> 요소는 장면의 요소와 path 속성을 결정하여 HTML을 로드합니다. scenes/boatload/boatload-scene_en.html 가져오기 여기에는 폴리머 요소와 종속 요소가 포함됩니다.
익숙한 프리로더가 표시됩니다.
HTML 가져오기가 로드되고 실행되면 <boatload-scene>가 진짜 폴리머 요소로 연말연시의 기운을 북돋아줍니다. 🎄🎉

이 접근 방식에는 어려움이 있습니다. 예를 들어 중복된 웹 구성요소를 포함하지 않아야 합니다. 두 장면이 공통 요소를 사용하는 경우(예: paper-button, 빌드의 일부로 제거합니다. 대신 산타의 공유 코드에 포함할 수 있습니다.

오프라인 디자인

Santa Tracker는 Polymer와 lazy-pages 덕분에 이미 장면으로 깔끔하게 세분화되어 있습니다. + 각 장면에 자체 디렉터리가 있습니다. 우리는 산타 추적기의 서비스 워커를 설계했습니다. 산타 추적기의 서비스 워커는 사용자의 브라우저에서 공유 코드와 '장면'을 구분해야 합니다. 있습니다.

서비스 워커에 대한 이론은 무엇인가요? 지원되는 브라우저에서 사용자가 사이트를 로드할 때 프런트엔드 HTML에서 서비스 워커 설치를 요청할 수 있습니다. 산타 추적기의 경우 서비스 워커는 /sw.js에 있습니다. 그러면 산타의 공유 코드를 모두 사전 캐시하는 install 이벤트가 실행되므로 가져올 수 있습니다

서비스 워커는 일단 설치되면 모든 HTTP 요청을 가로챌 수 있습니다. 산타 추적기의 경우 간소화된 결정 흐름은 다음과 같습니다.

요청이 이미 캐시되었나요?
- 좋습니다. 캐시된 응답을 반환합니다.
요청이 'Scene/boatload/boatload-scene_en.html'과 같은 장면 디렉터리와 일치하나요?
- 네트워크 요청을 실행하고 결과를 사용자에게 반환하기 전에 캐시에 저장합니다.
그 외의 경우에는 일반 네트워크 요청을 실행합니다.

흐름과 install 이벤트를 사용하면 사용자가 오프라인 상태일 때도 산타 추적기를 로드할 수 있습니다. 하지만 사용자가 이전에 로드한 장면만 사용할 수 있습니다. 게임을 다시 플레이하고 최고점수를 넘길 때 유용한 기능입니다.

예리한 관찰자의 경우 Google의 캐싱 전략에서는 콘텐츠의 변경이 허용되지 않는다는 점에 유의하세요. 사용자의 브라우저에 파일이 캐시되면 변경되지 않습니다. 이에 관한 설명은 나중에 자세히 다룹니다.

라이브로 진행

말씀드렸듯이 산타의 엘프는 12월 한 달 동안 열심히 일하며 지속적으로 업데이트되고 있습니다 산타 추적기의 출시 버전이 빌드되면 고유한 라벨이 지정됩니다(예: v20161204112055, 발표곡의 타임스탬프 (2016년 12월 4일 11:20:55)입니다.

라벨이 지정된 이 릴리스에서는 모든 파일의 MD5 해시를 생성하여 이를 '캐시'에 저장합니다. 합니다. 최신 솔리드 스테이트 디스크에서는 이 작업이 빌드 프로세스에 몇 초밖에 걸리지 않습니다.

각 출시 버전은 Google의 정적 캐싱 서버의 고유한 경로에 배포됩니다. 즉, 이전 출시 버전은 삭제되지 않습니다. 즉, 새 출시 후에는 모든 애셋의 URL이 달라집니다. 브라우저나 서비스 워커가 캐시한 모든 데이터는 소용이 없을 것입니다. 추가 작업이 필요할 수 있습니다

'prod'라고 하는 새 버전도 배포합니다. 리소스—산타의 색인 HTML 및 서비스 worker: https://santatracker.google.com/에 있습니다. 이전 버전을 덮어씁니다.

산타 추적기가 로드될 때마다 브라우저는 업데이트된 서비스 워커를 확인하고 있습니다. 여기서는 각 릴리스에서 바이트가 다른 코드를 생성합니다. 브라우저는 이를 업그레이드로 보고 새 install 이벤트를 실행합니다.

이 시점에서 사용자의 브라우저는 새 '캐시 매니페스트'를 확인합니다. 이를 사용자의 기존 캐시와 비교하고 자산에 다른 MD5 해시가 있는 경우 캐시에서 삭제하고 브라우저에 다시 가져오도록 요청하세요. 하지만 대부분의 경우 캐시된 콘텐츠는 대체로 동일하거나 사소한 차이점만 있습니다.

산타 추적기에서 서비스 워커를 업그레이드하면 사용자의 브라우저가 즉시 다시 로드됩니다.

오프라인 탐색 환경

물론 오프라인 경험을 지원하기 위해 UI를 일부 변경해야 했습니다. 웹사이트가 오프라인에서 작동할 것이라고 예상하지 못한 사용자도 쉽게 이해할 수 있습니다.

오프라인으로 탐색할 때 작은 배너가 표시됩니다. 캐시되지 않은 모든 장면은 '고정'됩니다. 클릭할 수 없게 됩니다. 이렇게 하면 사용자가 사용할 수 없는 콘텐츠에 액세스할 수 없습니다.

산타 추적기는 산타의 API에 정기적으로 요청합니다. 이러한 요청이 실패하거나 시간 초과되면 사용자가 오프라인 상태라고 가정합니다. 브라우저에 내장된 navigator.onLine 속성: 이 속성은 사용자가 온라인 상태인지 여부를 Google에 알려주십시오. 이를 Lie-Fi라고도 합니다.

국제적인 연결성

사용자 대부분은 영어 (일본어, 포르투갈어, 스페인어, 산타는 35개 이상의 다양한 언어로 제작 및 출시됩니다.

사용자가 산타 추적기를 로드하면 브라우저 언어 기타 신호를 바탕으로 게재할 언어를 선택할 수 있습니다 대부분의 사용자는 이 언어를 덮어쓰지 않습니다. 그러나 사용자가 선택 도구를 통해 새 언어를 선택하면 Google에서는 이를 업그레이드가 위의 경우와 마찬가지로 산타 추적기의 새 버전을 사용할 수 있습니다.

다시 말해서, 서비스 워커의 용도에 대한 현재 버전의 산타 추적기입니다. 실제로 (build,language)의 튜플입니다.

홈 화면에 추가

산타는 오프라인으로 작업하고 서비스 워커를 제공하므로 자격을 갖춘 사용자에게 설치하라는 메시지가 표시됩니다. 홈 화면에 추가합니다. 2016년에는 요건을 충족하는 로드의 약 10% 가 홈 화면 아이콘에서 발생했습니다.

결론

산타 추적기를 오프라인 PWA로 신속하게 전환하여 안정적이고 몰입도 높은 기존 장면 디자인 덕분에, 기존에 사용하던 Polymer와 살펴보겠습니다 또한 빌드 시스템을 활용하여 효율적인 업그레이드를 수행하고 변경된 애셋만 무효화합니다.

산타는 대체로 맞춤 제작된 솔루션이지만, 그 많은 원칙은 Polymer 프로젝트의 App Toolbox 새 PWA를 처음부터 빌드하거나 프레임워크에 구애받지 않는 접근 방식을 사용하는 경우 Workbox 라이브러리.