AMP

Zmień swoją witrynę AMP w PWA

Important: this documentation is not applicable to your currently selected format email!

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.

Image of PWA

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:

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.