Trasa Świętego Mikołaja w ramach aplikacji PWA

Wyświetlanie witryny

Podsumowanie

Na potrzeby sezonu świątecznego 2016 aplikacja Trasa Świętego Mikołaja została szybko uaktualniona do progresywnej aplikacji internetowej offline.

Wyniki

  • Mikołaj to progresywna aplikacja internetowa (PWA) obsługująca dodawanie do ekranu głównego (ATHS) i tryb offline
  • 10% kwalifikujących się sesji rozpoczęło się za pomocą ikony ATHS
  • 75% użytkowników natywnie obsługuje elementy niestandardowe i model shadow DOM, czyli 2 podstawowe elementy komponentów internetowych.
  • Wynik Lighthouse: 81
  • Tryb offline za pośrednictwem interfejsu Service Worker API wiąże się z leniwym ładowaniem, które polega na buforowaniu tylko odwiedzonych scen i cichym uaktualnianiu ich w nowych wersjach.

Wprowadzenie

Trasa Świętego Mikołaja to tradycyjna świąteczna tradycja w Google. Co roku w grudniu możesz świętować ten sezon grom i materiałom edukacyjnym. Podczas gdy Święty Mikołaj robi zasłużoną przerwę, elfy udostępniają Trasę Świętego Mikołaja jako oprogramowanie open source, zarówno w internecie, jak i na Androidzie.

W internecie Trasa Świętego Mikołaja to duża, interaktywna witryna z wieloma wyjątkowymi „scenami” – napisana przy użyciu aplikacji Polymer, która działa w większości nowoczesnych przeglądarek. Ocena tego, czy przeglądarka użytkownika jest „nowoczesna”, zależy od wykrywania funkcji. Święty Mikołaj wymaga m.in. Set i Web Performance API.

W 2016 roku zaktualizowaliśmy system obsługi Trasy Świętego Mikołaja, by umożliwić korzystanie z trybu offline w większości przypadków. Nie dotyczy to scen opartych na filmach z YouTube lub takich, które dotyczą lokalizacji Świętego Mikołaja na żywo, które są oczywiście dostępne tylko wtedy, gdy są bezpośrednio połączone z biegunem północnym. 📶☃️

Trasa Świętego Mikołaja na urządzeniu z Androidem
Trasa Świętego Mikołaja na urządzeniu z Androidem

Wyzwania

Święty Mikołaj jest zaprojektowany tak, by dobrze działał na telefonach, tabletach i komputerach. Witryna zachwyca też znakomitymi multimediami, w tym stylizowanymi treściami wizualnymi i świątecznymi treściami audio. Jednak zwykła konstrukcja Trasy Świętego Mikołaja ma kilkaset megabajtów. Dzieje się tak z kilku powodów:

  • Święty Mikołaj jest obsługiwany w ponad 35 językach, więc wiele zasobów musi być duplikowanych.
  • Różne platformy obsługują różne formaty treści (np. MP3 i Ogg).
  • Pliki multimedialne mogą mieć różne rozmiary i rozdzielczości.

Elfy również pracują przez cały grudzień, często publikując nowe, krytyczne aktualizacje w ciągu miesiąca. Oznacza to, że przy kolejnych wizytach może być konieczne odświeżenie zasobów zapisanych w pamięci podręcznej przeglądarki użytkownika.

Te wyzwania:

  • Duże zasoby multimedialne do różnych scen
  • Zmiany wprowadzone w ciągu miesiąca

...w efekcie brak możliwości stosowania naiwnej strategii offline.

Święty Mikołaj zbudowany przy użyciu technologii Polymer

Warto przyjrzeć się ogólnemu wyglądowi Świętego Mikołaja, zanim przejdziemy do szczegółów przekształcenia go w progresywną aplikację internetową.

Mikołaj to aplikacja jednostronicowa napisana w Polymer 0.5, a teraz uaktualniona do Polymer 1.7. Święty Mikołaj to wszystko: router, udostępnione zasoby nawigacyjne itp. Zawiera też wiele niepowtarzalnych „scen”.

Moduł wstępnego ładowania

Każda scena jest dostępna pod innym adresem URL – /village.html, /codelab.html i /boatload.html – i jest osobnym komponentem internetowym. Gdy użytkownik otwiera scenę, wstępnie wczytujemy cały wymagany kod HTML i zasoby (obrazy, audio, CSS, js), które znajdują się w repozytorium /scenes/[[sceneName]] w repozytorium Trasy Świętego Mikołaja. W takim przypadku wyświetlany jest prosty moduł wstępnego ładowania, który pokazuje postęp.

