EdenJS - Serviceworker
Serviceworker base logic component for EdenJS
@edenjs/serviceworker
automatically adds serviceworker logic to an edenjs install
Setup
Install
npm i --save @edenjs/serviceworker
Configure
config.serviceworker = {
config : { // this config field is passed to the compiled serviceworker
offline : { // disable by passing false or null
files : ['/some/file.png', '/some/otherfile.png', 'https://some.external/file.png'],
},
},
};
If offline is on, the entire application can be used offline. To setup routes for offline simply specify @offline
as part of their config:
/**
* Index action
*
* @param {Request} req
* @param {Response} res
*
* @view offline
* @route {get} /
* @layout main
* @offline
*/
async indexAction(req, res) {
// render offline page
res.render();
}
As we cannot run a function in the backend when the service has no internet, all other features need to be specified in the config rather than the action function. For example, the following will not function in offline mode; while the above will.
/**
* Index action
*
* @param {Request} req
* @param {Response} res
*
* @route {get} /
* @offline
*/
async indexAction(req, res) {
// render offline page
res.render('offline', {
layout : 'main',
});
}
Compilation
Any file you include in the following path will be compiled into the serviceworker:
'public/js/serviceworker.js'
'public/js/serviceworker/**/*'
Messaging
Serviceworker messaging is automated between an installed serviceworker and a global eden object.
Example
In the serviceworker
// set port
const port = null; // can be a sepcific port
// send message to frontend
self.eden.send(port, 'to.send', 'a', 'b');
// receive a request for data from the frontend
self.eden.endpoint('check.something', async (a, b) => {
// return b
return b;
});
// receive an event from the frontend
self.eden.on('check.event', async (a, b) => {
// got event from frontend
console.log(a, b);
});
In the frontend
// call a serviceworker endpoint
const result = await window.eden.serviceworker.call('check.something', 'a', 'b'); // returns 'b'
// receive a request for data from the frontend
window.eden.serviceworker.send('check.event', 'a', 'b');
// receive an event from the frontend
window.eden.serviceworker.on('to.send', async (a, b) => {
// got event from serviceworker
console.log(a, b);
});