Zmień swoją witrynę AMP w PWA

Progresywne aplikacje webowe wykorzystujące procesy service worker umożliwiają zapewnianie bogatych treści offline i spójnych wrażeń użytkowników mimo różnych mocy sieci. Dzięki buforowaniu zasobów w przeglądarce aplikacja PWA jest w stanie dostarczyć użytkownikowi dane, zasoby i strony offline, aby go angażować i informować.

Ten przewodnik nauczy Cię, jak przekształcić witrynę AMP w instalowaną PWA z funkcjami offline poprzez dodanie pliku Web Manifest i skryptu Service Worker obsługiwanego przez mechanizm Service Worker AMP.

Pobranie i uruchomienie kodu startowego

Pobierz kod startowy stąd.

Użyj lokalnego serwera WWW do wyświetlania podglądu witryny internetowej.

PORADA — szybki serwer WWW — uruchom python -m SimpleHTTPServer.

Wyświetlona ma zostać strona docelowa Lyrical Lightning, festiwalu Mobile Music Magic. Na stronie głównej znajduje się jeden link do wyświetlenia harmonogramu i sceny, na której znajdują się zespoły.

Użytkownicy naszej witryny mogą mieć słaby dostęp sieci podczas imprezy, kiedy to prawdopodobnie będą chcieli uzyskać dostęp do harmonogramu. To czyni go doskonałym kandydatem do przekształcenia w PWA, którą można zainstalować na ekranie głównym naszego użytkownika, a która zapewnia wszystkie krytyczne funkcje nawet w trybie offline.

Utworzenie pliku Web App Manifest

Manifest aplikacji internetowej to prosty plik JSON, który informuje przeglądarkę o Twojej aplikacji internetowej i o tym, jak powinna działać po „zainstalowaniu” na urządzeniu mobilnym lub komputerze użytkownika. Manifest jest wymagany przez wiele przeglądarek do pokazywania monitu Dodaj do ekranu głównego.

Do swojego repozytorium dodaj plik o nazwie manifest.json z następującym kodem:

