Progresywne aplikacje internetowe: od karty do paska zadań

1. Witamy

W tym module weźmiesz istniejącą aplikację internetową i sprawisz, że będzie można ją zainstalować. To czwarte z serii powiązanych ćwiczeń z kodem do warsztatów dotyczących progresywnych aplikacji internetowych. Poprzednie ćwiczenia z programowania dotyczyły IndexedDB. Ta seria zawiera jeszcze 4 inne codelaby.

Czego się nauczysz

  • Ręczne pisanie skryptu service worker
  • Dodawanie Service Workera do istniejącej aplikacji internetowej
  • Używanie skryptu service worker i interfejsu Cache Storage API do udostępniania zasobów w trybie offline

Co warto wiedzieć

  • podstawowy HTML i JavaScript,

Wymagania

2. Pierwsze kroki

Zacznij od sklonowania lub pobrania kodu startowego potrzebnego do ukończenia tego ćwiczenia:

Jeśli klonujesz repozytorium, upewnij się, że jesteś w gałęzi pwa04--tab-to-taskbar. Plik ZIP zawiera też kod tej gałęzi.

Ten kod wymaga Node.js w wersji 14 lub nowszej. Gdy kod będzie dostępny, uruchom npm ci z wiersza poleceń w folderze kodu, aby zainstalować wszystkie potrzebne zależności. Następnie uruchom npm start, aby uruchomić serwer programistyczny dla tego laboratorium.

Plik README.md kodu źródłowego zawiera wyjaśnienie wszystkich rozpowszechnianych plików. Oto najważniejsze pliki, z którymi będziesz pracować w trakcie tego ćwiczenia:

Kluczowe pliki

  • index.html – HTML głównej aplikacji

3. Tworzenie pliku manifestu aplikacji internetowej

Pliki manifestu aplikacji internetowej opisują Twoją progresywną aplikację internetową, dzięki czemu w połączeniu z działającym Service Workerem przeglądarka wie, że aplikację można zainstalować, a co ważniejsze, jak ją przedstawić na urządzeniu, na którym zostanie zainstalowana. Najpierw jednak musisz ją utworzyć. Dodaj plik o nazwie manifest.json do folderu public aplikacji internetowej i dodaj do niego te informacje:

{
  "name": "PWA Edit",
  "short_name": "PWA Edit",
  "start_url": "/?source=pwa",
  "display": "standalone",
  "icons": [
    {
      "type": "image/png",
      "sizes": "192x192",
      "src": "/images/icons/logo-192.png"
    },
    {
      "type": "image/png",
      "sizes": "48x48",
      "src": "/images/icons/logo-48.png"
    },
    {
      "type": "image/png",
      "sizes": "72x72",
      "src": "/images/icons/logo-72.png"
    },
    {
      "type": "image/png",
      "sizes": "128x128",
      "src": "/images/icons/logo-128.png"
    },
    {
      "type": "image/png",
      "sizes": "384x384",
      "src": "/images/icons/logo-384.png"
    },
    {
      "type": "image/png",
      "sizes": "512x512",
      "src": "/images/icons/logo-512.png"
    },
    {
      "type": "image/png",
      "sizes": "96x96",
      "src": "/images/icons/logo-96.png"
    },
    {
      "type": "image/png",
      "sizes": "1024x1024",
      "src": "/images/icons/maskable-1024.png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#282c34",
  "background_color": "#282c34",
  "description": "A PWA markdown editor",
  "categories": ["productivity", "utilities"]
}

Nie zapomnij dodać ikony Apple Touch dla urządzeń z iOS. Dodaj ten wiersz kodu tuż za tagiem <title> w pliku <head> w index.html

<link rel="apple-touch-icon" href="/images/icons/apple-touch.png" />

Wyjaśnienie

Ten plik manifestu zawiera pola wymagane, zalecane i promocyjne, więc jest dość złożony. Najpierw wymagane pola, w których zdefiniowane są nazwa, adres URL uruchamiania, tryb wyświetlania i ikony progresywnej aplikacji internetowej. Zwróć uwagę, że ostatnia ikona to ikona z maską, która umożliwia wyświetlanie wielu ikon w zależności od interfejsu urządzenia. Następnie znajdują się pola zalecanego motywu i koloru tła. Na koniec są pola promocyjne, opis i kategorie, do których pasuje ta aplikacja PWA. Gdy ten manifest jest dołączony do aplikacji PWA, te pola określają sposób wyświetlania i zarządzania zainstalowaną aplikacją PWA.

4. Dołączanie pliku manifestu do PWA

Po utworzeniu pliku manifestu musisz go załączyć, aby powiązać go z PWA. Aby to zrobić, otwórz index.html i dodaj poniższy kod bezpośrednio pod tagiem <title> w sekcji <head>:

<link rel="manifest" href="/manifest.json" />

Wyjaśnienie

Link do pliku manifestu informuje przeglądarki, które go obsługują, że połączony plik manifestu aplikacji internetowej opisuje bieżącą witrynę. Jeśli jest on prawidłowy i dostępny, ma działający skrypt service worker, a aplikacja internetowa spełnia dodatkowe kryteria instalacji specyficzne dla przeglądarki, umożliwia to zainstalowanie aplikacji bezpośrednio na urządzeniu użytkownika.

5. Dodawanie skrótów

Jednym ze sposobów na lepsze zintegrowanie aplikacji PWA z urządzeniem jest udostępnienie w menu kontekstowym skrótów do określonych funkcji aplikacji. Przełącznik trybu nocnego w aplikacji PWA umożliwia wybór trybu przez ustawienie parametru zapytania mode na night lub day. Skonfiguruj w manifest.json 2 skróty, które będą wykonywać te czynności:

  • Uruchamia PWA w trybie night lub day.
  • Używa ikony /images/logo.svg o rozmiarze 150x150.

6. Gratulacje!

Wiesz już, jak utworzyć plik manifestu aplikacji internetowej, dołączyć go do strony internetowej i dodać skróty do aplikacji po jej zainstalowaniu.

Kolejne laboratorium z tej serii to Prompting & Measuring Install (Wyświetlanie zachęty do instalacji i pomiar instalacji).