Twoja pierwsza progresywna aplikacja internetowa

Ostatnia aktualizacja: 30 kwietnia 2019 r.

Co sprawia, że aplikacja internetowa to progresywna aplikacja internetowa?

Progresywne aplikacje internetowe to takie, które można zainstalować na komputerach i urządzeniach mobilnych. Są one instalowane i dostarczane bezpośrednio przez internet. To szybkie i niezawodne aplikacje internetowe. A co najważniejsze, są to aplikacje internetowe działające w dowolnej przeglądarce. Jeśli tworzysz dziś aplikację internetową, jesteś na dobrej drodze do utworzenia progresywnej aplikacji internetowej.

Szybkie i zaawansowane; niezawodne

Każda usługa internetowa musi być szybka, zwłaszcza w przypadku progresywnych aplikacji internetowych. „Szybko” odnosi się do czasu potrzebnego na wyświetlenie istotnych treści na ekranie i zapewnienie interaktywnej obsługi.

Musi też być szybka. Ciężko jest stwierdzić, jak bardzo stabilna jest skuteczność. Wyobraź sobie, że pierwsza reklama natywna jest frustrująca. Będzie ona dostępna w sklepie z aplikacjami i w ogromnej wersji do pobrania, ale gdy dojdziesz do miejsca, w którym zainstalujesz aplikację, koszty z góry zostaną ujęte na wszystkich etapach rozpoczęcia aplikacji, a żadna z nich nie będzie miała innego opóźnienia. Każda aplikacja rozpoczyna się tak szybko, jak w ostatnim, bez wariantów. Progresywna aplikacja internetowa musi oferować tę niezawodną wydajność, jakiej użytkownicy oczekują od wszystkich zainstalowanych aplikacji.

Do zainstalowania

Progresywne aplikacje internetowe mogą działać na karcie przeglądarki, ale można je też instalować. Dodanie strony do zakładek powoduje dodanie skrótu, ale zainstalowana progresywna aplikacja internetowa (PWA) wygląda i działa tak samo jak wszystkie inne zainstalowane aplikacje. uruchamia się w tym samym miejscu co inne aplikacje; Możesz kontrolować sposób uruchamiania, w tym niestandardowy ekran powitalny, ikony i inne funkcje. Działa jako aplikacja w oknie aplikacji, które nie zawiera paska adresu ani innego interfejsu przeglądarki. Podobnie jak wszystkie inne zainstalowane aplikacje, jest to aplikacja najwyższego poziomu w przełączniku zadań.

Pamiętaj, że progresywna aplikacja PWA jest szybka i niezawodna. Użytkownicy, którzy instalują PWA, oczekują, że aplikacje będą działać bez względu na rodzaj połączenia sieciowego, z którego korzystają. Jest to bazowa wartość oczekiwana przez wszystkie zainstalowane aplikacje.

Urządzenie mobilne i komputer

Dzięki technikom projektowania responsywnego aplikacje PWA działają zarówno na urządzeniach mobilnych , jak i na komputerach, wykorzystując jedną platformę między kodami. Jeśli zastanawiasz się nad napisaniem aplikacji natywnej, zapoznaj się z korzyściami, jakie daje PWA.

Co stworzysz

W tym ćwiczeniu zbudujesz aplikację pogodową, korzystając z technologii PWA. Twoja aplikacja będzie:

  • Stosuj elastyczne projektowanie stron, aby działała na komputerze lub urządzeniu mobilnym.
  • Działaj szybko, używając skryptu service worker do wstępnego przechowywania zasobów aplikacji (HTML, CSS, JavaScript, obrazy) niezbędnych do uruchomienia i buforowania danych pogodowych w czasie działania, by zwiększyć wydajność.
  • Aby można było zainstalować aplikację, użyj pliku manifestu aplikacji internetowej i zdarzenia beforeinstallprompt, aby powiadomić użytkownika o możliwości instalacji.

Czego się nauczysz:

  • Tworzenie i dodawanie pliku manifestu aplikacji internetowej
  • Zapewnienie prostej obsługi w trybie offline
  • Jak zapewnić użytkownikom pełną funkcjonalność trybu offline
  • Jak umożliwić instalację aplikacji

To ćwiczenie skupia się na progresywnych aplikacjach internetowych. Nieistotne koncepcje i bloki kodu zostały zamaskowane. Można je po prostu skopiować i wkleić.

Czego potrzebujesz

  • Najnowsza wersja Chrome (74 lub nowsza). Progresywna aplikacja internetowa działa we wszystkich przeglądarkach, ale będziemy używać kilku funkcji Narzędzi deweloperskich w Chrome, aby lepiej zrozumieć, co się dzieje na poziomie przeglądarki, i wykorzystać je do przetestowania instalacji.
  • Wiedza na temat języków HTML, CSS, JavaScript i Narzędzi deweloperskich w Chrome.

Kup klucz interfejsu Dark Sky API

Dane pogodowe pochodzą z interfejsu Dark Sky API. Aby go użyć, musisz zażądać klucza interfejsu API. Jest on prosty w obsłudze i bezpłatny w przypadku projektów niekomercyjnych.

Zarejestruj się, aby uzyskać klucz interfejsu API

Sprawdź, czy klucz interfejsu API działa prawidłowo

Aby sprawdzić, czy klucz interfejsu API działa prawidłowo, wyślij żądanie HTTP do interfejsu DarkSky API. Zaktualizuj ten adres URL, aby zastąpić DARKSKY_API_KEY kluczem interfejsu API. Jeśli wszystko zadziała, zobaczysz najnowszą prognozę pogody dla Nowego Jorku.

https://api.darksky.net/forecast/DARKSKY_API_KEY/40.7720232,-73.9732319

Pobierz kod

Wszystkie potrzebne elementy tego projektu umieściliśmy w repozytorium Git. Aby rozpocząć, pobierz kod i otwórz go w swoim ulubionym środowisku programistycznym. W przypadku tych ćwiczeń zalecamy korzystanie z Glitch.

Zdecydowanie zalecane: użyj Glitch do zaimportowania repozytorium

Jest to zalecana metoda wykonywania ćwiczeń z programowania.

  1. Otwórz nową kartę przeglądarki i wejdź na https://glitch.com.
  2. Jeśli nie masz konta, musisz się zarejestrować.
  3. Kliknij New Project (Nowy projekt), a następnie Kopiuj z repozytorium Git.
  4. Skopiuj https://github.com/googlecodelabs/your-first-pwapp.git i kliknij OK.
  5. Po załadowaniu repozytorium zmodyfikuj plik .env i zaktualizuj go za pomocą klucza interfejsu DarkSky API.
  6. Kliknij przycisk Pokaż, a następnie W nowym oknie, by zobaczyć PWA w działaniu.

Inny sposób: pobranie kodu & praca lokalnie

Jeśli chcesz pobrać kod i pracować lokalnie, musisz mieć najnowszą wersję Node.js, edytor kodu i gotową do działania.