{
"short_name": "LyLy",
"name": "Lyrical Lyghtning",
"icons": [
{
"src": "./images/amplogo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "./images/amplogo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/index.html",
"background_color": "#222325",
"display": "standalone",
"scope": "/",
"theme_color": "#222325"
}

Dodanie skryptu AMP Service Worker

Service worker to oddzielny od strony internetowej skrypt uruchamiany przez przeglądarkę w tle, który rozszerza funkcje przeglądarki poprzez buforowanie żądań w celu poprawy wydajności i zapewnienia funkcjonalności offline. Utworzenie skryptu service worker od podstaw jest możliwe, ale czasochłonne. Biblioteki takie jak Workbox są pomocne, ale AMP idzie o krok dalej, oferując mechanizm AMP Service Worker, w którym AMP bezpośrednio automatyzuje wiele kroków, takich jak buforowanie skryptów, zasobów i dokumentów AMP, a także implementację wspólnych najlepszych praktyk, takich jak wstępne ładowanie nawigacji.

Mechanizm AMP Service Worker po zainstalowaniu automatycznie buforuje skrypty AMP i dokumenty po zażądaniu ich przez użytkownika. Zaczniemy od dodania podstawowego mechanizmu AMP Service Worker.

Tworzenie pliku service worker

Utwórz plik o nazwie sw.js i dodaj następujący kod:

importScripts('https://cdn.ampproject.org/sw/amp-sw.js');
AMP_SW.init();

Dzięki zaledwie dwóm linijkom kodu można zaimportować mechanizm AMP Service Worker do swojego skryptu Service Worker i zainicjować go.

Automatyczne instalowanie żądanego skryptu service worker na swoich stronach AMP

Witryny internetowe AMP używają składnika <amp-install-serviceworker> do instalowania procesu service worker w tle przeglądarki, gdy użytkownik korzysta z treści.

Umieść wymagany znacznik skryptu w sekcji head pliku index.html oraz element <amp-install-serviceworker> w sekcji <body>:

…

<script async custom-element="amp-install-serviceworker" src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>

…
...
<amp-install-serviceworker src="/sw.js"
           data-iframe-src="install-sw.html"
           layout="nodisplay">
</amp-install-serviceworker>

</body>

Ważne — aby móc buforować całą zawartość witryny, plik service worker należy serwować z katalogu głównego (/sw.js).

Element <amp-install-serviceworker> instaluje skrypt service worker, tworząc ramkę iframe i uruchamiając plik data-iframe-src. Utwórz plik install-sw.html i dodaj następujący kod:

<!doctype html>
<title>installing service worker</title>
<script type='text/javascript'>
 if('serviceWorker' in navigator) {
   navigator.serviceWorker.register('./sw.js');
 };
</script>

Ramka iframe rejestruje plik AMP Service Worker w przeglądarce.

Dostosowanie buforowanej zawartości

AMP Service Worker ma wbudowane zalety, a jednocześnie zapewnia opcjonalne pola, które można skonfigurować w celu optymalizacji pod kątem potrzeb aplikacji.

Nasza aplikacja festiwalu muzycznego będzie buforować zasoby obrazów, wstępnie pobierać link do harmonogramu i określać stronę offline.

Buforowanie zasobów

Mechanizm AMP Service Worker można skonfigurować do buforowania zasobów takich jak obrazy, filmy i czcionki. Użyjemy go do buforowania naszego obrazu tła i logotypu AMP. Otwórz plik sw.js i zaktualizuj go przy użyciu poniższego kodu:

importScripts('https://cdn.ampproject.org/sw/amp-sw.js');
AMP_SW.init({
assetCachingOptions: [{
regexp: /\.(png|jpg)/,
cachingStrategy: 'CACHE_FIRST'
}]
});

Określiliśmy strategię buforowania cache first. To znaczy, że aplikacja będzie starała się najpierw serwować zbuforowane obrazy, zanim zażąda czegokolwiek z sieci. Jest to szczególnie przydatne w przypadku tej aplikacji, ponieważ nie będziemy aktualizować naszego obrazu tła ani logotypu AMP.

Wstępne pobieranie linków

AMP Service Worker wstępnie ładuje linki, które mają atrybut data-rel=prefetch. Dzięki temu użytkownicy mogą przeglądać strony w trybie offline, nawet jeśli jeszcze ich nie odwiedzili. Dodamy ten atrybut do naszego znacznika linku do pliku lineup.html.

...
<a href="/lineup.html" data-rel="prefetch">See Full Lineup</a>
...

Pokazywanie strony trybu offline

W celu poradzenia sobie z nieoczekiwanymi przypadkami lub kliknięciami linków do stron, których nie pobraliśmy wstępnie, dodamy stronę trybu offline, aby oferować spójne doświadczenie użytkownika, które jest „zorientowane na markę”, w przeciwieństwie do pokazywania ogólnej strony trybu offline przeglądarki. Pobierz plik offline.html stąd i zaktualizuj plik sw.js przy użyciu następującego kodu:

importScripts('https://cdn.ampproject.org/sw/amp-sw.js');
AMP_SW.init({
assetCachingOptions: [{
regexp: /\.(png|jpg)/,
cachingStrategy: 'CACHE_FIRST'
}],
offlinePageOptions: {
url: '/offline.html',
assets: []
}
});

Testowanie PWA

Możesz sprawdzić, czy mechanizm AMP Service Worker buforuje niezbędne zasoby i zapewnia idealne rozwiązanie trybu offline, korzystając z konsoli Chrome DevTools.

Przetestujemy Lyrical Lyghtning, otwierając okienko DevTools poprzez naciśnięcie klawiszy Ctrl + Shift + I w systemie Windows lub Cmd + Opt + I w systemie Mac. Możesz również kliknąć prawym przyciskiem myszy na stronie i wybrać z menu polecenie Zbadaj. Następnie wybierz kartę Application, aby wyświetlić rejestrację skryptu service worker.

Kliknij pole offline, aby przełączyć się w tryb offline. Kliknij link see full lineup i przejdź do strony offline.html w celu sprawdzenia, czy linki zostały prawidłowo zbuforowane i wstępnie pobrane.

Porada — w celu wykonania dokładnej analizy funkcji progresywnej aplikacji webowej uruchom narzędzie Lighthouse firmy Google, aby wygenerować raport.

Gratulacje!

Udało Ci się utworzyć PWA z AMP! Dzięki temu samouczkowi wiesz jak:

Utworzyć plik Web App Manifest
Zainstalować skrypt Service Worker w AMP za pomocą składnika amp-install-serviceworker
Dostosować skrypt AMP Service Worker
Wstępnie pobrać linki
Utworzyć stronę trybu offline

Dowiedz się więcej o skryptach Service Worker i kwestiach obsługi użytkownika w trybie offline. Naucz się śledzić zaangażowanie za pomocą usług analityki i zapoznaj się z samouczkiem konfigurowania podstawowej analityki dla stron AMP.

Written by @crystalonscript