sw-client-channel
v1.0.3
Published
A tool for communication between service worker and browser pages
Downloads
10
Maintainers
Readme
sw-client-channel
A tool for communication between service worker and browser pages
Install
npm i -S sw-client-channel
Features
- Clients management
- Support transferable
- Broadcast to all clients and emit to certain client
- Request/Respond of both sides
Usage
import ClientChannel from 'sw-client-channel/client';
navigator.serviceWorker
.register('/sw.js')
.then(navigator.serviceWorker.ready)
.then(registration => {
const channel = new ClientChannel(registration.active);
channel.on('hi', () => {
console.log('sw says hi');
const arrayBuffer = new ArrayBuffer();
channel.request('transferable', [arrayBuffer], [arrayBuffer])
.then(buffer => {
console.log(arrayBuffer === buffer);
channel.emit('bye');
});
});
channel.on('bye', () => {
console.log(`sw says bye`);
});
channel.emit('hi');
});
import SWChannel from 'lib/sw-client-channel/sw';
SWChannel.on('hi', clientId => {
console.log(`client ${clientId} says hi`);
SWChannel.emit(clientId, 'hi');
});
SWChannel.on('bye', clientId => {
console.log(`client ${clientId} says bye`);
channel.emit('bye');
});
SWChannel.respond('transferable', async arrayBuffer => {
// await do sth...
const result = arrayBuffer;
const transferList = [arrayBuffer];
return [result, transferList];
}, true);
should print
client <clientId> says hi
sw says hi
true
client <clientId> says bye
sw says bye
API in pages
constructor(options)
- options.worker - The used service worker
on(name, handler)
Register an event listener to sw's
channel.broadcast(name, args)
channel.emit(clientId, name, args, transferList)
handler is executed as handler(...args)
Example
channel.on('hi', (...args) => {
console.log(...args);
});
off(name, handler)
Unregister and event listener
Example
channel.on('hi', function handler () {
channel.off('hi', handler);
});
emit(name, args[, transferList])
Send an request with args and optionally transferList. It is handled by sw's
channel.on(name, handler)
Example
channel.emit('check update');
channel.emit('give me an array buffer', [arrayBuffer], [arrayBuffer]);
request(name, args[, transferList]): Promise
Send an request with args and optionally transferList and return a promise. It is responeded by sw's
channel.respond(name, handler, transferable = false)
Example
channel.request('cache names', ['assets'])
.then(console.log, console.error);
respond(name, handler, transferable = false)
Respond to a request from sw and return result. The handler can return a promise.
If transferable
is true
, you should return [result, transferList]
instead of result
Example
// transferable = false
channel.respond('what time is it', () => {
console.log('sw asked what time is it');
return Date.now();
});
// transferable = true
channel.respond('give me back the array buffer I sent', async arrayBuffer => {
// await do sth...
return [arrayBuffer, [arrayBuffer]];
}, true);
destroy()
Destroy this channel
API in service worker
on(name, handler)
Register an event listener to client's
channel.emit(name, args)
handler is executed as handler(clientId, ...args)
Example
channel.on('hi', (clientId, ...args) => {
console.log(clientId, ...args);
});
off(name, handler)
Unregister and event listener
Example
channel.on('hi', function handler () {
channel.off('hi', handler);
});
emit(clientId, name, args[, transferList])
Send an request to certain client with args and optionally transferList. It is handled by client's
channel.on(name, handler)
Example
channel.emit(clientId, 'reload page', [/*force = */true]);
channel.emit(clientId, 'give me an array buffer', [arrayBuffer], [arrayBuffer]);
broadcast(name, args)
Send an request to all clients with args. It is handled by client's
channel.on(name, handler)
**NOTE: ** it doesn't accept transferList
Example
channel.emit(clientId, 'reload page', [/*force = */true]);
channel.emit(clientId, 'give me an array buffer', [arrayBuffer], [arrayBuffer]);
request(clientId, name, args[, transferList]): Promise
Send an request to certain client with args and optionally transferList and return a promise. It is responeded by clients's
channel.respond(name, handler, transferable = false)
Example
channel.request(clientId, 'initialization time')
.then(console.log, console.error);
respond(name, handler, transferable = false)
Respond to a request from client and return result. The handler can return a promise.
If transferable
is true
, you should return [result, transferList]
instead of result
handler is executed as handler(clientId, ...args)
Example
// transferable = false
channel.respond('what time is it', clientId => {
console.log(`client ${clientId} asked what time is it`);
return Date.now();
});
// transferable = true
channel.respond('give me back the array buffer I sent', async (clientId, arrayBuffer) => {
// await do sth...
return [arrayBuffer, [arrayBuffer]];
}, true);
destroy()
Destroy this channel