Pobierz kod źródłowy

  1. Rozpakuj pobrany plik ZIP.
  2. Uruchom aplikację npm install, aby zainstalować zależności wymagane do uruchomienia serwera.
  3. Edytuj server.js i ustaw klucz interfejsu DarkSky API.
  4. Uruchom aplikację node server.js, aby uruchomić serwer na porcie 8000.
  5. Otwórz kartę przeglądarki na http://localhost:8000.

Od czego zaczynamy?

Na początek zajmiemy się podstawową aplikacją do testowania pogody przeznaczoną na te ćwiczenia z programowania. Kod został uproszczony, by pokazywać pojęcia w tym ćwiczeniu. Obsługa tego błędu jest niewielka. Jeśli zdecydujesz się użyć tego kodu w wersji produkcyjnej, upewnij się, że wszystkie błędy są prawidłowe, i przetestuj cały kod.

Kilka rzeczy, które możesz zrobić...

  1. Dodaj nowe miasto z niebieskim przyciskiem + w prawym dolnym rogu.
  2. Odświeżanie danych za pomocą przycisku odświeżania w prawym górnym rogu.
  3. Usuń miasto, klikając x w prawym górnym rogu każdej karty.
  4. Użyj paska narzędzi przełącznika urządzenia w Narzędziach deweloperskich Chrome, by zobaczyć, jak ta funkcja działa na komputerach i urządzeniach mobilnych.
  5. Z panelu Sieć w Narzędziach deweloperskich Chrome możesz się dowiedzieć, co się dzieje, gdy jesteś offline.
  6. W panelu Sieć w Narzędziach deweloperskich Chrome możesz sprawdzić, co się dzieje, gdy sieć jest ograniczona do powolnego połączenia 3G.
  7. Dodaj opóźnienie do serwera prognozy, zmieniając wartość FORECAST_DELAY w server.js

Kontrola za pomocą Lighthouse

Lighthouse to łatwe w użyciu narzędzie, które pomoże Ci poprawić jakość witryn i stron. Lighthouse przeprowadza między innymi audyty wydajności, ułatwień dostępu czy progresywnych aplikacji internetowych. Każdy audyt ma dokument referencyjny, w którym wyjaśniamy, dlaczego kontrola jest ważna i jak rozwiązywać problemy.

Użyjemy Lighthouse, aby sprawdzić naszą aplikację Pogoda i sprawdzić wprowadzone przez nas zmiany.

Latarnia morska

  1. Otwórz projekt w nowej karcie.
  2. Otwórz Narzędzia deweloperskie w Chrome i przełącz się na panel Kontrola. Pozostaw włączone wszystkie typy kontroli.
  3. Kliknij Przeprowadź audyt. Po pewnym czasie Lighthouse wyświetli raport na tej stronie.

Kontrola progresywnych aplikacji internetowych

Skupimy się na wynikach progresywnych aplikacji internetowych.

Jest sporo czerwonego koloru, na którym możesz się skupić:

  • ❗FAILED: bieżąca strona nie wyświetla kodu 200 w trybie offline.
  • ❗FAILED: start_url nie wyświetla kodu 200 w trybie offline.
  • ❗FAILED: nie rejestruje skryptu service worker, który steruje stroną i stroną start_url.
  • ❗FAILED: plik manifestu aplikacji internetowej nie spełnia wymagań instalacyjnych.
  • ❗FAILED: nie został skonfigurowany pod kątem niestandardowego ekranu powitalnego.
  • ❗FAILED: nie ustawia koloru motywu na pasku adresu.

Przejdźmy dalej i rozwiąż te problemy.

Po zakończeniu tej sekcji nasza aplikacja pogodowa przejdzie następujące audyty:

  • Plik manifestu aplikacji internetowej nie spełnia wymagań instalacyjnych.
  • Nie skonfigurowano niestandardowego ekranu powitalnego.
  • Nie ustawia koloru motywu na pasku adresu.

Tworzenie pliku manifestu aplikacji internetowej

Plik manifestu aplikacji internetowej to prosty plik JSON, który daje deweloperowi kontrolę nad tym, jak aplikacja jest wyświetlana użytkownikowi.

Korzystając z pliku manifestu aplikacji internetowej, może ona:

  • Poinformuj przeglądarkę, w której chcesz otwierać aplikację, w osobnym oknie (display).
  • Określ, która strona ma się otwierać przy pierwszym uruchomieniu aplikacji (start_url).
  • Określ, jak powinna wyglądać aplikacja w Docku lub Menu z aplikacjami (short_name, icons).
  • Utwórz ekran powitalny (name, icons, colors).
  • Poproś przeglądarkę, by otwierała okno w orientacji poziomej lub pionowej (orientation).
  • I wiele innych.

Utwórz plik o nazwie public/manifest.json w projekcie. Skopiuj i wklej następującą treść:

public/manifest.json

