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

Wyświetl stronę

Podsumowanie

Na okres świąteczny 2016 aplikacja Trasa Świętego Mikołaja została szybko uaktualniona do progresywnej aplikacji internetowej offline. częściowo dzięki naszemu projektowi sceny.

Wyniki

• Mikołaj to progresywna aplikacja internetowa (PWA), która obsługuje dodawanie treści do ekranu głównego i tryb offline
• 10% kwalifikujących się sesji rozpoczęło się po kliknięciu ikony ATHS
• 75% użytkowników natywnie obsługiwało elementy niestandardowe i Shadow DOM, czyli 2 główne części komponentów internetowych.
• Wynik w Lighthouse: 81
• Tryb offline, wykorzystując interfejs Service Worker API, jest powiązany z leniwym ładowaniem, tak aby w pamięci podręcznej były zapisywane tylko odwiedzone sceny i nie wymagały aktualizacji w przypadku nowych wersji.

Tło

Trasa Świętego Mikołaja to świąteczna tradycja w Google. Każdego roku przez cały grudzień możesz korzystać z gier i doświadczeń edukacyjnych. W czasie gdy Święty Mikołaj robi zasłużoną przerwę, elfy starają się opublikować Trasę Świętego Mikołaja open source, zarówno w internecie, jak Android

Trasa Świętego Mikołaja to duża, interaktywna witryna z wieloma wyjątkowymi „scenami” napisanymi za pomocą polimerowego, który działa z większością nowoczesnych przeglądarek; Ocena, czy przeglądarka użytkownika jest „nowoczesna” Jest określany przez wykrywanie cech: Święty Mikołaj wymaga Set oraz Web Performance API, reszta.

W 2016 r. zaktualizowaliśmy silnik Trasy Świętego Mikołaja, by wiele scen. Nie obejmuje to scen pochodzących z filmów w YouTube ani tych, które dotyczą lokalizacji Świętego Mikołaja, jest oczywiście dostępna tylko przy bezpośrednim połączeniu z biegunem północnym. 📶☃️

Wyzwania

Święty Mikołaj stosuje elastyczne układy stron, które dobrze działają na telefonach, tabletach i komputerach. Witryna zachwyca wspaniałymi multimediami, w tym stylizowanymi treściami wizualnymi i świątecznymi dźwiękami. Zwykła wersja Trasy Świętego Mikołaja ma jednak kilkaset megabajtów! Wynika to z kilku powodów:

• Święty Mikołaj jest obsługiwany w ponad 35 językach, więc wiele zasobów trzeba powielić.
• Poszczególne platformy obsługują różne formaty multimediów (np. MP3 i Ogg).
• Pliki multimedialne są czasami dostarczane w różnych rozmiarach i rozdzielczościach.

Elfy Świętego Mikołaja również ciężko pracują przez cały grudzień, często publikując nowe, krytyczne aktualizacje. przez cały miesiąc. Oznacza to, że przy kolejnych wizytach w pamięci podręcznej przeglądarki użytkownika zasoby muszą być odświeżane.

Te wyzwania:

• Duże zasoby multimedialne na różne „sceny”
• Zmiany wprowadzone w ciągu miesiąca

mogą sprawić, że strategia naiwna offline nie będzie odpowiednia.

Święty Mikołaj zbudowany w technologii Polymer

Zanim zagłębimy się w temat samego projektu Świętego Mikołaja, do wersji PWA offline.

Mikołaj to jednostronicowa aplikacja napisana w języku Polymer 0.5, a obecnie uaktualniona do wersji Polymer. 1.7. Mikołaj składa się ze wspólnego kodu – routera, wspólnych zasobów nawigacyjnych itp. Zawiera też wiele wyjątkowych „scen”.

Każda scena jest dostępna pod innym adresem URL: /village.html, /codelab.html i /boatload.html – i to własny komponent internetowy. Gdy użytkownik otwiera scenę, wstępnie wczytujemy wszystkie wymagane w jej przypadku kod HTML i zasoby (obrazy, dźwięk, CSS, js), które znajdują się pod /scenes/[[sceneName]] w repozytorium Trasy Świętego Mikołaja. W międzyczasie użytkownicy widzą przyjazny moduł wstępnego ładowania, który pokazuje postęp.

