Simple helper library for working with service workers. There are two main things that need to be remembered:
- SSL is a requirement.
- You have scoped access, so your worker.js needs to be in your root.
On your main thread, you need to include main-thread/ServiceWorker.js.
After that, just register your worker with new object.
(function(){
var worker = new com.degordian.common.helpers.ServiceWorker('/worker.example.js');
worker.register();
})();
That's it on your main thread.
There are few things that need to be done on this thread:
- Include workers definitions.
- Initialize new worker.
- Set definitions.
Definition of workers is in service-workers.js file.
importScripts('/path/to/service-workers.js');
It's good practice to set constants for further usage. Also, don't forget to pass context to worker.
var baseUrl = "https://your.base.url";
var context = self;
var version = "1";
var cacheKey = "cache" + version;
var worker = new com.degordian.common.ServiceWorker(self);
// Worker definitions
// TODO: wiil be filled
// Initialize worker
worker.init();
Worker defined like this knows how to work with following interfaces:
- Installable
- Activable
- Fetchable
- Syncable
Pushable will be added in future builds. Each of this represent a single event in life cycle.
All interfaces have getRoutes function and if there is a match with an event, worker will be called and event object will be passed to it.
ONLY FETCHABLE KNOW HOW TO DEAL WITH REGEX!
There is a certain amount of implemented content serving methods. Here is a list of those implemented.
Worker name | Constructor | Description | Interfaces |
---|---|---|---|
OnInstallDependency | (routes, cacheKey) | Provided routes will be fetched and cached during the install event. If any of these fails, worker will not be installed. | Installable |
OnInstallNoDependency | (dependentRoutes, nonDependentRoutes, cacheKey) | Similar to OnInstallDependency, with extra of non dependent files (if fetching those fails, worker will still install) | Installable |
OnActivate | (caches) | Responsible for cache clearing. If cache name is not provided in caches, it will be deleted. | Activable |
OnNetworkResponseCache | (routes, cacheKey) | Returns from cache. If there is no match in cache, network request is normally done. On it's completion, response is cached for further usage. | Fetchable |
StaleWhileRevalidate | (routes, cacheKey) | If there is a cache match, respond to event with that and make a request to network and upon completion cache it. If there is no cache, standard network request. | Fetchable |
RevalidateWithCacheFallback | (routes, cacheKey) | Do a network request and cache on success. On failure, return match from cache. | Fetchable |
OnBackgroundSync | (ids, cacheKey) | When sync event is triggered, put to cache all with event id. | Syncable |
CacheOnly | (routes) | Fetch only from cache | Fetchable |
CacheFallingBackToNetwork | (routes) | Get from cache if there is a match, otherwise standard network request (with no cache at response) | Fetchable |
CacheAndNetworkRace | (routes) | Which ever responds first with success. | Fetchable |
NetworkFallingBackToCache | (routes) | If there is network, standard network request. If there is no network, get a match from cache. | Fetchable |
Here are two examples for working with strings and regular expressions:
worker.registerWorker(
new com.degordian.common.serviceWorkers.OnInstallDependecy([
baseUrl + "static/js/app.js",
baseUrl + "static/js/main.js",
])
);
worker.registerWorker(
new com.degordian.common.serviceWorkers.CacheFallingBackToNetwork([
/main\.js$/,
/app\.js$/,
/sdk\.js$/
])
);
Final worker.js example:
/*
* Path to the service-workers.js file
*/
importScripts('/path/to/service-workers.js');
var baseUrl = "https://your.base.url";
var context = self;
var version = "1";
var cacheKey = "cache" + version;
var worker = new com.degordian.common.ServiceWorker(self);
// Worker definitions
worker.registerWorker(
new com.degordian.common.serviceWorkers.OnInstallDependecy([
baseUrl + "static/js/app.js",
baseUrl + "static/js/main.js",
])
);
worker.registerWorker(
new com.degordian.common.serviceWorkers.CacheFallingBackToNetwork([
/main\.js$/,
/app\.js$/,
/sdk\.js$/
])
);
worker.registerWorker(
new com.degordian.common.serviceWorkers.StaleWhileRevalidate([
/\.(png|jpg|jpeg|gif)$/,
/gtm\.js/,
])
);
// Initialize worker
worker.init();