{
  "name": "Weather",
  "short_name": "Weather",
  "icons": [{
    "src": "/images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }],
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#3E4EB8",
  "theme_color": "#2F3BA2"
}

Plik manifestu obsługuje szereg ikon przeznaczonych na ekrany o różnych rozmiarach. Na potrzeby tych ćwiczeń dodaliśmy kilka innych sposobów na integrację z iOS.

Następnie musimy poinformować przeglądarkę o naszym manifeście, dodając <link rel="manifest"... do każdej strony w aplikacji. Dodaj ten wiersz do elementu <head> w pliku index.html.

publiczny/index.html

<!-- CODELAB: Add link rel manifest -->
<link rel="manifest" href="/manifest.json">

Trasa DevTools

Narzędzia deweloperskie umożliwiają szybkie i łatwe sprawdzenie pliku manifest.json. Otwórz panel Manifest w panelu Application (Aplikacja). Jeśli informacje w pliku manifestu zostały dodane prawidłowo, w tym panelu będzie można je przeanalizować i wyświetlić w formacie zrozumiałym dla człowieka.

Dodawanie metatagów i iOS; ikony

Safari na iOS nie obsługuje pliku manifestu aplikacji internetowej (na razie), więc musisz dodać tradycyjne tagi meta do <head> pliku index.html:

publiczny/index.html

<!-- CODELAB: Add iOS meta tags and icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Weather PWA">
<link rel="apple-touch-icon" href="/images/icons/icon-152x152.png">

Bonus: Łatwa poprawka Lighthouse

Podczas audytu Lighthouse omówiliśmy kilka innych kwestii, które można łatwo naprawić, więc radzimy się tym zająć.

Ustawianie metaopisu

W ramach audytu SEO firma Lighthouse zauważyła, że dokument nie ma metaopisu. Opisy mogą się wyświetlać w wynikach wyszukiwania Google. Wysokiej jakości, unikalne opisy mogą zwiększyć trafność wyników wyszukiwania i zwiększyć ruch z wyszukiwarki.

Aby dodać opis, dodaj ten tag meta do <head> dokumentu:

publiczny/index.html

<!-- CODELAB: Add description here -->
<meta name="description" content="A sample weather app">

Ustawianie koloru motywu na pasku adresu

W aukcji PWA aplikacja Lighthouse zauważyła, że aplikacja nie ustawia koloru motywu na pasku adresu. Motywy na pasku adresu przeglądarki dostosowują się do koloru marki, dzięki czemu są bardziej atrakcyjne dla użytkowników.

Aby ustawić kolor motywu na urządzeniu mobilnym, dodaj ten tag meta do <head> dokumentu:

publiczny/index.html

<!-- CODELAB: Add meta theme-color -->
<meta name="theme-color" content="#2F3BA2" />

Weryfikowanie zmian za pomocą narzędzia Lighthouse

Uruchom Lighthouse ponownie (kliknij znak + w lewym górnym rogu panelu Audyty) i sprawdź wprowadzone zmiany.

Kontrola SEO

  • ✘ ZALICZONE: dokument ma metaopis.

Kontrola progresywnych aplikacji internetowych

  • ❗FAILED: bieżąca strona nie wyświetla kodu 200 w trybie offline.
  • ❗FAILED: start_url nie wyświetla kodu 200 w trybie offline.
  • ❗FAILED: nie rejestruje skryptu service worker, który steruje stroną i stroną start_url.
  • ✘ ZALICZONE: plik manifestu aplikacji internetowej spełnia wymagania instalowalności.
  • ✘ ZALICZONE: skonfigurowane dla niestandardowego ekranu powitalnego.
  • • Pominięto: ustawia kolor motywu na pasku adresu.

Użytkownicy oczekują, że zainstalowane aplikacje będą zawsze uruchamiać wersję podstawową, jeśli są offline. Dlatego właśnie aplikacje internetowe, które można instalować, nigdy nie będą wyświetlać gier z dinozaurem w trybie offline. W trybie offline może to być na przykład prosta strona offline, strona tylko do odczytu z wcześniej zapisanymi danymi z pamięci podręcznej albo całkowicie funkcjonalna synchronizacja offline, która automatycznie synchronizuje się po przywróceniu połączenia z siecią.

W tej sekcji dodajemy prostą stronę offline do naszej aplikacji pogodowej. Jeśli użytkownik spróbuje załadować aplikację bez połączenia z internetem, zamiast typowej strony offline wyświetlanej w przeglądarce wyświetli się strona niestandardowa. Po zakończeniu tej sekcji nasza aplikacja pogodowa przejdzie następujące audyty:

  • Bieżąca strona nie wyświetla błędu 200, kiedy jest offline.
  • start_url nie wyświetla błędu 200, kiedy jest offline.
  • Nie rejestruje skryptu service worker, który steruje stroną i elementem start_url.

W następnej sekcji zastąpimy naszą niestandardową stronę offline pełną wersją offline. Pozwoli to zwiększyć wygodę korzystania z internetu, ale przede wszystkim znacząco zwiększy wydajność, bo większość naszych zasobów (HTML, CSS i JavaScript) będzie przechowywana i udostępniana lokalnie, eliminując sieć jako potencjalne wąskie gardło.

Służby ratunkowe

Jeśli nie wiesz, jak działają mechanizmy Service Worker, możesz uzyskać podstawowe informacje na temat tego, co mogą robić, jak wygląda ich cykl życia i nie tylko, korzystając z artykułu Wprowadzenie do mechanizmów Service Worker.

Funkcje dostępne przez skrypt service worker należy traktować jako progresywne i dodawać tylko wtedy, gdy przeglądarka je obsługuje. Skrypty service worker mogą na przykład zapisywać w pamięci podręcznej dane powłoki aplikacji i dane aplikacji, dzięki czemu będą one dostępne nawet wtedy, gdy sieć nie będzie dostępna. Jeśli skrypt service worker nie jest obsługiwany, kod offline nie będzie wywoływany, a użytkownik uzyska dostęp do podstawowych funkcji. Stosowanie funkcji wykrywania cech, które pozwoli na stopniowe wprowadzanie ulepszeń, wiąże się z niewielkim nakładem pracy i nie będzie przerywać działania starszych przeglądarek, które nie obsługują tej funkcji.

Rejestrowanie skryptu service worker

Pierwszym krokiem jest zarejestrowanie skryptu service worker. Dodaj do pliku index.html ten kod:

publiczny/index.html

// CODELAB: Register service worker.
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
        .then((reg) => {
          console.log('Service worker registered.', reg);
        });
  });
}

Kod ten sprawdza, czy jest dostępny interfejs API skryptu service worker. Jeśli tak, po wczytaniu strona service worker jest zarejestrowana w /service-worker.js.

Skrypt service worker jest udostępniany z katalogu głównego, a nie z katalogu /scripts/. To najprostszy sposób na skonfigurowanie elementu scope skryptu service worker. scope skrypt service worker określa, które pliki są używane przez skrypt service worker, czyli na której ścieżce przechwytuje on żądania. Domyślna scope to lokalizacja pliku skryptu service worker i rozwija się do wszystkich katalogów wymienionych poniżej. Jeśli więc katalog service-worker.js znajduje się w katalogu głównym, skrypt service worker będzie kontrolować żądania ze wszystkich stron internetowych w tej domenie.

Pamięć podręczna offline z pamięci podręcznej

Najpierw musimy poinformować skrypt service worker, co ma znaleźć się w pamięci podręcznej. Utworzyliśmy już prostą stronę offline (public/offline.html), którą będziemy wyświetlać w każdej chwili, gdy nie będzie połączenia sieciowego.

W tablicy service-worker.js dodaj '/offline.html', do tablicy FILES_TO_CACHE. Wynik powinien wyglądać tak:

public/service-worker.js

// CODELAB: Add list of files to cache here.
const FILES_TO_CACHE = [
  '/offline.html',
];

Następnie musimy dodać do zdarzenia install ten kod, aby skrypt service worker mógł zapisać stronę offline w pamięci podręcznej:

public/service-worker.js

// CODELAB: Precache static resources here.
evt.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      console.log('[ServiceWorker] Pre-caching offline page');
      return cache.addAll(FILES_TO_CACHE);
    })
);

Zdarzenie install powoduje teraz otwarcie pamięci podręcznej w caches.open() i podało jej nazwę. Podanie nazwy pamięci podręcznej pozwala nam udostępniać pliki z wersjami lub oddzielić dane od zasobów zapisanych w pamięci podręcznej, aby można było łatwo zaktualizować jeden z nich, a nie zmienić drugiego.

Gdy pamięć podręczna zostanie otwarta, możemy wywołać funkcję cache.addAll(), która pobiera listę adresów URL, pobiera je z serwera i dodaje odpowiedź do pamięci podręcznej. Pamiętaj, że cache.addAll() kończy się niepowodzeniem, jeśli któreś z pojedynczych żądań zakończyło się niepowodzeniem. Gwarantujemy, że jeśli etap instalacji się powiedzie, pamięć podręczna będzie ujednolicona. Jeśli jednak z jakiejś przyczyny wystąpią błędy, zostaną automatycznie wykonane przy następnym uruchomieniu skryptu.

Trasa DevTools

Zobaczmy, jak używać Narzędzi deweloperskich do analizy i debugowania mechanizmów Service Worker. Przed ponownym załadowaniem strony otwórz Narzędzia deweloperskie i przejdź do panelu Skrypty Service Worker w panelu Aplikacja. Powinien on wyglądać podobnie do tego:

