Progresywne aplikacje internetowe: skrypt service worker zawiera

1. Witamy

W tym module dodasz do istniejącej aplikacji internetowej odpowiedź z trasą przesyłania strumieniowego, aby zwiększyć wydajność. To siódme z serii powiązanych ćwiczeń z kodem do warsztatów na temat progresywnych aplikacji internetowych. Poprzednie ćwiczenie to Wzmocnienie PWA. W tej serii jest jeszcze 1 ćwiczenie z programowania.

Czego się nauczysz

  • Dodawanie odpowiedzi strumieniowej do skryptu service worker

Co warto wiedzieć

  • 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 pwa06--service-worker-includes. 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

  • js/preview.js – podgląd pliku JavaScript strony
  • service-worker.js – plik skryptu service worker PWA

3. Podgląd strumieniowania

Stronę podglądu można podzielić na 3 części: nagłówek, skompilowaną treść i stopkę. Obecnie skompilowana treść jest renderowana po stronie klienta, ale nie ma ku temu powodu. Przenieśmy go do Service Workera.

Aby utworzyć treść, wysyłane jest asynchroniczne żądanie wyszukiwania treści. Praca asynchroniczna w odpowiedzi na nawigację jest kosztowna, dlatego warto najpierw przesłać do przeglądarki znaną treść.

Aby to zrobić, najpierw wyczyść zawartość w js/preview.js, aby mieć pewność, że nie jest już kompilowana. Następnie w service-worker.js wykonaj te czynności:

  • Zaimportuj eksport o nazwie strategy z workbox-streams jako streamsStrategy
  • Importuj eksport o nazwie openDB z idb i eksport o nazwie marked z marked
  • Przed zarejestrowaniem trasy na potrzeby nawigacji dodaj nową rejestrację trasy.
    • Powinien sprawdzić, czy pathname adresu URL to /preview.
    • Powinna ona korzystać ze strategii przesyłania strumieniowego, która
      1. Odpowiadaj treścią z preview/index.html w obszarze treści tagu main.
      2. Odpowiedz funkcją, która otwiera settings-store IndexedDB, pobiera treść z settings obiektu i zwraca wersję tej treści w formacie Markdown.
      3. Odpowiedz za pomocą tagów zamykających main, body i html.

Po otrzymaniu odpowiedzi strumieniowej wróć i otwórz podgląd witryny w przeglądarce. Powinno być widać, że treść strony jest teraz renderowana bezpośrednio z usługi Service Worker, bez konieczności używania kodu po stronie klienta.

4. Gratulacje!

Wiesz już, jak przełączyć aplikację internetową w tryb offline za pomocą mechanizmów Service Worker i interfejsu Cache Storage API.

Kolejne ćwiczenie z tej serii to Praca z procesami roboczymi.