Dzięki temu nie musimy ładować zbędnych zasobów w przypadku scen, których użytkownik nie widzi. (to bardzo dużo danych). Oznacza to również, że musimy zachować wewnętrzny „plik manifestu pamięci podręcznej” wszystkich zasobów wymaganych do każdej sceny. Plik manifestu pamięci podręcznej to plik JSON zawierający mapowanie z nazwy pliku na hasz MD5. jej treści.

Wczytaj to, z czego korzystasz

Ten model oszczędza przepustowość, udostępniając tylko zasoby wymagane do obsługi scen odwiedzanych przez użytkownika, a nie niż wstępne wczytywanie całej witryny. Trasa Świętego Mikołaja wykorzystuje technologię Polymer, która pozwala ulepszać niestandardowe elementy w czasie działania, a nie czas wczytywania strony. Przyjrzyjmy się temu fragmentowi:

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

Aby wczytać scenę, aplikacja Trasa Świętego Mikołaja wykonuje te czynności, boatload-scene:

1. Wszystkie elementy sceny (w tym <boatload-scene>) są początkowo nieznane i wszystkie są traktowane jako HTMLUnknownElement z dodatkowymi atrybutami.
2. Po zmianie wybranej sceny element <lazy-pages> otrzyma powiadomienie.
3. Element <lazy-pages> analizuje element sceny i atrybut path, wczytując kod HTML importuj: scenes/boatload/boatload-scene_en.html. Zawiera on pierwiastek Polymer i elementy zależne.
4. Widoczny jest przyjazny moduł wstępnego ładowania.
5. Po załadowaniu i wykonaniu importu HTML usługa <boatload-scene> jest w transparentny sposób uaktualniona do prawdziwy polimerowy żywioł, pełen świątecznych radości. 🎄🎉

Takie podejście wiąże się z pewnymi wyzwaniami. Na przykład nie chcemy uwzględniać zduplikowanych komponentów sieciowych. Jeśli 2 sceny zawierają wspólny element, np. paper-button, usuwamy go w ramach tworzenia projektu. a sami dołącz do jego kodu.

Projektowanie offline

Trasa Świętego Mikołaja jest już starannie podzielona na sceny dzięki Polymer i lazy-pages. po każdej scena ma własny katalog. Zaprojektowaliśmy aplikację do obsługi Trasy Świętego Mikołaja – podstawową funkcję, która umożliwia pracę offline, przeglądarki użytkownika, aby zwracać uwagę na udostępniany kod i „scene” przez Google.

Jaka jest teoria stojąca za mechanizmem Service Worker? Gdy użytkownik korzystający z obsługiwanej przeglądarki wczytuje witrynę, HTML frontendu może zażądać instalacji skryptu service worker. W przypadku Trasy Świętego Mikołaja pracownik działu pomocy mieszka pod adresem /sw.js. Spowoduje to uruchomienie zdarzenia install, które spowoduje zapisanie w pamięci podręcznej całego kodu udostępnionego przez Mikołaja. jest pobierany w czasie działania.

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 scen, np. „scene/boatload/boatload-scene_pl.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.

Nasz proces i wydarzenie install umożliwiają wczytanie Trasy Świętego Mikołaja nawet wtedy, gdy użytkownik jest offline. Dostępne będą jednak tylko sceny wcześniej wczytane przez użytkownika. Jest to idealne rozwiązanie, gdy chcesz ponownie zagrać w grę i pobić swój rekord.

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

Zrobimy to na żywo

Jak wspominaliśmy, elfy przez cały grudzień ciężko pracują i często muszą nowych aktualizacji w ciągu miesiąca. Premiera Trasy Świętego Mikołaja będzie miała unikalną etykietę, np. v20161204112055, sygnatura czasowa publikacji (11:20:55 4 grudnia 2016 r.);

W przypadku tej oznaczonej etykietą wydania każdego pliku generujemy hasz MD5 dla każdego pliku i zapisujemy go w naszej „pamięci podręcznej”. manifestu”. Na nowoczesnym dysku SSD trwa to tylko kilka sekund.

Każda wersja jest wdrożona w unikalnej ścieżce na serwerze statycznego buforowania Google. Oznacza to, że starsze wersje nigdy nie są usuwane. Oznacza to, że po opublikowaniu nowej wersji wszystkie zasoby będą miały inny adres URL – nawet jeśli tak się nie stało i wszystko, co jest w pamięci podręcznej przeglądarki lub mechanizmu Service Worker, będzie bezużyteczne, chyba że dodatkowej pracy.