Jeśli wyświetlana jest pusta strona, oznacza to, że aktualnie otwarta strona nie zawiera żadnych zarejestrowanych skryptów service worker.

Teraz odśwież stronę. Panel Service Worker powinien teraz wyglądać tak:

Jeśli widzisz takie informacje, oznacza to, że na stronie jest uruchomiony skrypt service worker.

Obok etykiety Stan znajduje się liczba (w tym przypadku 34251). Zwróć uwagę na ten numer podczas pracy. Dzięki temu możesz łatwo sprawdzić, czy skrypt service worker został zaktualizowany.

Czyszczenie starych stron offline

Wykorzystamy zdarzenie activate, aby wyczyścić stare dane w pamięci podręcznej. Ten kod zapewnia, że skrypt service worker aktualizuje pamięć podręczną po każdej zmianie plików powłoki aplikacji. Aby to zadziałało, musisz zwiększyć zmienną CACHE_NAME u góry pliku skryptu service worker.

Dodaj do wydarzenia activate ten kod:

public/service-worker.js

// CODELAB: Remove previous cached data from disk.
evt.waitUntil(
    caches.keys().then((keyList) => {
      return Promise.all(keyList.map((key) => {
        if (key !== CACHE_NAME) {
          console.log('[ServiceWorker] Removing old cache', key);
          return caches.delete(key);
        }
      }));
    })
);

Trasa DevTools

Po otwarciu panelu Service Worker odśwież stronę. Zobaczysz nowy zainstalowany skrypt service worker i zwiększony numer stanu.

Zaktualizowany skrypt service worker natychmiast przejmuje kontrolę, ponieważ nasze zdarzenie install kończy się na self.skipWaiting(), a zdarzenie activate kończy się na self.clients.claim(). Jeśli tego nie zrobisz, stary skrypt service worker będzie nadal kontrolować stronę, dopóki nie otworzy się na niej karta.

Obsługa nieudanych żądań sieciowych

Na koniec musimy obsługiwać zdarzenia fetch. Użyję strategii sieci zastępczej do buforowania. Skrypt service worker najpierw pobiera zasób z sieci. Jeśli to się nie uda, skrypt service worker zwróci stronę offline z pamięci podręcznej.

public/service-worker.js

// CODELAB: Add fetch event handler here.
if (evt.request.mode !== 'navigate') {
  // Not a page navigation, bail.
  return;
}
evt.respondWith(
    fetch(evt.request)
        .catch(() => {
          return caches.open(CACHE_NAME)
              .then((cache) => {
                return cache.match('offline.html');
              });
        })
);

Moduł obsługi fetch wymaga tylko obsługi nawigacji na stronie, więc inne żądania mogą zostać odrzucone z modułu i przyjęte przez przeglądarkę w zwykły sposób. Jeśli jednak żądanie .mode ma wartość navigate, użyj fetch, by pobrać element z sieci. W przypadku niepowodzenia moduł obsługi catch otwiera pamięć podręczną w caches.open(CACHE_NAME) i używa cache.match('offline.html') do pobrania strony offline z pamięci podręcznej. Następnie wynik jest przesyłany z powrotem do przeglądarki za pomocą evt.respondWith().

Trasa DevTools

Sprawdźmy, czy wszystko działa zgodnie z oczekiwaniami. Po otwarciu panelu Service Worker odśwież skrypt na stronie. Zobaczysz nowy zainstalowany skrypt service worker i zwiększony numer stanu.

Możemy też sprawdzić, co jest zapisane w pamięci podręcznej. Przejdź do panelu Cache Storage (Pamięć podręczna) w panelu Application (Aplikacja) Narzędzi deweloperskich. Kliknij prawym przyciskiem myszy Cache Storage, wybierz Refresh Caches (Odśwież pamięć podręczną) i rozwiń sekcję. Po lewej stronie powinna być widoczna nazwa statycznej pamięci podręcznej. Kliknij nazwę pamięci podręcznej, aby wyświetlić wszystkie pliki, które zostały zapisane w pamięci podręcznej.

Teraz przetestujmy tryb offline. Wróć do okienka Service Worker (Skrypty service worker) w panelu Application (Aplikacja) i zaznacz pole Offline. Gdy to zrobisz, obok karty panelu Sieć powinna pojawić się mała żółta ikona ostrzeżenia. Ta ikona oznacza, że jesteś offline.

Załaduj ponownie stronę... Otrzymujesz naszą pandę offline, zamiast Chrome z dinozaurem.

Wskazówki dotyczące testowania mechanizmów Service Worker

Debugowanie skryptu service worker może być wyzwaniem, a jeśli chodzi o buforowanie, sytuacja może stać się jeszcze bardziej koszmarna, jeśli pamięć podręczna nie zostanie zaktualizowana zgodnie z oczekiwaniami. Występuje zwykle typowy cykl życia skryptu service worker lub błąd w kodzie. Nie

Korzystanie z Narzędzi deweloperskich

W panelu Service Worker panelu Application jest kilka pól wyboru, które znacznie ułatwią Ci życie.

  • Offline – po zaznaczeniu tej opcji symuluje działanie offline i zapobiega wysyłaniu jakichkolwiek żądań do sieci.
  • Aktualizacja przy ponownym załadowaniu – po zaznaczeniu tej opcji zostanie zainstalowany najnowszy skrypt service worker, a następnie zostanie on zainstalowany i aktywowany natychmiast.
  • Obejście dla sieci – gdy zaznaczysz tę opcję, żądania będą pomijać skrypt service worker i będą wysyłane bezpośrednio do sieci.

Zacznij od nowa

W niektórych przypadkach może się okazać, że ładujesz dane zapisane w pamięci podręcznej lub że nie są one aktualizowane zgodnie z Twoimi oczekiwaniami. Aby usunąć wszystkie zapisane dane (localStorage, zindeksowaneDB i pliki zapisane w pamięci podręcznej) i usunąć wszelkie instancje robocze, skorzystaj z okienka Wyczyść pamięć w panelu Aplikacja. Możesz też pracować w oknie incognito.

Dodatkowe wskazówki:

  • Po wyrejestrowaniu skryptu service worker może on pozostać na liście do czasu zamknięcia jego okna przeglądarki.
  • Jeśli otwartych jest wiele okien aplikacji, nowy skrypt service worker nie zacznie działać, dopóki wszystkie okna nie zostaną ponownie wczytane i zaktualizowane do najnowszego.
  • Wyrejestrowanie skryptu service worker nie powoduje wyczyszczenie pamięci podręcznej.
  • Jeśli skrypt service worker istnieje i jest zarejestrowany, nowy skrypt service worker nie przejmie kontroli do czasu ponownego załadowania strony, chyba że od razu zyskasz kontrolę.

Weryfikowanie zmian za pomocą narzędzia Lighthouse

Uruchom Lighthouse ponownie i sprawdź zmiany. Nie zapomnij usunąć zaznaczenia pola wyboru Offline przed zweryfikowaniem zmian!

