Stosowanie strategii w aplikacji React z użyciem Workbox

Buforowanie zasobów za pomocą workera usługi może przyspieszyć ponowne otwieranie strony i zapewnić obsługę offline. Workbox ułatwia to zadanie i jest domyślnie uwzględniany w Create React App.

Houssein Djirdeh

Narzędzie Workbox jest wbudowane w funkcję Create React App (CRA) i ma domyślną konfigurację, która przy każdej kompilacji wstępnie zapisuje w pamięci podręcznej wszystkie zasoby statyczne w aplikacji.

Dlaczego to jest przydatne?

Usługa workera umożliwia przechowywanie ważnych zasobów w pamięci podręcznej (wstępne buforowanie), dzięki czemu gdy użytkownik wczyta stronę internetową po raz drugi, przeglądarka może pobrać te zasoby z usługi workera zamiast wysyłać żądania do sieci. Dzięki temu wczytywanie stron podczas kolejnych wizyt jest szybsze, a użytkownik może wyświetlać treści, gdy jest offline.

Workbox w CRA

Workbox to zbiór narzędzi, które umożliwiają tworzenie instancji Service Worker i ich obsługę. W CRA mechanizm workbox-webpack-plugin jest już uwzględniony w kompilacji produkcyjnej i trzeba go włączyć tylko w pliku src/index.js, aby przy każdej kompilacji zarejestrować nowy skrypt service worker:

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 za pomocą CRA, która ma usługę workera włączoną za pomocą tego pliku:

Aby sprawdzić, które zasoby są zapisywane w pamięci podręcznej:

• Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie kliknij 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ę.

Zamiast rozmiaru ładunku w kolumnie Size zobaczysz komunikat (from ServiceWorker), który wskazuje, że te zasoby zostały pobrane z usługowego workera.

Ponieważ usługa workera przechowuje w pamięci podręcznej wszystkie zasoby statyczne, spróbuj użyć aplikacji w trybie offline:

1. Na karcie Sieć w Narzędziach deweloperskich zaznacz pole wyboru Offline, aby zasymulować środowisko offline.
2. Ponownie załaduj aplikację.

Aplikacja działa dokładnie tak samo, nawet bez połączenia sieciowego.

Modyfikowanie strategii buforowania

Domyślna strategia wstępnego buforowania używana przez Workbox w CRA to cache-first, w której wszystkie zasoby statyczne są pobierane z pamięci podręcznej skryptu service worker. Jeśli to się nie uda (np. zasób nie jest zapisany w pamięci podręcznej), wysyłane jest żądanie sieci. Dzięki temu treści mogą być wyświetlane użytkownikom nawet wtedy, gdy są całkowicie offline.

Chociaż Workbox umożliwia definiowanie różnych strategii i podejść do przechowywania w pamięci podręcznej zasobów statycznych i dynamicznych, domyślnej konfiguracji w CRA nie można zmodyfikować ani zastąpić, chyba że całkowicie ją wyjmiesz. Otrzymaliśmy jednak propozycję, aby rozważyć dodanie obsługi zewnętrznego pliku workbox.config.js. Pozwoliłoby to deweloperom zastąpić ustawienia domyślne przez utworzenie pojedynczego pliku workbox.config.js.

Zarządzanie strategią „najpierw pamięć podręczna”

Korzystanie najpierw z pamięci podręcznej usługi, a potem z sieci jest świetnym sposobem na tworzenie witryn, które wczytują się szybciej podczas kolejnych wizyt i w pewnym stopniu działają offline. Należy jednak wziąć pod uwagę kilka kwestii:

• Jak można testować zachowania związane z buforowaniem przez usługę działającą w tle?
• Czy użytkownicy powinni otrzymywać wiadomość informującą ich, że wyświetlają treści z pamięci podręcznej?

Dokumentacja dotycząca CRA zawiera szczegółowe informacje na te i inne tematy.

Podsumowanie

Używaj skryptu service worker do wstępnego buforowania ważnych zasobów w aplikacji, aby zapewnić szybsze działanie i obsługę offline.

1. Jeśli używasz CRA, włącz wstępnie skonfigurowanego service workera w src/index.js.
2. Jeśli nie używasz CRA do tworzenia aplikacji React, uwzględnij w procesie kompilacji jedną z wielu bibliotek Workbox, np. workbox-webpack-plugin.
3. Obserwuj, kiedy CRA zacznie obsługiwać plik zastąpienia workbox.config.js w tym problemie na GitHubie.