The NavigationPreloadManager
interface of the the Service Worker API provides methods for managing the preloading of resources with a service worker.
Methods
NavigationPreloadManager.enable()
- Enables navigation preloading and returns a
Promise
that resolves.
NavigationPreloadManager.disable()
- Disables navigation preloading and returns a
Promise
that resolves.
NavigationPreloadManager.setHeaderValue()
- Sets the value of the
Service-Worker-Navigation-Preload
header and returns an empty Promise
.
NavigationPreloadManager.getState()
- Returns a
Promise
that resolves to an object with properties indicating whether preload is enabled and the contents of the Service-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
Browser Compatibility
| Desktop | Mobile |
---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome for Android | Firefox for Android | Opera for Android | Safari on iOS | Samsung Internet |
---|
NavigationPreloadManager | Chrome
Full support
62 | Edge
Full support
18 | Firefox
No support
No-
No support
No
- Notes Implementation tracked in bug 1290958
| IE
?
| Opera
Full support
49 | Safari
?
| WebView Android
Full support
62 | Chrome Android
Full support
62 | Firefox Android
No support
No-
No support
No
- Notes Implementation tracked in bug 1290958
| Opera Android
Full support
46 | Safari iOS
?
| Samsung Internet Android
Full support
8.0 |
---|
disable | Chrome
Full support
62 | Edge
Full support
18 | Firefox
No support
No-
No support
No
- Notes Implementation tracked in bug 1290958
| IE
?
| Opera
Full support
49 | Safari
?
| WebView Android
Full support
62 | Chrome Android
Full support
62 | Firefox Android
No support
No-
No support
No
- Notes Implementation tracked in bug 1290958
| Opera Android
Full support
46 | Safari iOS
?
| Samsung Internet Android
Full support
8.0 |
---|
enable | Chrome
Full support
62 | Edge
Full support
18 | Firefox
No support
No-
No support
No
- Notes Implementation tracked in bug 1290958
| IE
?
| Opera
Full support
49 | Safari
?
| WebView Android
Full support
62 | Chrome Android
Full support
62 | Firefox Android
No support
No-
No support
No
- Notes Implementation tracked in bug 1290958
| Opera Android
Full support
46 | Safari iOS
?
| Samsung Internet Android
Full support
8.0 |
---|
getState | Chrome
Full support
62 | Edge
Full support
18 | Firefox
No support
No-
No support
No
- Notes Implementation tracked in bug 1290958
| IE
?
| Opera
Full support
49 | Safari
?
| WebView Android
Full support
62 | Chrome Android
Full support
62 | Firefox Android
No support
No-
No support
No
- Notes Implementation tracked in bug 1290958
| Opera Android
Full support
46 | Safari iOS
?
| Samsung Internet Android
Full support
8.0 |
---|
setHeaderValue | Chrome
Full support
62 | Edge
Full support
18 | Firefox
No support
No-
No support
No
- Notes Implementation tracked in bug 1290958
| IE
?
| Opera
Full support
49 | Safari
?
| WebView Android
Full support
62 | Chrome Android
Full support
62 | Firefox Android
No support
No-
No support
No
- Notes Implementation tracked in bug 1290958
| Opera Android
Full support
46 | Safari iOS
?
| Samsung Internet Android
Full support
8.0 |
---|
Legend
-
Full support
- Full support
-
No support
- No support
-
Compatibility unknown
- Compatibility unknown
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- See implementation notes.
- See implementation notes.