Kontrola SEO

  • ✘ ZALICZONE: dokument ma metaopis.

Kontrola progresywnych aplikacji internetowych

  • ✘ ZALICZONE: bieżąca strona zawiera błąd 200 w trybie offline.
  • • POZYTYWNY: start_url odpowiada 200 offline w trybie offline.
  • ✘ ZALICZONE: rejestruje skrypt service worker, który steruje stroną i stroną start_url.
  • ✘ ZALICZONE: plik manifestu aplikacji internetowej spełnia wymagania instalowalności.
  • ✘ ZALICZONE: skonfigurowane dla niestandardowego ekranu powitalnego.
  • • Pominięto: ustawia kolor motywu na pasku adresu.

Włącz tryb samolotowy w telefonie i spróbuj uruchomić kilka swoich ulubionych aplikacji. Niemal we wszystkich przypadkach zapewniają one solidne możliwości pracy w trybie offline. Użytkownicy oczekują, że będą zadowoleni z aplikacji. A internet nie powinien być taki sam. Podstawowym scenariuszem powinno być progresywne aplikacje internetowe.

Cykl życia skryptu service worker

Cykl życia skryptu service worker to najbardziej skomplikowany etap. Jeśli nie wiesz, jak to zrobić i jakie są z tego korzyści, możesz się z tym spotkać. Znając jednak jej działanie, możesz bez problemu dostarczać użytkownikom płynne i dyskretne aktualizacje, łącząc to, co najlepsze w internecie i natywnych reklamach.

install wydarzenie

Pierwsze zdarzenie, które zobaczy skrypt service worker, to install. Jest uruchamiana natychmiast po wykonaniu skryptu service worker, a jego wywołanie jest wywoływane tylko raz na skrypt service worker. Jeśli zmienisz skrypt service worker, przeglądarka klasyfikuje go jako inny skrypt service worker i uzyska własne zdarzenie install.

Zwykle zdarzenie install jest używane do buforowania wszystkiego, co jest potrzebne do uruchomienia aplikacji.

activate wydarzenie

Skrypt service worker będzie otrzymywać zdarzenie activate przy każdym uruchomieniu. Głównym celem zdarzenia activate jest konfigurowanie zachowania skryptu service worker, czyszczenie wszystkich zasobów, które pozostawiono w poprzednich uruchomieniach (np. starych pamięci podręcznej), oraz przygotowywanie skryptu service worker do obsługi żądań sieciowych (na przykład zdarzenia fetch opisanego poniżej).

fetch wydarzenie

Zdarzenie pobierania umożliwia skryptowi service worker przechwycenie wszelkich żądań sieciowych i obsługę żądań. Może przejść do sieci, aby pobrać zasób, pobrać go z własnej pamięci podręcznej, wygenerować niestandardową odpowiedź lub dowolną liczbę różnych opcji. Zajrzyj do Książki kucharskiej offline, aby poznać strategie, które możesz wykorzystać.

Aktualizowanie skryptu service worker

Przeglądarka sprawdza przy każdym wczytaniu strony, czy jest dostępna nowa wersja skryptu service worker. Jeśli znajdzie nową wersję, zostanie pobrana i zainstalowana w tle, ale nie zostanie aktywowana. Nowa wersja skryptu service worker jest w stanie oczekiwania, dopóki nie otworzy się żadna strona, która używa starego skryptu service worker. Gdy wszystkie okna korzystające ze starego skryptu service worker zostaną zamknięte, nowy skrypt service worker jest aktywowany i może przejąć kontrolę. Więcej informacji znajdziesz w sekcji Aktualizowanie skryptu service worker w dokumencie Cykl życia skryptu service worker.

Wybór odpowiedniej strategii buforowania

Wybór odpowiedniej strategii buforowania zależy od typu zasobu, który próbujesz zapisać w pamięci podręcznej, i tego, jak będziesz potrzebować do niego dostępu. W przypadku aplikacji pogodowej zasoby, które musimy buforować, podzielimy na 2 kategorie: zasoby, które chcemy umieścić w pamięci podręcznej, oraz dane, które będziemy zapisywać w pamięci podręcznej w czasie działania.

Buforowanie zasobów statycznych

Przechowywanie zasobów jest podobne do tego, co się dzieje, gdy użytkownik instaluje aplikację komputerową lub mobilną. Kluczowe zasoby, które są wymagane do działania aplikacji, są instalowane lub zapisywane w pamięci podręcznej urządzenia w taki sposób, aby można je było załadować później, niezależnie od połączenia sieciowego.

Po zainstalowaniu naszego skryptu service worker wstępnie przechowujemy w pamięci podręcznej wszystkie zasoby statyczne, by wszystko, czego potrzeba do uruchomienia aplikacji, było przechowywane na urządzeniu użytkownika. Aby przyspieszyć ładowanie aplikacji, użyjemy strategii z pamięci podręcznej. Zamiast trafiać do sieci w celu pobrania zasobów, muszą one zostać pobrane z lokalnej pamięci podręcznej. Jeśli nie będą dostępne, spróbujemy pobrać je z sieci.

Pobieranie z lokalnej pamięci podręcznej eliminuje wszystkie zmiany w sieci. Bez względu na to, z jakiej sieci korzysta użytkownik (Wi-Fi, 5G, 3G, a nawet 2G), kluczowe zasoby, których potrzebujemy, są dostępne niemal natychmiast.

Pamięć podręczna aplikacji

Strategia stale-nie-poprawne-sprawdzanie jest idealna w przypadku niektórych typów danych i działa dobrze w przypadku naszej aplikacji. Dane pojawiają się na ekranie najszybciej jak to możliwe, a potem aktualizują się, gdy sieć zwraca najnowsze dane. Nieaktualny podczas walidacji oznacza, że musimy uruchomić dwa żądania asynchroniczne – jedno z pamięci podręcznej, a inne z sieci.

W normalnych warunkach dane z pamięci podręcznej są zwracane niemal natychmiast i udostępniane tej aplikacji najnowszych danych, których może używać. Gdy to zrobisz, aplikacja zostanie zaktualizowana przy użyciu najnowszych danych z sieci.

W przypadku naszej aplikacji zapewnia to lepszą wygodę niż sieć, ponieważ trzeba w przeciwieństwie do strategii użyć pamięci podręcznej. Użytkownik nie musi czekać, aż limit czasu żądania sieciowego przekroczy limit i zobaczyć coś na ekranie. Mogą początkowo wyświetlać się starsze dane, ale po przywróceniu żądania sieciowego aplikacja aktualizuje się do najnowszych danych.

Zaktualizuj logikę aplikacji

Jak wspomnieliśmy wcześniej, aplikacja musi uruchomić 2 żądania asynchroniczne – do pamięci podręcznej i jedno do sieci. Aplikacja używa obiektu caches dostępnego w języku window, aby uzyskać dostęp do pamięci podręcznej i pobrać najnowsze dane. To świetny przykład progresywnego ulepszenia, ponieważ obiekt caches może nie być dostępny we wszystkich przeglądarkach, a jeśli nie, żądanie sieci powinno nadal działać.

