service-worker.ts

import{CacheFirst,NetworkOnly}from'workbox-strategies';
import{cleanupOutdatedCaches,matchPrecache,precacheAndRoute}from'workbox-precaching';
import{ExpirationPlugin}from'workbox-expiration';
import{initializeasinitializeOfflineAnalytics}from'workbox-google-analytics';
import{registerRoute,setCatchHandler}from'workbox-routing';
import{RouteHandlerCallbackOptions}from'workbox-core/types';
import{setCacheNameDetails,skipWaiting}from'workbox-core';
importnunjucksfrom'nunjucks/browser/nunjucks';

setCacheNameDetails({precache: 'precache-bug-fix'});
precacheAndRoute(self.__WB_MANIFEST);
cleanupOutdatedCaches();

constCacheStorageLoader=nunjucks.Loader.extend({
async: true,

getSource: asyncfunction(name: string,callback: Function){
try{
constpath=`/_posts/_includes/${name}`;
constcachedResponse=awaitmatchPrecache(path);
if(!cachedResponse){
thrownewError(`Unable to find precacahed response for ${path}.`);
}
constsrc=awaitcachedResponse.text();
callback(null,{src, path,noCache: false});
}catch(error){
callback(error);
}
}
});

constnunjucksEnv=newnunjucks.Environment(
newCacheStorageLoader()
);

let_site: {string: any};
asyncfunctiongetSiteData(){
if(!_site){
constcacheKey='/_posts/_data/site.json';
constsiteDataResponse=awaitmatchPrecache(cacheKey);
if(!siteDataResponse){
thrownewError(`Unable to find precacahed response for ${cacheKey}.`);
}
_site=awaitsiteDataResponse.json();
}

return_site;
}

constpostHandler=async(options: RouteHandlerCallbackOptions)=>{
const{params}=options;
if(!(params&&Array.isArray(params))){
thrownewError(`Couldn't get parameters from router.`);
}

constsite=awaitgetSiteData();

// params[3] corresponds to post.fileSlug in 11ty.
constcacheKey=`/_posts/${params[3]}.json`;
constcachedResponse=awaitmatchPrecache(cacheKey);
if(!cachedResponse){
thrownewError(`Unable to find precacahed response for ${cacheKey}.`);
}

constcontext=awaitcachedResponse.json();
context.site=site;
context.content=context.html;

constrenderedTemplate: string=awaitnewPromise((resolve,reject)=>{
nunjucksEnv.render(
context.layout,
context,
(error: Error|undefined,result: string)=>{
if(error){
reject(error);
}else{
resolve(result);
}
}
);
});

constheaders={
'content-type': 'text/html',
};
returnnewResponse(renderedTemplate,{headers});
};

registerRoute(
newRegExp('/(\\d{4})/(\\d{2})/(\\d{2})/(.+)\\.html'),
postHandler
);

registerRoute(
newRegExp('/assets/images/'),
newCacheFirst({
cacheName: 'images',
plugins: [
newExpirationPlugin({
maxEntries: 20,
}),
],
})
);

// If anything goes wrong when handling a route, return the network response.
setCatchHandler(newNetworkOnly());

initializeOfflineAnalytics();

skipWaiting();