-
-
Save phamann/d1da851731fa790d6e2c to your computer and use it in GitHub Desktop.
console.log("Worker startup"); | |
this.oninstall = function(event) { | |
console.log('Worker install'); | |
event.waitUntil( | |
caches.create('static').then(function(cache) { | |
return cache.add( | |
//Templates | |
'/assets/offline/offline-list.html', | |
//Assets | |
'/assets/images/global/sprite.png', | |
'/assets/stylesheets/head.default.css', | |
'/assets/stylesheets/global.css' | |
); | |
}).catch(function(err){ | |
console.log('Worker install failed'); | |
console.log(err); | |
}) | |
); | |
}; | |
this.onactivate = function(event) { | |
console.log("Worker activate"); | |
console.log('worker caches:', caches); | |
}; | |
this.addEventListener('fetch', function(event) { | |
console.log('fetch:', event.request.url); | |
console.log('network state:', navigator.connection.type); | |
//If agent is offline | |
if(navigator.connection.type === "none") { | |
//If request is a static asset get from cache | |
if(/^\/assets\//.test(event.request.url)){ | |
return caches.match(event.request).catch(function() { | |
event.default(); | |
}); | |
} | |
//All others return fallback template | |
return caches.match('/assets/offline/offline-list.html'); | |
} | |
}); |
Yeah, use the polyfills in Topika. They're iDB backed, but work pretty well. The cache implementation in Canary is really incomplete, and the spec is in flux at the moment. Basically, if it doesn't have a yellow light on https://jakearchibald.github.io/isserviceworkerready/#caches, treat it as probably broken.
Great to hear you're having a play with this stuff. Btw, I'm hoping to prototype an offline-first version of Tweetdeck later in this quarter. If it's something you're interested in putting spare time into, let me know!
I managed to get the cache semi working without the polyfill using this:
this.oninstall = function(event) {
console.log('Worker install');
event.waitUntil(
caches.create('static').then(function() {
return caches.get('static').then(function(cache) {
console.log(cache);
var resourceUrls = [
'http://localhost:9000/assets/offline/offline-list.html',
'http://localhost:9000/assets/images/global/sprite.png',
'http://localhost:9000/assets/stylesheets/head.default.css',
'http://localhost:9000/assets/stylesheets/global.css'
];
return Promise.all(resourceUrls.map(function(url) {
return cache.add(new Request(url));
}));
}).catch(function(err){
console.log('Cache install failed');
console.log(err);
});
}).catch(function(err){
console.log('Worker install failed');
console.log(err);
})
);
};
But will look into the polyfill now as you suggest. Was also slightly confused why the isServiceWorkerReady page had no yellow light yet the caches
object was still available. But understandable seeing as the spec is still changing.
I've been meaning to play with it all and get my head around it for the last couple of months, so very happy to be finally do it. So yes playing with TweetDeck too will be fun.
I'll let you know how I get on, and will video the final result.
This code is essentially copied/hacked from the "Trained to Thrill" demo.
But unfortunately I am seeing the cache installation on line 8 resolve but the returned
cache
object being undefined in the callback, this in-turn throws a type error inside thecatch
.This is seen inside the latest Canary build. Here is a dump of the workers console:
Do I need to use the polymer cache polyfill? Is there a new syntax for cache create/add?