Zapisywanie zasobów w pamięci podręcznej za pomocą skryptu service worker może przyspieszyć powtórne wizyty i zapewnić obsługę offline. Dzięki Workbox jest to łatwe i domyślnie dostępne w aplikacji Create React.
Narzędzie Workbox jest wbudowane w aplikację React (CRA) z domyślną konfiguracją, która wstępnie zapisuje w pamięci podręcznej wszystkie zasoby statyczne aplikacji przy każdej kompilacji.
Dlaczego to takie przydatne?
Mechanizmy Service Worker umożliwiają przechowywanie ważnych zasobów w pamięci podręcznej (pamięci podręcznej), dzięki czemu, gdy użytkownik wczytuje stronę internetową po raz drugi, przeglądarka może je pobrać z skryptu service worker, zamiast wysyłać żądania do sieci. Przyspiesza to wczytywanie strony przy kolejnych wizytach, a także pozwala wyświetlać treści, gdy użytkownik jest offline.
Pole robocze w architekturze CRA
Pole robocze to zbiór narzędzi, które umożliwiają tworzenie i utrzymywanie mechanizmów Service Worker. W architekturze CRA klasa workbox-webpack-plugin jest już uwzględniona w kompilacji produkcyjnej i wystarczy ją włączyć w pliku src/index.js, aby można było rejestrować nowy skrypt service worker przy każdej kompilacji:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
serviceWorker.register();
Oto przykład aplikacji React utworzonej w trybie CRA, która ma włączony skrypt service worker w tym pliku:
Aby zobaczyć, które zasoby są przechowywane w pamięci podręcznej:
- Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację, a potem Pełny ekran
. - Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
- Kliknij kartę Sieć.
- Załaduj ponownie aplikację.
Zauważysz, że zamiast rozmiaru ładunku w kolumnie Size wyświetla się komunikat (from ServiceWorker) wskazujący, że zasoby zostały pobrane z skryptu service worker.
Skrypt service worker zapisuje w pamięci podręcznej wszystkie zasoby statyczne, dlatego spróbuj użyć aplikacji w trybie offline:
- Aby symulować korzystanie z trybu offline, na karcie Sieć w Narzędziach deweloperskich zaznacz pole wyboru Offline.
- Załaduj ponownie aplikację.
Aplikacja działa dokładnie tak samo, nawet bez połączenia z siecią.
Modyfikowanie strategii buforowania
Domyślną strategią wstępnego buforowania używaną przez Workbox w interfejsie CRA jest buforowanie w pamięci podręcznej. W takiej sytuacji wszystkie zasoby statyczne są pobierane z pamięci podręcznej skryptu service worker. Jeśli to się nie uda (np. jeśli zasób nie jest przechowywany w pamięci podręcznej), wysyłane jest żądanie sieciowe. W ten sposób treści mogą być nadal wyświetlane użytkownikom, nawet jeśli są w stanie offline.
Choć Workbox obsługuje definiowanie różnych strategii i podejść do buforowania zasobów statycznych i dynamicznych, to domyślnej konfiguracji w CRA nie można zmienić ani zastąpić, chyba że całkowicie ją wyrzuć. Przygotowaliśmy jednak otwartą ofertę, która umożliwia dodanie obsługi zewnętrznego pliku workbox.config.js. Umożliwi to deweloperom zastąpienie ustawień domyślnych przez utworzenie pojedynczego pliku workbox.config.js.
Obsługa strategii skoncentrowanej na pamięci podręcznej
Opieranie się najpierw na pamięci podręcznej skryptu service worker, a następnie – z powrotem do sieci, to doskonały sposób na tworzenie witryn, które wczytują się szybciej przy kolejnych wizytach i do pewnego czasu działają offline. Trzeba jednak wziąć pod uwagę kilka rzeczy:
- Jak można przetestować zachowanie buforowania przez skrypt service worker?
- Czy należy wyświetlać im wiadomość informującą, że przeglądają treści w pamięci podręcznej?
Te kwestie zostały szczegółowo omówione w dokumentacji CRA.
Podsumowanie
Stosuj mechanizm Service Worker do wstępnego buforowania ważnych zasobów aplikacji, aby zapewnić użytkownikom szybsze działanie, a także pomoc w trybie offline.
- Jeśli korzystasz z uwierzytelniania CRA, włącz wstępnie skonfigurowany skrypt service worker w:
src/index.js. - Jeśli nie używasz CRA do tworzenia aplikacji React, dołącz do procesu kompilacji jedną z wielu dostępnych bibliotek Workbox, np.
workbox-webpack-plugin. - W tym problemie z GitHubem regularnie sprawdzaj, kiedy CRA zacznie obsługiwać plik zastąpienia
workbox.config.js.