🤢
v1/v2
v1/v2
v1 (Issues)
v1 (Issues)
// Where does this come from? Bare in mind version string.
importScripts('/workbox-sw.dev.v2.0.3.js');
const workboxSW = new WorkboxSW({
// Options here can affect any module
clientsClaim: true,
});
// `precache()` is defined on `workbox-sw` instead of
// on the `workbox-precaching` module
workboxSW.precache([{
url: 'precached.txt',
revision: '43011922c2aef5ed5ee3731b11d3c2cb',
}]);
workboxSW.router.registerRoute(
'https://httpbin.org/image/(.*)',
workboxSW.strategies.cacheFirst({
// Theses options require specific plugins to exist in current context
cacheName: 'images',
cacheExpiration: {
maxEntries: 2,
maxAgeSeconds: 7 * 24 * 60 * 60,
},
cacheableResponse: {statuses: [0, 200]},
})
);
v1 (Issues)
v3 (Beta)
v3 (Beta)
workbox-sw module
lightweight proxy object
[A convenience/loader]
v3 (Beta)
workbox-*
precaching
backgroundSync
etc
v3 (Beta)
v3 (Beta)
importScripts('<CDN or Path>/workbox-sw.js');
workbox.precaching.*
via workbox-sw:
new Proxy(this, {
get(target, key) {
if (target[key]) {
return target[key];
}
const moduleName = MODULE_KEY_TO_NAME_MAPPING[key];
if (moduleName) {
target.loadModule(moduleName);
}
return target[key];
},
});
v3 (Beta)
without workbox-sw:
importScripts('<CDN or Path>/workbox-core.<dev or prod>.js');
importScripts('<CDN or Path>/workbox-precaching.<dev or prod>.js');
workbox.precaching.* <- Namespace from workbox-precaching
v3 (Beta)
v3 (Beta)
importScripts('<CDN or Path>/workbox-sw.js');
workbox.precaching.*;
import precaching from 'workbox-precaching';
precaching.*;
v3 (Beta)
import precaching from 'workbox-precaching';
precaching.*;
{
..
"main": "build/workbox-precaching.prod.js",
"module": "index.mjs",
..
}
Main and Module in package.json
v3 (Beta)
// The implementation of workbox-foo
import {logger} from 'workbox-core/_private/logger.mjs';
export default function() {
logger.log('hello');
}
this.workbox = this.workbox || {};
this.workbox.foo = (function(logger_1) {
return function() {
logger_1.log('hello');
};
})(workbox.core._private.logger)
v3 (Beta)
v3 (Beta)
v3 (Beta)
v3 (Beta)
Â
Using the correct events and supporting chunks
Â
More community PR's since improving
v3 (Beta)
Â
Find `precacheAndRoute([])` and inject a list of files and revisions.
OR
Inject `importScripts('precache-1234.js')` which exposes `self.__precacheManifest`.
Â
Good for people wanting their own SW, but not intuitive.
v3 (Beta)
Â
Same as sw-precache with option of use CDN or local Workbox builds
Â
Hard to get away from this once you've started.
Configuration is growing and duplication Config -> Templated Code.
v3 (Beta)
*Maybe I made things worse
v3 (Beta)
v3 (Beta)
// Version is directory name, can be CDN or local
importScripts('<CDN or Local>/<version>/workbox-sw.js');
// Options in respective places
workbox.clientsClaim();
workbox.core.setLogLevel(workbox.core.LOG_LEVEL.debug);
// All methods under module namespace
workboxSW.precaching.precacheAndRoute([{
url: 'precached.txt',
revision: '43011922c2aef5ed5ee3731b11d3c2cb',
}]);
workboxSW.router.registerRoute(
'https://httpbin.org/image/(.*)',
workboxSW.strategies.cacheFirst({
cacheName: 'images',
// Plugins are explicit
plugins: [
workbox.cacheExpiration.plugin({
maxEntries: 2,
maxAgeSeconds: 7 * 24 * 60 * 60,
}),
workbox.cacheableResponse.plugin({
statuses: [0, 200],
}),
],
})
);