Dzięki temu nie musimy ładować zbędnych zasobów dla scen, których użytkownik nie widzi (a to dużo danych). Oznacza to również, że musimy zapisać wewnętrzny „manifest w pamięci podręcznej” wszystkie zasoby wymagane dla każdej sceny. Plik manifestu pamięci podręcznej to plik JSON zawierający mapowanie z nazwy pliku na skrót MD5 jego zawartości.

Wczytaj to, czego używasz

Ten model oszczędza przepustowość, ponieważ obsługuje tylko zasoby wymagane w scenerii odwiedzanej przez użytkownika, zamiast od razu wczytywać całą witrynę. Trasa Świętego Mikołaja korzysta z funkcji Polymer, która aktualizuje niestandardowe elementy w czasie działania, a nie w czasie wczytywania. Zastanów się nad tym fragmentem:

<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>

Trasa Świętego Mikołaja ładuje się w następujący sposób, np. boatload-scene:

  1. Wszystkie elementy sceny (w tym <boatload-scene>) są początkowo nieznane i są traktowane jak HTMLUnknownElement z dodatkowymi atrybutami.
  2. Gdy wybrana scena zostanie zmieniona, element <lazy-pages> otrzyma powiadomienie.
  3. Element <lazy-pages> rozstrzyga element sceny i atrybut path, ładując import HTML scenes/boatload/boatload-scene_en.html. Zawiera element Polymer i jego elementy zależne.
  4. Widać przyjazny moduł wstępnego ładowania.
  5. Po wczytaniu i wykonaniu importu HTML element <boatload-scene> zostanie w przejrzysty sposób uaktualniony do prawdziwego, świątecznego elementu Polymer. 🎄🎉

Takie podejście niesie ze sobą pewne wyzwania. Na przykład nie chcemy dodawać duplikatów komponentów sieciowych. Jeśli 2 sceny korzystają ze wspólnego elementu, np. paper-button, usuwamy ją w ramach procesu budowania i zamiast tego umieszczamy w udostępnionym kodzie Mikołaja.

Projektowanie offline

Dzięki Polymer i lazy-pages Trasa Świętego Mikołaja jest już automatycznie podzielona na sceny; każda scena ma swój własny katalog. Zaprojektowaliśmy skrypt service worker Trasy Świętego Mikołaja, który pozwala działającą w przeglądarce użytkownika w trybie offline. Zwróć uwagę na różnicę między „udostępnionym kodem” a „sceną”.

Na czym polega teoria Service Worker? Gdy użytkownik wczyta Twoją witrynę, kod HTML frontendu może zażądać zainstalowania skryptu service worker. W przypadku Trasy Świętego Mikołaja pracownik usługi mieszka pod adresem /sw.js. Wywołuje to zdarzenie install, które zapisuje w pamięci podręcznej cały udostępniony kod Mikołaja, więc nie trzeba nic pobierać w czasie działania.

Schemat procesu SW

Skrypt service worker po zainstalowaniu może przechwytywać wszystkie żądania HTTP. W przypadku Trasy Świętego Mikołaja uproszczony proces podejmowania decyzji wygląda tak:

  1. Czy żądanie jest już zapisane w pamięci podręcznej?
    • Świetnie. Zwraca odpowiedź z pamięci podręcznej.
  2. Czy żądanie pasuje do katalogu ze scenami, np. „ scen/boatload/boatload-scene_en.html”?
    • Wyślij żądanie sieciowe i zapisz wynik w pamięci podręcznej, zanim zwrócisz go użytkownikowi.
  3. W przeciwnym razie wykonaj zwykłe żądanie sieciowe.

Trasa św. Mikołaja i wydarzenie install mogą się wczytać nawet wtedy, gdy użytkownik jest offline. Dostępne będą jednak tylko sceny wczytane przez użytkownika. To idealne rozwiązanie, jeśli chcesz ponownie zagrać w grę i pobić swój rekord.

Wielbiciele mogą zauważyć, że nasza strategia buforowania nie pozwala na zmiany treści. Plik zapisany w pamięci podręcznej przeglądarki użytkownika nigdy nie jest zmieniany. Więcej na ten temat później.

Zrobimy to na żywo

Jak już wspomnieliśmy, elfy św. Mikołaja ciężko pracują przez cały grudzień i często muszą w ciągu miesiąca publikować nowe aktualizacje. Po utworzeniu wersji Trasy Świętego Mikołaja otrzymuje ona unikalną etykietę – np. v20161204112055, sygnatura czasowa wydania (11:20:55, 4 grudnia 2016 r.).

W przypadku tej oznaczonej etykietą wersji generujemy skrót MD5 każdego pliku i zapisujemy go w pliku manifestu pamięci podręcznej. W przypadku nowoczesnego dysku SSD wydłuża to tylko kilka sekund procesu kompilacji.

