In dieser Dokumentation wurde das Pre-Caching bereits behandelt, aber es wird nicht genug darüber gesprochen, wie es richtig funktioniert. Das ist wichtig, denn unabhängig davon, ob Sie Workbox verwenden, ist es leicht, zu viel im Voraus zu im Cache zu speichern und möglicherweise Daten und Bandbreite zu verschwenden. Achten Sie darauf, wie sich die Precaching-Nutzlast auf die Nutzererfahrung auswirkt.
Beim Lesen dieses Dokuments ist zu beachten, dass es sich hierbei um allgemeine Richtlinien handelt. Möglicherweise müssen Sie bei Ihrer Anwendungsarchitektur und Ihren Anforderungen anders vorgehen als hier empfohlen, aber diese Richtlinien dienen als gute Standardeinstellungen.
Empfohlen: wichtige statische Assets vorab im Cache speichern
Die besten Kandidaten für das Precaching sind kritische statische Assets, aber was zählt als „kritisch“? Asset? Für Entwickelnde mag es verlockend sein, eine ganze Anwendung als „kritisch“ zu betrachten, aber die Perspektive der Nutzenden ist das Wichtigste. Stellen Sie sich kritische Assets als diejenigen vor, die für eine User Experience unbedingt erforderlich sind:
- Globale Stylesheets.
- JavaScript-Dateien mit globaler Funktionalität
- Anwendungs-Shell-HTML, sofern dies auf Ihre Architektur zutrifft.
Zur Erinnerung: Dies sind allgemeine Richtlinien, keine verbindlichen Empfehlungen. Beim Pre-Caching von Assets empfiehlt es sich, eher weniger als mehr zu bieten.
Empfohlen: Offline-Fallback für mehrseitige Websites vorab im Cache speichern
Bei typischen mehrseitigen Websites nutzen Sie möglicherweise eine Netzwerk-First- oder Nur-Netzwerk-Caching-Strategie, um Navigationsanfragen zu verarbeiten.
In diesen Fällen sollten Sie dafür sorgen, dass Ihr Service Worker eine Offline-Fallback-Seite speichert und mit einer Offline-Fallback-Seite antwortet, wenn der Nutzer eine Navigationsanfrage stellt, während er offline ist. Eine Möglichkeit, dies in Workbox zu erreichen, könnte eine reine Netzwerkstrategie mit einem Offline-Fallback sein, wobei auch die Navigationsvorabladung genutzt wird:
import {PrecacheFallbackPlugin, precacheAndRoute} from 'workbox-precaching';
import {registerRoute, Route} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';
import * as navigationPreload from 'workbox-navigation-preload';
navigationPreload.enable();
// Ensure that /offline.html is part of your precache manifest!
precacheAndRoute(self.__WB_MANIFEST);
// The network-only callback should match navigation requests, and
// the handler for the route should use the network-only strategy, but
// fall back to a precached offline page in case the user is offline.
const networkOnlyNavigationRoute = new Route(({request}) => {
return request.mode === 'navigate';
}, new NetworkOnly({
plugins: [
new PrecacheFallbackPlugin({
fallbackURL: '/offline.html'
})
]
}));
registerRoute(networkOnlyNavigationRoute);
Dadurch wird sichergestellt, dass, wenn ein Nutzer offline geht und zu einer Seite navigiert, die sich nicht in seinem Cache befindet, zumindest Offline-Inhalte angezeigt werden.
Mögliche Lösung: spekulatives Precaching
Das ist ein großes „vielleicht“, Allerdings bietet das Pre-Caching von Assets, die nur in bestimmten Fällen verwendet werden, einen potenziellen Vorteil. Stellen Sie sich das so vor: Für Nutzer fallen zusätzliche Daten-Downloads an, was den spekulativen Vorteil hat, dass zukünftige Anfragen für diese Assets beschleunigt werden.
Nun zu dem großen Vorbehalt: Seien Sie sehr vorsichtig, wenn Sie sich dafür entscheiden. Es ist leicht, dabei Daten zu verschwenden, und es sollte eine datengesteuerte Entscheidung sein. Vermeiden Sie außerdem ein spekulatives Pre-Caching von Assets, die sich häufig ändern, da der Nutzer jedes Mal eine zusätzliche Datennutzung verursacht, wenn der Precaching-Code eine neue Version erkennt. Beobachten Sie die User Flows in Ihren Analysen, um zu sehen, wohin Nutzer tendenziell gehen. Wenn du Zweifel bezüglich des spekulativen Pre-Cachings von Assets hast, ist dies wahrscheinlich ein gutes Zeichen, nicht zu handeln.
Eventuell nicht: Statischen HTML vorab im Cache speichern
Diese Richtlinie gilt eher für statische Websites, bei denen diskrete HTML-Dateien entweder mit einem Generator für statische Websites oder manuell erstellt werden, anstatt dynamisch oder über ein Anwendungs-Back-End bereitgestellt zu werden. Wenn dies auf Ihre Architektur zutrifft, empfiehlt es sich, nicht jede HTML-Datei für Ihre Website vorab im Cache zu speichern.
Ein Problem beim Pre-Caching der HTML-Dateien einer ganzen Website besteht darin, dass Markups, die jetzt vorab im Cache gespeichert werden, immer später aus dem Cache bereitgestellt werden, bis der Service Worker aktualisiert wird. Das verbessert die Leistung, kann aber zu einer erheblichen Cache-Abwanderung führen, wenn sich der HTML-Code Ihrer Website häufig ändert.
Es gibt jedoch ein paar Ausnahmen von dieser Regel. Wenn Sie eine kleine Website mit einigen statischen HTML-Dateien bereitstellen, ist es wahrscheinlich in Ordnung, alle diese Seiten vorab im Cache zu speichern, sodass sie offline verfügbar sind. Wenn Ihre Website besonders groß ist, sollten Sie einige hochwertige Seiten und ein Offline-Fallback spekulativ im Cache speichern und sich auf das Laufzeit-Caching verlassen, um andere Seiten für Sie im Cache zu speichern.
Vermeide es, responsive Bilder oder Favicons vorab im Cache zu speichern
Dies ist weniger eine allgemeine Richtlinie, sondern eine Regel. Responsive Bilder sind eine komplexe Lösung für ein komplexes Problem: Viele Nutzer verwenden viele Geräte, die alle unterschiedliche Bildschirmgröße, Pixeldichte und Unterstützung für alternative Formate haben. Wenn Sie einen ganzen Satz responsiver Bilder vorab im Cache speichern, werden wahrscheinlich mehrere Bilder vorab im Cache gespeichert, obwohl der Nutzer letztendlich nur eines davon herunterlädt.
Favicons stellen eine ähnliche Situation dar, da Websites häufig eine ganze Reihe von Favicons für verschiedene Szenarien bereitstellen. Meistens wird nur ein Favicon angefordert, was das Pre-Caching eines ganzen Favicon-Satzes ebenso aufwendig macht.
Tun Sie Ihren Nutzern einen Gefallen und speichern Sie responsive Bild- und Favicon-Sets nicht vorab im Cache. Verlassen Sie sich stattdessen auf das Laufzeit-Caching. Wenn Sie Bilder vorab im Cache speichern müssen, sollten Sie häufig verwendete Bilder, die nicht Teil einer Gruppe responsiver Bilder oder Favicons sind, vorab im Cache speichern. SVGs sind im Hinblick auf die Datennutzung weniger riskant. Eine einzelne SVG wird unabhängig von der Pixeldichte eines bestimmten Bildschirms optimal gerendert.
Nicht: Polyfills vorab im Cache speichern
Die unterschiedliche Browserunterstützung für APIs stellt eine ständige Herausforderung für Webentwickler dar, und Polyfilling ist eine der Möglichkeiten, diese Herausforderung zu meistern. Eine Möglichkeit, die Leistungskosten von Polyfills zu minimieren, besteht darin, die Funktionen zu überprüfen und Polyfills nur für die Browser zu laden, die sie benötigen.
Da das bedingte Laden von Polyfills während der Laufzeit in Bezug auf die aktuelle Umgebung erfolgt, ist das Precaching von Polyfills ein Glücksspiel. Einige Nutzer profitieren davon, während andere am Ende Bandbreite für unnötige Polyfills verschwenden.
Polyfills dürfen nicht vorab im Cache gespeichert werden. Verlassen Sie sich auf das Laufzeit-Caching, damit sie nur in Browsern im Cache gespeichert werden, die sie erfordern, um eine Datenverschwendung zu vermeiden.
Fazit
Für das Precach müssen Sie sich im Vorfeld Gedanken darüber machen, welche Assets Ihre Nutzer tatsächlich benötigen. Sie können es aber auf jeden Fall richtig machen und so die zukünftige Leistung und Zuverlässigkeit priorisieren.
Wenn Sie sich nicht sicher sind, ob bestimmte Assets vorab im Cache gespeichert werden sollten, empfiehlt es sich, Workbox anzuweisen, diese Assets auszuschließen und eine Laufzeit-Caching-Route für die Verarbeitung zu erstellen. In beiden Fällen wird das Precaching weiter unten in dieser Dokumentation ausführlich behandelt, sodass Sie diese Prinzipien in Zukunft auf Ihre Precaching-Logik anwenden können.