Zaktualizuj funkcję getForecastFromCache(), aby sprawdzić, czy obiekt caches jest dostępny w globalnym obiekcie window i jeśli jest, poproś o dane z pamięci podręcznej.

/publiczne/skrypty/app.js

// CODELAB: Add code to get weather forecast from the caches object.
if (!('caches' in window)) {
  return null;
}
const url = `${window.location.origin}/forecast/${coords}`;
return caches.match(url)
    .then((response) => {
      if (response) {
        return response.json();
      }
      return null;
    })
    .catch((err) => {
      console.error('Error getting data from cache', err);
      return null;
    });

Następnie musisz zmodyfikować dane w updateData(), tak by były wysyłane 2 połączenia: 1 do getForecastFromNetwork(), aby uzyskać prognozę z sieci, oraz 1 do getForecastFromCache(), aby uzyskać najnowszą prognozę w pamięci podręcznej:

/publiczne/skrypty/app.js

// CODELAB: Add code to call getForecastFromCache.
getForecastFromCache(location.geo)
    .then((forecast) => {
      renderForecast(card, forecast);
    });

Nasza aplikacja pogodowa przesyła teraz 2 asynchroniczne żądania dotyczące danych: jedno z pamięci podręcznej, a drugi przez fetch. Jeśli dane są przechowywane w pamięci podręcznej, są zwracane szybko i renderowane bardzo szybko (dziesiątki milisekund). Gdy fetch odpowie, na karcie pojawią się najnowsze dane bezpośrednio z interfejsu API pogody.

Zwróć uwagę, że żądanie pamięci podręcznej i żądanie fetch kończą się wywołaniem aktualizacji karty prognozy. Skąd aplikacja wie, czy wyświetla najnowsze dane? Obsługiwany jest ten kod z renderForecast():

/publiczne/skrypty/app.js

// If the data on the element is newer, skip the update.
if (lastUpdated >= data.currently.time) {
  return;
}

Za każdym razem, gdy karta jest aktualizowana, aplikacja zapisuje sygnaturę czasową danych na ukrytym atrybucie na karcie. Aplikacja po prostu blokuje się, jeśli sygnatura czasowa przypisana do karty jest późniejsza niż dane przekazane do funkcji.

Zasoby do aplikacji zapisane w pamięci podręcznej

Dodaj w DATA_CACHE_NAME skrypt service worker, aby oddzielić dane naszej aplikacji od powłoki aplikacji. Po zaktualizowaniu powłoki aplikacji i trwałym usunięciu pamięci podręcznej nasze dane pozostają niezmienione, gotowe do szybkiego załadowania. Pamiętaj, że jeśli format danych zmieni się w przyszłości, musisz rozwiązać ten problem.

public/service-worker.js

// CODELAB: Update cache names any time any of the cached files change.
const CACHE_NAME = 'static-cache-v2';
const DATA_CACHE_NAME = 'data-cache-v1';

Nie zapomnij zaktualizować CACHE_NAME. Również zmienimy wszystkie nasze zasoby statyczne.

Aby nasza aplikacja działała offline, musimy przechowywać w pamięci podręcznej wszystkie niezbędne zasoby. Pomoże to nam również zwiększyć skuteczność. Zamiast pobierać wszystkie zasoby z sieci, aplikacja będzie mogła wczytać je wszystkie z lokalnej pamięci podręcznej, wyeliminując niestabilność sieci.

Zaktualizuj tablicę FILES_TO_CACHE, podając listę plików:

public/service-worker.js

// CODELAB: Add list of files to cache here.
const FILES_TO_CACHE = [
  '/',
  '/index.html',
  '/scripts/app.js',
  '/scripts/install.js',
  '/scripts/luxon-1.11.4.js',
  '/styles/inline.css',
  '/images/add.svg',
  '/images/clear-day.svg',
  '/images/clear-night.svg',
  '/images/cloudy.svg',
  '/images/fog.svg',
  '/images/hail.svg',
  '/images/install.svg',
  '/images/partly-cloudy-day.svg',
  '/images/partly-cloudy-night.svg',
  '/images/rain.svg',
  '/images/refresh.svg',
  '/images/sleet.svg',
  '/images/snow.svg',
  '/images/thunderstorm.svg',
  '/images/tornado.svg',
  '/images/wind.svg',
];

Generujemy ręcznie listę plików w pamięci podręcznej, więc za każdym razem, gdy aktualizujemy plik, musimy zaktualizować CACHE_NAME. Udało nam się usunąć offline.html z listy plików zapisanych w pamięci podręcznej, ponieważ zawiera ona wszystkie niezbędne zasoby, które są niezbędne do działania w trybie offline. Nie będzie też ponownie wyświetlać strony offline.

Aktualizowanie modułu obsługi zdarzeń aktywacji

Aby mieć pewność, że nasze wydarzenie activate nie spowoduje przypadkowego usunięcia danych, w wydarzeniu activate (service-worker.js) zastąp if (key !== CACHE_NAME) { wartością:

public/service-worker.js

if (key !== CACHE_NAME && key !== DATA_CACHE_NAME) {

Aktualizowanie modułu obsługi zdarzeń pobierania

Musimy zmodyfikować skrypt service worker tak, by przechwycił żądania do interfejsu Temperatura interfejsu API i przechowywał ich odpowiedzi w pamięci podręcznej. Dzięki temu później będziemy mieć do nich łatwy dostęp. W przypadku strategii, która jest nieaktualna, ale oczekujemy, że stanie się ona „prawdą źródłową” i będzie zawsze zawierać najnowsze informacje. Jeśli sieć nie może wykonać tej czynności, oznacza to, że nie udało się, bo najnowsze dane z pamięci podręcznej zostały już przez nas pobrane w naszej aplikacji.

Zaktualizuj moduł obsługi zdarzeń fetch, aby obsługiwał żądania do interfejsu API danych niezależnie od innych żądań.

public/service-worker.js

// CODELAB: Add fetch event handler here.
if (evt.request.url.includes('/forecast/')) {
  console.log('[Service Worker] Fetch (data)', evt.request.url);
  evt.respondWith(
      caches.open(DATA_CACHE_NAME).then((cache) => {
        return fetch(evt.request)
            .then((response) => {
              // If the response was good, clone it and store it in the cache.
              if (response.status === 200) {
                cache.put(evt.request.url, response.clone());
              }
              return response;
            }).catch((err) => {
              // Network request failed, try to get it from the cache.
              return cache.match(evt.request);
            });
      }));
  return;
}
evt.respondWith(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.match(evt.request)
          .then((response) => {
            return response || fetch(evt.request);
          });
    })
);

Kod przechwytuje żądanie i sprawdza, czy ma być prognozą pogody. Jeśli tak jest, użyj polecenia fetch, aby przesłać prośbę. Po zwróceniu odpowiedzi otwórz pamięć podręczną, skopiuj ją, zapisz w pamięci podręcznej i zwróć ją do pierwotnego użytkownika, który wysłał żądanie.

