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
.