Last active
February 23, 2019 14:23
-
-
Save prateekbh/7f047938b5d1aab1b8a8b0f92d093ef2 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.1/workbox-sw.js'); | |
class SWRCacheExpiration extends workbox.expiration.CacheExpiration { | |
async refreshEntries() { | |
if (this._isRunning) { | |
this._rerunRequested = true; | |
return; | |
} | |
this._isRunning = true; | |
const now = Date.now(); | |
// First, expire old entries, if maxAgeSeconds is set. | |
const oldEntries = await this._findOldEntries(now); | |
// Once that's done, check for the maximum size. | |
const extraEntries = await this._findExtraEntries(); | |
// Use a Set to remove any duplicates following the concatenation, then | |
// convert back into an array. | |
const allUrls = [...new Set(oldEntries.concat(extraEntries))]; | |
console.log(`Refresing ${allUrls}`); | |
await this._refreshURL(allUrls); | |
this._isRunning = false; | |
} | |
async _refreshURL(urls) { | |
const cache = await caches.open(this._cacheName); | |
for (const url of urls) { | |
// await cache.delete(url); | |
const response = fetch(url, {cache: 'reload'}); | |
if (response.ok) { | |
await cache.put(url, response); | |
} | |
} | |
} | |
} | |
class SWRExiprationPlugin extends workbox.expiration.Plugin { | |
_getCacheExpiration(cacheName) { | |
let cacheExpiration = this._cacheExpirations.get(cacheName); | |
if (!cacheExpiration) { | |
cacheExpiration = new SWRCacheExpiration(cacheName, this._config); | |
this._cacheExpirations.set(cacheName, cacheExpiration); | |
} | |
return cacheExpiration; | |
} | |
cachedResponseWillBeUsed({cacheName, cachedResponse, event}) { | |
if (!cachedResponse) { | |
return null; | |
} | |
let isFresh = this._isResponseDateFresh(cachedResponse); | |
// Expire entries to ensure that even if the expiration date has | |
// expired, it'll only be used once. | |
const cacheExpiration = this._getCacheExpiration(cacheName); | |
// If expired swap the content in cache but return from cache for this one time. | |
if (!isFresh) { | |
event.waitUntil(cacheExpiration.refreshEntries()); | |
} | |
// Always return from cache, even after expiration. | |
return cachedResponse; | |
} | |
} | |
workbox.routing.registerRoute( | |
new RegExp('/images/'), | |
workbox.strategies.cacheFirst({ | |
cacheName: 'image-cache', | |
plugins: [ | |
new SWRExiprationPlugin({ | |
maxAgeSeconds: 5, | |
}), | |
], | |
}) | |
); | |
self.addEventListener('install', function(event) { | |
event.waitUntil(self.skipWaiting()); | |
}); | |
self.addEventListener('activate', function(event) { | |
event.waitUntil(self.clients.claim()); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
should probably have the
{cache: 'reload'}
option set, to ensure that the refresh request goes against the network and doesn't hit the browser's HTTP cache.