Każda wersja jest wdrażana w unikalnej ścieżce na statycznym serwerze pamięci podręcznej Google. Oznacza to, że starsze wersje nigdy nie są usuwane. Oznacza to, że po wydaniu nowej wersji wszystkie zasoby będą miały inny URL, nawet jeśli się nie zmieniły. Zawartość pamięci podręcznej przeglądarki lub skryptu service worker będzie bezużyteczna, chyba że wykonasz dodatkową pracę.

Wdrażamy też nową wersję tak zwanych zasobów „prod” – kodu HTML indeksu Mikołaja oraz skryptu service worker – znajdującego się pod adresem https://santatracker.google.com/. Spowoduje to zastąpienie starej wersji.

Schemat statyczny

Po załadowaniu Trasy Świętego Mikołaja przeglądarka sprawdza, czy jest zaktualizowana wersja skryptu service worker, i je pobiera (jeśli jest dostępna). W naszym przypadku każda wersja generuje kod o różnych bajtach. Przeglądarka traktuje to jako uaktualnienie i wykonuje nowe zdarzenie install.

W tym momencie przeglądarki użytkownika zapoznają się z nowym plikiem manifestu pamięci podręcznej. Wartość ta zostanie porównana z dotychczasową pamięcią podręczną użytkownika. Jeśli zasoby mają inny hasz MD5, usuwamy je z pamięci podręcznej i prosimy przeglądarkę o ponowne pobranie. Zawartość pamięci podręcznej w większości przypadków jest jednak w dużej mierze taka sama lub różni się tylko nieznacznie.

Diagram pamięci podręcznej

W aplikacji Trasa Świętego Mikołaja aktualizacja skryptu service worker powoduje natychmiastowe ponowne załadowanie przeglądarki.

Przeglądanie offline

Oczywiście musieliśmy też wprowadzić w interfejsie kilka zmian, aby zapewnić obsługę offline i ułatwić zrozumienie dla użytkowników, którzy mogą nie spodziewać się, że strona będzie działać offline.

Mały baner informuje o przeglądaniu w trybie offline. Wszystkie sceny, które nie są przechowywane w pamięci podręcznej, są „zablokowane” i nie można ich kliknąć. Dzięki temu użytkownicy nie mają dostępu do treści, które nie są dostępne.

Offline

Trasa Świętego Mikołaja regularnie wysyła żądania do interfejsu API Świętego Mikołaja. Jeśli te żądania nie zostaną zrealizowane lub przekroczą limit czasu, zakładamy, że użytkownik jest offline. Używamy tego interfejsu API, a nie wbudowanej navigator.onLine przeglądarki: informacje te dadzą nam tylko informację, czy użytkownik jest online. (ta metoda jest znana również jako Lie-Fi).

Międzynarodowe połączenie

Chociaż większość naszych użytkowników mówi po angielsku, po japońsku, portugalsku, hiszpańsku i francusku, Święty Mikołaj jest projektowany i dostępny w ponad 35 językach.

Gdy użytkownik wczytuje Trasę Świętego Mikołaja, wybieramy język jej wyświetlania na podstawie języka przeglądarki i innych wskazówek. Większość użytkowników nigdy nie zastępuje tego języka. Jeśli jednak użytkownik wybierze nowy język w selektorze, potraktujemy to tak, jakby pojawiła się nowa wersja – tak jak w przykładzie powyżej, gdy pojawi się nowa wersja Trasy Świętego Mikołaja.

Język

Inaczej mówiąc, obecna wersja Trasy Świętego Mikołaja dla pracowników service worker jest w rzeczywistości kropką (kompilacja,język).

Dodaj do ekranu głównego

Święty Mikołaj działa offline i udostępnia mechanizmy Service Worker, dlatego użytkownicy, którzy spełniają odpowiednie warunki, są proszeni o zainstalowanie aplikacji na swoim ekranie głównym. W 2016 roku około 10% kwalifikujących się wczytań pochodziło z ikony ekranu głównego.

Podsumowanie

Udało nam się szybko przekształcić Trasa Świętego Mikołaja w progresywną aplikację internetową (opracowaną w trybie offline), która zapewniała użytkownikom niezawodną i ciekawą atmosferę. Jest to możliwe dzięki zastosowaniu obecnego projektu sceny, która jest teraz łatwa w użyciu dzięki użyciu komponentów Polymer i sieci. Wykorzystuje też nasz system kompilacji, aby przeprowadzać skuteczne uaktualnienia, unieważniając tylko zmienione zasoby.

Święty Mikołaj to rozwiązanie stworzone na zamówienie, ale wiele z jego zasad znajdziesz w Zestawie narzędzi aplikacji w projekcie Polymer. Zalecamy zapoznanie się z nią, jeśli tworzysz nową PWA od podstaw. Jeśli szukasz podejścia niezależnego od struktur, skorzystaj z biblioteki skrzynki roboczej.