Zapisywanie zasobów w pamięci podręcznej za pomocą skryptu service worker może przyspieszyć ponowne otwarcie strony i zapewnić obsługę offline. Workbox ułatwia to zadanie i jest domyślnie uwzględniony w Create React App.
Workbox jest wbudowany w Create React App (CRA) z domyślną konfiguracją, która wstępnie zapisuje w pamięci podręcznej wszystkie zasoby statyczne w aplikacji przy każdej kompilacji.
Dlaczego ten przewodnik jest przydatny?
Skrypty service worker umożliwiają przechowywanie ważnych zasobów w pamięci podręcznej (wstępne buforowanie), dzięki czemu, gdy użytkownik po raz drugi wczyta stronę internetową, przeglądarka może pobrać je ze skryptu service worker, zamiast wysyłać żądania do sieci. Dzięki temu wczytywanie stron jest szybsze podczas kolejnych wizyt, 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 i obsługę skryptów service worker. W CRA plik workbox-webpack-plugin jest już uwzględniony w kompilacji produkcyjnej i wystarczy go włączyć w pliku src/index.js, aby zarejestrować 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 za pomocą CRA, która ma skrypt service worker włączony za pomocą tego pliku:
Aby sprawdzić, które zasoby są przechowywane w pamięci podręcznej:
- Aby wyświetlić podgląd witryny, naciśnij Wyświetl aplikację, a następnie 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 kolumna Size zawiera komunikat (from ServiceWorker), który wskazuje, że te zasoby zostały pobrane z skryptu service worker.
Skrypt service worker zapisuje w pamięci podręcznej wszystkie zasoby statyczne, więc spróbuj użyć aplikacji w trybie offline:
- Na karcie Sieć w Narzędziach deweloperskich zaznacz pole wyboru Offline, aby zasymulować działanie w trybie offline.
- Załaduj ponownie 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, a jeśli to się nie powiedzie (np. zasób nie jest zapisany w pamięci podręcznej), wysyłane jest żądanie sieciowe. Dzięki temu treści mogą być wyświetlane użytkownikom nawet wtedy, gdy są całkowicie offline.
Chociaż Workbox obsługuje definiowanie różnych strategii i podejść do buforowania zasobów statycznych i dynamicznych, domyślnej konfiguracji w CRA nie można modyfikować ani zastępować, chyba że całkowicie ją odrzucisz. Istnieje jednak otwarta propozycja, aby rozważyć dodanie obsługi zewnętrznego pliku workbox.config.js. Dzięki temu deweloperzy mogą zastąpić ustawienia domyślne, tworząc tylko jeden plik workbox.config.js.
Obsługa strategii „najpierw pamięć podręczna”
Korzystanie najpierw z pamięci podręcznej skryptu service worker, a potem z sieci to doskonały sposób na tworzenie witryn, które szybciej się wczytują podczas kolejnych wizyt i w pewnym stopniu działają offline. Należy jednak wziąć pod uwagę kilka kwestii:
- Jak można przetestować zachowania skryptu service worker związane z buforowaniem?
- Czy użytkownicy powinni zobaczyć komunikat informujący, że wyświetlają treści z pamięci podręcznej?
Więcej informacji o tych i innych kwestiach znajdziesz w dokumentacji CRA.
Podsumowanie
Użyj skryptu service worker do wstępnego zapisywania w pamięci podręcznej ważnych zasobów w aplikacji, aby zapewnić użytkownikom szybsze działanie i obsługę offline.
- Jeśli używasz CRA, włącz wstępnie skonfigurowany skrypt service worker w
src/index.js. - Jeśli nie używasz CRA do tworzenia aplikacji React, uwzględnij w procesie kompilacji jedną z wielu bibliotek udostępnianych przez Workbox, np.
workbox-webpack-plugin. - Aby dowiedzieć się, kiedy CRA będzie obsługiwać plik zastępowania
workbox.config.js, obserwuj ten problem na GitHubie.