This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The NavigationPreloadManager
interface of the the Service Worker API provides methods for managing the preloading of resources with a service worker.
Methods
NavigationPreloadManager.enable()
- Returns a
Promise
that resolves when navigation preloading is enabled. NavigationPreloadManager.disable()
- Returns a
Promise
that resolves when navigation preloading is disabled. NavigationPreloadManager.setHeaderValue()
- Sets the value of the
Service-Worker-Navigation-Preload
header and returns an emptyPromise
. NavigationPreloadManager.getState()
- Returns a
Promise
that resolves to an object with properties indicating whether preload is enabled and the contents of theService-Worker-Navigation-Preload
.
Examples
Feature Detecting and Enabling Navigation Preloading
addEventListener('activate', event => { event.waitUntil(async function() { if (self.registration.navigationPreload) { // Enable navigation preloads! await self.registration.navigationPreload.enable(); } }()); });
Using a Preloaded Response
The following example shows the implementation of a fetch event that uses a preloaded response.
addEventListener('fetch', event => { event.respondWith(async function() { // Respond from the cache if we can const cachedResponse = await caches.match(event.request); if (cachedResponse) return cachedResponse; // Else, use the preloaded response, if it's there const response = await event.preloadResponse; if (response) return response; // Else try the network. return fetch(event.request); }()); });
Specifications
Specification | Status | Comment |
---|---|---|
Service Workers The definition of 'NavigationPreloadManager' in that specification. |
Editor's Draft | Initial definition. |
Browser Compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 62 | ? | ? | 46 | ? |
Feature | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | 62 | 62 | ? | ? | ? | 46 | ? |