Musimy usunąć sprawdzanie evt.request.mode !== 'navigate', ponieważ chcemy, aby nasz skrypt service worker obsługiwał wszystkie żądania (w tym obrazy, skrypty, pliki CSS itp.), a nie tylko nawigację. Jeśli zostawiliśmy to zameldowanie, tylko HTML zostanie wyświetlony z pamięci podręcznej skryptu service worker. Wszystkie inne żądania będą wysyłane przez sieć.

Wypróbuj

Aplikacja powinna być w pełni funkcjonalna offline. Odśwież stronę, aby upewnić się, że zainstalowano najnowszy skrypt service worker. Następnie zapisz kilka miast i naciśnij przycisk odświeżania w aplikacji, aby otrzymać aktualne dane pogodowe.

Następnie przejdź do panelu Pamięć podręczna w panelu Aplikacja Narzędzi deweloperskich. Rozwiń sekcję, a po lewej stronie powinna się pojawić nazwa statycznej pamięci podręcznej i pamięci podręcznej. Po otwarciu pamięci podręcznej powinny się wyświetlić dane każdego miasta.

Przełącz się na panel Skrypty Service Worker i zaznacz pole Offline. Załaduj ponownie stronę, a następnie włącz tryb offline i załaduj stronę ponownie.

Jeśli korzystasz z szybkiej sieci i chcesz zobaczyć, jak prognozy prognozy są aktualizowane po wolnym połączeniu, ustaw właściwość FORECAST_DELAY w usłudze server.js na 5000. Wszystkie żądania wysyłane do interfejsu API prognozowania są opóźnione o 5000 ms.

Weryfikowanie zmian za pomocą narzędzia Lighthouse

Dobrze jest też ponownie uruchomić Lighthouse.

Kontrola SEO

  • ✘ ZALICZONE: dokument ma metaopis.

Kontrola progresywnych aplikacji internetowych

  • ✘ ZALICZONE: bieżąca strona zawiera błąd 200 w trybie offline.
  • • POZYTYWNY: start_url odpowiada 200 offline w trybie offline.
  • ✘ ZALICZONE: rejestruje skrypt service worker, który steruje stroną i stroną start_url.
  • ✘ ZALICZONE: plik manifestu aplikacji internetowej spełnia wymagania instalowalności.
  • ✘ ZALICZONE: skonfigurowane dla niestandardowego ekranu powitalnego.
  • • Pominięto: ustawia kolor motywu na pasku adresu.

Po zainstalowaniu progresywnej aplikacji internetowej zachowuje się ona tak samo jak wszystkie inne zainstalowane aplikacje. uruchamia się w tym samym miejscu co inne aplikacje; Działa w aplikacji bez paska adresu lub innego interfejsu przeglądarki. Podobnie jak wszystkie inne zainstalowane aplikacje, jest to aplikacja najwyższego poziomu w przełączniku zadań.

W Chrome można zainstalować progresywną aplikację internetową za pomocą menu kontekstowego z 3 kropkami. Można też udostępnić użytkownikowi przycisk lub inny komponent interfejsu, który zachęci do zainstalowania aplikacji.

Kontrola za pomocą Lighthouse

Aby użytkownik mógł zainstalować Twoją progresywną aplikację internetową, musi ona spełniać określone kryteria. Najłatwiej to sprawdzić, używając Lighthouse i upewniając się, że spełnia on wymagania dotyczące instalacji.

Jeśli zdarzyło Ci się już wykonać te ćwiczenia z programowania, Twoja aplikacja PWA powinna już spełniać te kryteria.

Dodawanie pliku install.js do pliku index.html

Najpierw dodajmy install.js do pliku index.html.

publiczny/index.html

<!-- CODELAB: Add the install script here -->
<script src="/scripts/install.js"></script>

Posłuchaj zdarzenia: beforeinstallprompt

Jeśli zostaną spełnione kryteria dodawania do ekranu głównego, Chrome uruchomi zdarzenie beforeinstallprompt, którego możesz użyć, by wskazać, że aplikacja może być zainstalowana i zainstalować. Dodaj poniższy kod, aby nasłuchiwać zdarzenia beforeinstallprompt:

public/scripts/install.js

// CODELAB: Add event listener for beforeinstallprompt event
window.addEventListener('beforeinstallprompt', saveBeforeInstallPromptEvent);

Zapisz zdarzenie i wyświetl przycisk instalacji

W funkcji saveBeforeInstallPromptEvent zapiszemy odniesienie do zdarzenia beforeinstallprompt, dzięki czemu będziemy mogli wywołać je prompt() później i zaktualizować nasz interfejs, by wyświetlać przycisk instalacji.

public/scripts/install.js

// CODELAB: Add code to save event & show the install button.
deferredInstallPrompt = evt;
installButton.removeAttribute('hidden');

Wyświetl komunikat i ukryj przycisk

Gdy użytkownik kliknie przycisk instalacji, musimy wywołać .prompt() w zapisanym zdarzeniu beforeinstallprompt. Musimy też ukryć przycisk instalacji, bo wywołanie .prompt() można wywołać tylko raz w przypadku każdego zapisanego zdarzenia.

public/scripts/install.js

// CODELAB: Add code show install prompt & hide the install button.
deferredInstallPrompt.prompt();
// Hide the install button, it can't be called twice.
evt.srcElement.setAttribute('hidden', true);

Wywołanie .prompt() wyświetli użytkownikowi okno modalne z prośbą o dodanie Twojej aplikacji do ekranu głównego.

Zapisywanie wyników

Aby sprawdzić, jak użytkownik zareagował na okno dialogowe instalacji, nasłuchuj obietnicy zwróconej przez właściwość userChoice zapisanego zdarzenia beforeinstallprompt. Gdy obietnica zacznie się wyświetlać, a użytkownik odpowie na nią, w obiekcie zostanie zwrócony obiekt z właściwością outcome.

public/scripts/install.js

// CODELAB: Log user response to prompt.
deferredInstallPrompt.userChoice
    .then((choice) => {
      if (choice.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt', choice);
      } else {
        console.log('User dismissed the A2HS prompt', choice);
      }
      deferredInstallPrompt = null;
    });

Jeden komentarz na temat atrybutu userChoice: specyfikacja określa je jako właściwość, a nie funkcję, której można się spodziewać.

Rejestruj wszystkie zdarzenia instalacji

Oprócz interfejsu dodanego do instalacji aplikacji użytkownicy mogą też zainstalować PWA za pomocą innych metod, na przykład menu z 3 kropkami w Chrome. Aby śledzić te zdarzenia, nasłuchuj zdarzenia instalowanego przez aplikację.

public/scripts/install.js

// CODELAB: Add event listener for appinstalled event
window.addEventListener('appinstalled', logAppInstalled);

W takim przypadku musimy zaktualizować funkcję logAppInstalled. Na potrzeby tego ćwiczenia użyjemy console.log, ale prawdopodobnie w aplikacji produkcyjnej chcesz zarejestrować to zdarzenie jako zdarzenie w narzędziu do analityki.

public/scripts/install.js