Wdrażamy też nową wersję produkcyjnej zasoby – kod HTML i usługa indeksu Świętego Mikołaja Worker, która jest dostępna na stronie https://santatracker.google.com/. Spowoduje to zastąpienie starej wersji.

Po załadowaniu Trasy Świętego Mikołaja przeglądarka sprawdza, czy jest dostępna zaktualizowana usługa, i pobierze ją, jeśli i dostępności informacji. W naszym przypadku każda wersja generuje kod o innej długości bajtów. Przeglądarka traktuje to jako uaktualnienie i wykonuje nowe zdarzenie install.

W tym momencie przeglądarki użytkownika będą przeglądać nowy „plik manifestu pamięci podręcznej”. Zostanie on porównany z istniejącą pamięcią podręczną użytkownika. Jeśli zasoby mają inny hasz MD5, usuń je z pamięci podręcznej i poproś przeglądarkę o ponowne pobranie. Jednak w większości przypadków treści zapisane w pamięci podręcznej są w dużej mierze takie same lub występują tylko niewielkie różnice.

W aplikacji Trasa Świętego Mikołaja zmiana pracownika usługi spowoduje, że przeglądarka użytkownika natychmiast załaduje się ponownie.

Przeglądanie w trybie offline

Oczywiście musieliśmy też wprowadzić pewne zmiany w interfejsie, żeby obsługiwać korzystanie z trybu offline. użytkownicy, którzy mogą się nie spodziewać, że strona będzie działać offline.

Mały baner informuje, kiedy przeglądasz treści w trybie offline. Wszystkie sceny, które nie są zapisane w pamięci podręcznej, są „zablokowane” i nieklikalny. Dzięki temu użytkownicy nie będą mieli dostępu do treści, które są niedostępne.

Trasa Świętego Mikołaja regularnie wysyła żądania do interfejsu API Świętego Mikołaja. Jeśli te żądania nie powiodą się lub przekroczą limit czasu, zakładamy, że użytkownik jest offline. Używamy tego interfejsu API, a nie wbudowanego w przeglądarkę navigator.onLine właściwość: spowodowałoby to tylko (poinformują nas, czy użytkownik jest online). (jest to tzw. Lie-Fi).

Połączenie międzynarodowe

Choć większość naszych użytkowników to język angielski (następnie japoński, portugalski, hiszpański i francuskiego), Święty Mikołaj jest budowany i wydawany w ponad 35 różnych językach.

Gdy użytkownik wczytuje Trasę Świętego Mikołaja, język przeglądarki i inne wskazówki dotyczące wyboru języka wyświetlania reklam. Większość użytkowników nigdy nie zastępuje tego języka. Jeśli jednak użytkownik wybierze nowy język za pomocą naszego selektora, potraktujemy to jako uaktualnienie – tak jak powyżej, gdy dostępna będzie nowa wersja Trasy Świętego Mikołaja.

Inaczej mówiąc, aktualna wersja Trasy Świętego Mikołaja dla pracowników usługowych jest w rzeczywistości krotką ciągu (build,language).

Dodaj do ekranu głównego

Święty Mikołaj pracuje offline i udostępnia mechanizm Service Worker, dlatego kwalifikujący się użytkownicy są proszeni o na ekran główny. W 2016 roku około 10% odpowiednich wczytań pochodziło z ikony ekranu głównego.

Podsumowanie

Udało nam się szybko przekształcić Trasę Świętego Mikołaja w PWA offline, co zapewniło nam – dzięki naszemu projektowi scen, który ułatwił nam pracę z wykorzystaniem materiałów komponentów sieciowych. Wykorzystuje też nasz system kompilacji, aby przeprowadzić efektywne uaktualnienia, unieważniając tylko zmienione zasoby.

Chociaż Mikołaj to rozwiązanie stworzone specjalnie dla Ciebie, wiele z jego zasad znajdziesz w aplikacji App Toolbox w projekcie. Warto wypróbować tę aplikację, jeśli tworzysz od podstaw nową aplikację PWA – lub jeśli szukasz podejście niezależne od platformy, wypróbuj Biblioteka Workspace.