Stosowanie strategii w aplikacji React z użyciem Workbox

Zapisywanie zasobów w pamięci podręcznej za pomocą skryptu service worker może przyspieszyć ponowne wizyty i zapewnić wsparcie offline. Workbox ułatwia tę czynność i jest domyślnie dostępny w aplikacji Create React.

Houssein Djirdeh

Usługa Workbox jest wbudowana Utwórz aplikację React (CRA) z domyślną konfiguracją, która wstępnie zapisuje w pamięci podręcznej wszystkie statyczne zasoby w aplikacji przy każdej kompilacji.

Żądania/odpowiedzi uruchamiane skryptem service worker

Dlaczego to jest przydatne?

Skrypty service worker pozwalają przechowywać ważne zasoby w pamięci podręcznej (wstępnego zapisywania w pamięci podręcznej), dzięki czemu przy drugim wczytaniu strony internetowej tag przeglądarka może je pobierać z skryptu service worker, zamiast wysyłać żądania do w sieci. Przyspiesza to wczytywanie stron przy kolejnych wizytach, a także wyświetlanie treści, gdy użytkownik jest offline.

Skrzynka robocza w CRA

Workbox to zbiór narzędzi umożliwiających tworzenie i utrzymywanie usług pracowników. W CRA workbox-webpack-plugin jest już uwzględniona w kompilacji produkcyjnej i trzeba go włączyć tylko w src/index.js, aby zarejestrować nowy skrypt service worker z każdym sylwetka:

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 przy użyciu interfejsu CRA, w której skrypt service worker został włączony w tym 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 naciśnij Pełny ekran 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 kolumna Size pokazuje komunikat (from ServiceWorker) wskazujący, że zasoby zostały pobrane z skryptu service worker.

Żądania sieciowe z skryptem service worker

Skrypt service worker zapisuje w pamięci podręcznej wszystkie zasoby statyczne, więc spróbuj użyć aplikacji w trybie offline:

  1. Na karcie Sieć w Narzędziach deweloperskich zaznacz pole wyboru Offline, aby aby symulować korzystanie z trybu offline.
  2. Załaduj ponownie aplikację.

Aplikacja działa dokładnie tak samo, nawet bez sieci dzięki połączeniu!

Modyfikowanie strategii buforowania

Domyślną strategią wstępnego buforowania używaną przez Workbox w architekturze CRA jest tryb cache-pierwsze, gdzie wszystkie zasoby statyczne są pobierane z pamięci podręcznej skryptu service worker, a jeśli to się nie uda (jeśli na przykład zasób nie jest przechowywany w pamięci podręcznej), żądanie sieciowe jest wysyłane. Ten jest sposób, w jaki treść może być wyświetlana użytkownikom, nawet gdy są w offline.

Chociaż Workbox zapewnia wsparcie w definiowaniu różnych strategii i podejść, do buforowania zasobów statycznych i dynamicznych, domyślna konfiguracja w CRA nie może mogą zostać zmodyfikowane lub zastąpione, chyba że zostaną całkowicie wyrzucone. Występuje jednak otwarta oferta aby dowiedzieć się, jak dodać obsługę zewnętrznego pliku workbox.config.js. Ten pozwalałyby programistom zastąpić ustawienia domyślne przez utworzenie pojedynczy plik workbox.config.js.

Obsługa strategii skoncentrowanej na pamięci podręcznej

Najpierw poleganie na pamięci podręcznej skryptu service worker, a potem z powrotem na sieć to doskonały sposób na tworzenie witryn, które ładują się szybciej przy kolejnych wizytach i działają offline. Trzeba jednak pamiętać o kilku kwestiach, które należy wziąć pod uwagę:

  • Jak można przetestować zachowanie buforowania przez skrypt service worker?
  • Czy użytkownik powinien mieć widoczną wiadomość informującą, że z pamięci podręcznej?

CRA dokumentacja wyjaśnia te i inne kwestie bardziej szczegółowo.

Podsumowanie

Skrypt service worker pozwala wstępnie buforować ważne zasoby w aplikacji, zapewnić użytkownikom szybsze działanie, a także pomoc w trybie offline.

  1. Jeśli używasz CRA, włącz wstępnie skonfigurowany skrypt service worker w src/index.js
  2. Jeśli do tworzenia aplikacji React nie używasz CRA, dołącz jedną z metod dostępnych przez Workbox, takich jak workbox-webpack-plugin, procesu tworzenia aplikacji.
  3. Sprawdzaj, kiedy CRA będzie obsługiwać plik zastąpienia workbox.config.js tego procesu Problem z GitHubem.