// CODELAB: Add code to log the event
console.log('Weather App was installed.', evt);

Zaktualizuj skrypt service worker

Nie zapomnij zaktualizować elementu CACHE_NAME w pliku service-worker.js, ponieważ wprowadziłeś zmiany w plikach, które są już zapisane w pamięci podręcznej. W trakcie pracy opcji Pomiń dla sieci w panelu Skrypty Service Worker w panelu Application (Narzędzia) w Narzędziach deweloperskich będą działać, ale te rozwiązania nie są przydatne w rzeczywistym środowisku.

Wypróbuj

Sprawdźmy, jak to działa. Dla bezpieczeństwa użyj przycisku Wyczyść dane witryny w panelu Aplikacja w Narzędziach deweloperskich, by usunąć wszystkie dane i upewnić się, że zaczynamy od nowa. Jeśli masz już zainstalowaną aplikację, odinstaluj ją. W przeciwnym razie ikona ponownie się nie pojawi.

Sprawdź, czy przycisk instalacji jest widoczny

Najpierw sprawdź, czy ikona instalacji wyświetla się prawidłowo. Spróbuj to zrobić na komputerze i urządzeniach mobilnych.

  1. Otwórz adres URL w nowej karcie Chrome.
  2. Otwórz menu z 3 kropkami (obok paska adresu).
    ▢ Sprawdź, czy widzisz w menu &Zainstaluj pogodę.
  3. Odświeżanie danych pogodowych za pomocą przycisku odświeżania w prawym górnym rogu, by mieć pewność, że jest to zgodne z metodą heurystyki zaangażowania użytkownika.
    ▢ sprawdź, czy ikona instalacji jest widoczna w nagłówku aplikacji.

Sprawdzanie, czy przycisk instalacji działa

Teraz sprawdźmy, czy wszystko zostało zainstalowane prawidłowo i że nasze zdarzenia są prawidłowo uruchamiane. Możesz to zrobić na komputerze lub urządzeniu mobilnym. Jeśli chcesz przetestować tę funkcję na urządzeniu mobilnym, użyj zdalnego debugowania, by zobaczyć, co jest rejestrowane w konsoli.

  1. Otwórz Chrome i w nowej karcie przeglądarki otwórz aplikację Pogoda PWA.
  2. Otwórz Narzędzia deweloperskie i przejdź do panelu Konsola.
  3. Kliknij przycisk instalacji w prawym górnym rogu.
    ▢ Sprawdź, czy przycisk instalacji zniknęło
    ▢ Sprawdź, czy wyświetla się okno instalatora.
  4. Kliknij Anuluj.
    ▢ Zweryfikuj &odcinek Użytkownik odrzucił komunikat A2HS w danych wyjściowych w konsoli.
    ▢ sprawdź, czy przycisk instalacji ponownie się pojawi.
  5. Ponownie kliknij przycisk instalacji, a potem w oknie modalnym kliknij przycisk instalacji.
    ▢ Weryfikacja "Użytkownik zaakceptował komunikat A2HS w wynikach konsoli.
    ▢ Potwierdź & instalowaną aplikację Pogoda.
  6. Uruchom Pogodę. PWA.
    ▢ Sprawdź, czy aplikacja otwiera się jako samodzielna aplikacja – w oknie aplikacji na komputerze lub na pełnym ekranie na urządzeniu mobilnym.

.

Sprawdzanie, czy instalacja w iOS działa prawidłowo

Sprawdźmy też, jak to działa w systemie iOS. Jeśli masz urządzenie z iOS, możesz użyć tej funkcji. Jeśli używasz komputera Mac, wypróbuj symulator iOS dostępny w Xcode.

  1. Otwórz Safari i w nowej karcie przeglądarki otwórz PWA Pogoda.
  2. Kliknij przycisk Udostępnij .
  3. Przewiń w prawo i kliknij przycisk Dodaj do ekranu głównego.
    ▢ sprawdź, czy tytuł, URL i ikona są prawidłowe.
  4. Kliknij Dodaj.
    ▢ Sprawdź, czy ikona aplikacji jest dodana do ekranu głównego.
  5. Uruchom Pogodę PWA na ekranie głównym.
    ▢ sprawdzaj, czy aplikacja uruchamia się na pełnym ekranie.

Bonus: wykrywanie, czy aplikacja jest uruchamiana z poziomu ekranu głównego

Zapytanie o element display-mode pozwala zastosować style w zależności od sposobu uruchomienia aplikacji lub określić sposób jej uruchomienia za pomocą JavaScriptu. 

@media all and (display-mode: standalone) {
  body {
    background-color: yellow;
  }
}

Możesz też sprawdzić zapytanie o multimedia display-mode w języku JavaScript, aby dowiedzieć się, czy działasz samodzielnie.

Bonus: odinstalowanie PWA

Pamiętaj, że beforeinstallevent nie jest uruchamiany, gdy aplikacja jest już zainstalowana, więc na etapie programowania być może zechcesz kilka razy ją zainstalować i odinstalować, by sprawdzić, czy wszystko działa zgodnie z oczekiwaniami.

Android

W Androidzie aplikacje PWA są odinstalowywane w taki sam sposób jak inne zainstalowane aplikacje.

  1. Otwórz panel aplikacji.
  2. Przewiń w dół, aby znaleźć ikonę Pogoda.
  3. Przeciągnij ikonę aplikacji na górę ekranu.
  4. Wybierz Odinstaluj.

Chrome OS

W systemie operacyjnym Chrome aplikacje PWA można łatwo odinstalować z pola wyszukiwania programu uruchamiającego.

  1. Otwórz program uruchamiający.
  2. W polu wyszukiwania wpisz pogoda. W wynikach wyszukiwania powinna wyświetlić się aplikacja PWA Pogoda.
  3. Kliknij prawym przyciskiem myszy (alternatywnym kliknięciem) Pogodowej PWA.
  4. Kliknij Usuń z Chrome...

macOS i Windows

Na komputerach Mac i systemach Windows PWA można odinstalować za pomocą Chrome:

  1. Na nowej karcie przeglądarki otwórz chrome://apps.
  2. Kliknij prawym przyciskiem myszy (alternatywnym kliknięciem) Pogodowej PWA.
  3. Kliknij Usuń z Chrome...

Możesz też otworzyć zainstalowaną aplikację PWA, kliknąć menu z 3 kropkami w prawym górnym rogu i wybrać Odinstaluj pogodę PWA..."

Gratulacje, udało Ci się stworzyć pierwszą progresywną aplikację internetową.

Dodano plik manifestu aplikacji internetowej, który umożliwia jego instalację. Dodać skrypt service worker, który zapewnia, że aplikacja PWA będzie zawsze szybka i niezawodna. Wiesz już, jak używać Narzędzi deweloperskich, aby sprawdzać aplikacje i dowiedzieć się, jak mogą one zwiększyć wygodę użytkowników.

Znasz już kluczowe etapy zmieniania aplikacji internetowych w progresywną aplikację internetową.

Co dalej?

Zobacz niektóre z ćwiczeń z programowania...

Więcej informacji

Dokumentacja referencyjna