Service worker test
yflory
parent
b9f5a0f52b
commit
9c5ad795e1
|
|
@ -0,0 +1,63 @@
|
|||
/* jshint ignore:start */
|
||||
importScripts('/bower_components/requirejs/require.js');
|
||||
require.config({
|
||||
// fix up locations so that relative urls work.
|
||||
baseUrl: '/',
|
||||
paths: {
|
||||
// jquery declares itself as literally "jquery" so it cannot be pulled by path :(
|
||||
"jquery": "/bower_components/jquery/dist/jquery.min",
|
||||
// json.sortify same
|
||||
"json.sortify": "/bower_components/json.sortify/dist/JSON.sortify",
|
||||
cm: '/bower_components/codemirror'
|
||||
},
|
||||
map: {
|
||||
'*': {
|
||||
'css': '/bower_components/require-css/css.js',
|
||||
'less': '/common/RequireLess.js',
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
window = self;
|
||||
localStorage = {
|
||||
setItem: function (k, v) { localStorage[k] = v; },
|
||||
getItem: function (k) { return localStorage[k]; }
|
||||
};
|
||||
require([
|
||||
'/common/common-util.js',
|
||||
'/common/outer/worker-channel.js',
|
||||
'/common/outer/store-rpc.js'
|
||||
], function (Util, Channel, Rpc) {
|
||||
var msgEv = Util.mkEvent();
|
||||
|
||||
Channel.create(msgEv, postMessage, function (chan) {
|
||||
console.log('ww ready');
|
||||
Object.keys(Rpc.queries).forEach(function (q) {
|
||||
if (q === 'CONNECT') { return; }
|
||||
chan.on(q, function (data, cb) {
|
||||
try {
|
||||
Rpc.queries[q](data, cb);
|
||||
} catch (e) {
|
||||
console.error('Error in webworker when executing query ' + q);
|
||||
console.error(e);
|
||||
console.log(data);
|
||||
}
|
||||
});
|
||||
});
|
||||
chan.on('CONNECT', function (cfg, cb) {
|
||||
console.log('onConnect');
|
||||
// load Store here, with cfg, and pass a "query" (chan.query)
|
||||
cfg.query = function (cmd, data, cb) {
|
||||
chan.query(cmd, data, function (err, data) {
|
||||
if (err) { return void cb({error: err}); }
|
||||
cb(data);
|
||||
});
|
||||
};
|
||||
Rpc.queries['CONNECT'](cfg, cb);
|
||||
});
|
||||
}, true);
|
||||
|
||||
onmessage = function (e) {
|
||||
msgEv.fire(e);
|
||||
};
|
||||
});
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
// This file provides the API for the channel for talking to and from the sandbox iframe.
|
||||
define([
|
||||
//'/common/sframe-protocol.js',
|
||||
'/common/common-util.js'
|
||||
], function (/*SFrameProtocol,*/ Util) {
|
||||
|
||||
var mkTxid = function () {
|
||||
return Math.random().toString(16).replace('0.', '') + Math.random().toString(16).replace('0.', '');
|
||||
};
|
||||
|
||||
var create = function (onMsg, postMsg, cb, isWorker) {
|
||||
var evReady = Util.mkEvent(true);
|
||||
var handlers = {};
|
||||
var queries = {};
|
||||
|
||||
// list of handlers which are registered from the other side...
|
||||
var insideHandlers = [];
|
||||
var callWhenRegistered = {};
|
||||
|
||||
var chan = {};
|
||||
|
||||
// Send a query. channel.query('Q_SOMETHING', { args: "whatever" }, function (reply) { ... });
|
||||
chan.query = function (q, content, cb) {
|
||||
var txid = mkTxid();
|
||||
var timeout = setTimeout(function () {
|
||||
delete queries[txid];
|
||||
console.log("Timeout making query " + q);
|
||||
}, 30000);
|
||||
queries[txid] = function (data, msg) {
|
||||
clearTimeout(timeout);
|
||||
delete queries[txid];
|
||||
cb(undefined, data.content, msg);
|
||||
};
|
||||
evReady.reg(function () {
|
||||
postMsg(JSON.stringify({
|
||||
txid: txid,
|
||||
content: content,
|
||||
q: q
|
||||
}));
|
||||
});
|
||||
};
|
||||
|
||||
// Fire an event. channel.event('EV_SOMETHING', { args: "whatever" });
|
||||
var event = chan.event = function (e, content) {
|
||||
evReady.reg(function () {
|
||||
postMsg(JSON.stringify({ content: content, q: e }));
|
||||
});
|
||||
};
|
||||
|
||||
// Be notified on query or event. channel.on('EV_SOMETHING', function (args, reply) { ... });
|
||||
// If the type is a query, your handler will be invoked with a reply function that takes
|
||||
// one argument (the content to reply with).
|
||||
chan.on = function (queryType, handler, quiet) {
|
||||
(handlers[queryType] = handlers[queryType] || []).push(function (data, msg) {
|
||||
handler(data.content, function (replyContent) {
|
||||
postMsg(JSON.stringify({
|
||||
txid: data.txid,
|
||||
content: replyContent
|
||||
}));
|
||||
}, msg);
|
||||
});
|
||||
if (!quiet) {
|
||||
event('EV_REGISTER_HANDLER', queryType);
|
||||
}
|
||||
};
|
||||
|
||||
// If a particular handler is registered, call the callback immediately, otherwise it will be called
|
||||
// when that handler is first registered.
|
||||
// channel.whenReg('Q_SOMETHING', function () { ...query Q_SOMETHING?... });
|
||||
chan.whenReg = function (queryType, cb, always) {
|
||||
var reg = always;
|
||||
if (insideHandlers.indexOf(queryType) > -1) {
|
||||
cb();
|
||||
} else {
|
||||
reg = true;
|
||||
}
|
||||
if (reg) {
|
||||
(callWhenRegistered[queryType] = callWhenRegistered[queryType] || []).push(cb);
|
||||
}
|
||||
};
|
||||
|
||||
// Same as whenReg except it will invoke every time there is another registration, not just once.
|
||||
chan.onReg = function (queryType, cb) { chan.whenReg(queryType, cb, true); };
|
||||
|
||||
chan.on('EV_REGISTER_HANDLER', function (content) {
|
||||
if (callWhenRegistered[content]) {
|
||||
callWhenRegistered[content].forEach(function (f) { f(); });
|
||||
delete callWhenRegistered[content];
|
||||
}
|
||||
insideHandlers.push(content);
|
||||
});
|
||||
chan.whenReg('EV_REGISTER_HANDLER', evReady.fire);
|
||||
|
||||
// Make sure both iframes are ready
|
||||
var isReady =false;
|
||||
chan.onReady = function (h) {
|
||||
if (isReady) {
|
||||
return void h();
|
||||
}
|
||||
if (typeof(h) !== "function") { return; }
|
||||
chan.on('EV_RPC_READY', function () { isReady = true; h(); });
|
||||
};
|
||||
chan.ready = function () {
|
||||
chan.whenReg('EV_RPC_READY', function () {
|
||||
chan.event('EV_RPC_READY');
|
||||
});
|
||||
};
|
||||
|
||||
onMsg.reg(function (msg) {
|
||||
var data = JSON.parse(msg.data);
|
||||
if (typeof(data.q) === 'string' && handlers[data.q]) {
|
||||
handlers[data.q].forEach(function (f) {
|
||||
f(data || JSON.parse(msg.data), msg);
|
||||
data = undefined;
|
||||
});
|
||||
} else if (typeof(data.q) === 'undefined' && queries[data.txid]) {
|
||||
queries[data.txid](data, msg);
|
||||
} else {
|
||||
console.log("DROP Unhandled message");
|
||||
console.log(msg.data, isWorker);
|
||||
console.log(msg);
|
||||
}
|
||||
});
|
||||
if (isWorker) {
|
||||
evReady.fire();
|
||||
}
|
||||
cb(chan);
|
||||
};
|
||||
|
||||
return { create: create };
|
||||
});
|
||||
|
|
@ -51,6 +51,8 @@ define([
|
|||
if (!window.Worker) {
|
||||
return void $container.text("WebWorkers not supported by your browser");
|
||||
}
|
||||
/*
|
||||
// Shared worker
|
||||
console.log('ready');
|
||||
var myWorker = new SharedWorker('/worker/worker.js');
|
||||
console.log(myWorker);
|
||||
|
|
@ -65,7 +67,49 @@ define([
|
|||
}
|
||||
$container.append('<br>');
|
||||
$container.append(e.data);
|
||||
};
|
||||
};*/
|
||||
|
||||
// Service worker
|
||||
if ('serviceWorker' in navigator) {
|
||||
var postMessage = function (data) {
|
||||
if (navigator.serviceWorker && navigator.serviceWorker.controller) {
|
||||
navigator.serviceWorker.controller.postMessage(data);
|
||||
}
|
||||
};
|
||||
console.log('here');
|
||||
navigator.serviceWorker.register('/worker/sw.js', {scope: '/'})
|
||||
.then(function(reg) {
|
||||
console.log(reg);
|
||||
console.log('Registration succeeded. Scope is ' + reg.scope);
|
||||
$container.append('<br>');
|
||||
$container.append('Registered! (scope: ' + reg.scope +')');
|
||||
reg.onupdatefound = function () {
|
||||
console.log('new SW version found!');
|
||||
// KILL EVERYTHING
|
||||
UI.confirm("New version detected, you have to reload", function (yes) {
|
||||
if (yes) { common.gotoURL(); }
|
||||
});
|
||||
};
|
||||
// Here we add the event listener for receiving messages
|
||||
navigator.serviceWorker.addEventListener('message', function (e) {
|
||||
var data = e.data;
|
||||
if (data && data.state === "READY") {
|
||||
$container.append('<hr>sw.js ready');
|
||||
postMessage(["Hello worker"]);
|
||||
return;
|
||||
}
|
||||
$container.append('<br>');
|
||||
$container.append(e.data);
|
||||
});
|
||||
postMessage("INIT");
|
||||
}).catch(function(error) {
|
||||
console.log('Registration failed with ' + error);
|
||||
$container.append('Registration error: ' + error);
|
||||
});
|
||||
} else {
|
||||
console.log('NO SERVICE WORKER');
|
||||
}
|
||||
|
||||
$container.append('<hr>inner.js ready');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,64 @@
|
|||
var id = Math.floor(Math.random()*100000);
|
||||
|
||||
var postMsg = function (client, data) {
|
||||
client.postMessage(data);
|
||||
};
|
||||
|
||||
var broadcast = function (data, excludes) {
|
||||
// Loop over all available clients
|
||||
clients.matchAll().then(function (clients) {
|
||||
clients.forEach(function (client) {
|
||||
if (excludes.indexOf(client.id) === -1) {
|
||||
postMsg(client, data);
|
||||
}
|
||||
})
|
||||
})
|
||||
};
|
||||
var sendTo = function (data, clientId){
|
||||
clients.matchAll().then(function (clients) {
|
||||
clients.some(function (client) {
|
||||
if (client.id === clientId) {
|
||||
postMsg(client, data)
|
||||
}
|
||||
})
|
||||
})
|
||||
};
|
||||
var getClients = function () {
|
||||
clients.matchAll().then(function (clients) {
|
||||
var cl = clients.map(function (c) {
|
||||
console.log(JSON.stringify(c));
|
||||
return c.id;
|
||||
});
|
||||
console.log(cl);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
|
||||
self.addEventListener('message', function (e) {
|
||||
console.log(clients);
|
||||
console.log('worker received');
|
||||
console.log(e.data);
|
||||
console.log(e.source);
|
||||
var cId = e.source.id;
|
||||
if (e.data === "INIT") {
|
||||
broadcast(cId + ' has joined!', [cId]);
|
||||
postMsg(e.source, {state: 'READY'});
|
||||
postMsg(e.source, "Welcome to SW " + id + "!");
|
||||
postMsg(e.source, "You are identified as " + cId);
|
||||
} else {
|
||||
console.log(e.data);
|
||||
postMsg(e.source, 'Yo (Re: '+e.data+')');
|
||||
}
|
||||
});
|
||||
self.addEventListener('install', function (e) {
|
||||
console.log(e);
|
||||
console.log('V1 installing…');
|
||||
self.skipWaiting();
|
||||
});
|
||||
|
||||
self.addEventListener('activate', function (e) {
|
||||
console.log(e);
|
||||
console.log('V1 now ready to handle fetches!');
|
||||
});
|
||||
|
||||
|
|
@ -0,0 +1 @@
|
|||
worker/
|
||||
Loading…
Reference in New Issue