mystiq/hydrogen-web
Archived
4
1
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity

add offline availability with service worker and appcache

Browse source
This commit is contained in:
Bruno Windels 2019-09-15 14:32:12 +02:00
parent 8616d79aad
commit d8696bea1d
4 changed files with 132 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 40 KiB

35
index.html
View file

@ -4,12 +4,45 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta name="application-name" content="Brawl Chat"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Brawl Chat">
<meta name="description" content="A matrix chat application">
<link rel="stylesheet" type="text/css" href="src/ui/web/css/main.css">
</head>
<body>
<script type="module">
<script id="phone-debug-pre" type="disabled">
window.DEBUG = true;
window.debugConsoleBuffer = "";
console.error = (...params) => {
const lastLines = "...\n" + window.debugConsoleBuffer.split("\n").slice(-10).join("\n");
// window.debugConsoleBuffer = window.debugConsoleBuffer + "ERR " + params.join(" ") + "\n";
// const location = new Error().stack.split("\n")[2];
alert(params.join(" ") +"\n...\n" + lastLines);
};
console.log = console.info = console.warn = (...params) => {
window.debugConsoleBuffer = window.debugConsoleBuffer + params.join(" ") + "\n";
};
</script>
<script id="main" type="module">
import main from "./src/main.js";
main(document.body);
</script>
<script id="phone-debug-post" type="disabled">
setTimeout(() => {
const showlogs = document.getElementById("showlogs");
showlogs.addEventListener("click", () => {
const lastLines = "...\n" + window.debugConsoleBuffer.split("\n").slice(-20).join("\n");
alert(lastLines);
}, true);
showlogs.innerText = "Show last 20 log lines";
}, 5000);
</script>
<script id="service-worker" type="disabled">
if('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js')
.then(function() { console.log("Service Worker registered"); });
}
</script>
</body>
</html>

105
scripts/build.mjs
View file

@ -14,30 +14,7 @@ const __dirname = dirname(__filename);
const projectDir = path.join(__dirname, "../");
const targetDir = path.join(projectDir, "target");
const jsPostfix = `
window.DEBUG = true;
let buf = "";
console.error = (...params) => {
const lastLines = "...\\n" + buf.split("\\n").slice(-10).join("\\n");
// buf = buf + "ERR " + params.join(" ") + "\\n";
// const location = new Error().stack.split("\\n")[2];
alert(params.join(" ") +"\\n...\\n" + lastLines);
};
console.log = console.info = console.warn = (...params) => {
buf = buf + params.join(" ") + "\\n";
};
`;
const jsSuffix = `
setTimeout(() => {
const showlogs = document.getElementById("showlogs");
showlogs.addEventListener("click", () => {
const lastLines = "...\\n" + buf.split("\\n").slice(-20).join("\\n");
alert(lastLines);
}, true);
showlogs.innerText = "Show last 20 log lines";
}, 10000);
`;
const debug = true;
async function build() {
// get version number
@ -45,15 +22,32 @@ async function build() {
// clear target dir
await removeDirIfExists(targetDir);
await fs.mkdir(targetDir);
await buildHtml();
await buildJs();
await buildCss();
await buildOffline(version);
console.log(`built brawl ${version} successfully`);
}
async function buildHtml() {
// transform html file
const devHtml = await fs.readFile(path.join(projectDir, "index.html"), "utf8");
const doc = cheerio.load(devHtml);
doc("link[rel=stylesheet]").attr("href", "brawl.css");
// doc("html").attr("manifest", "manifest.appcache");
doc("script").replaceWith(
doc("script#main").replaceWith(
`<script type="text/javascript" src="brawl.js"></script>` +
`<script type="text/javascript">${jsPostfix} main(document.body); ${jsSuffix}</script>`);
`<script type="text/javascript">main(document.body);</script>`);
removeOrEnableScript(doc("script#phone-debug-pre"), debug);
removeOrEnableScript(doc("script#phone-debug-post"), debug);
removeOrEnableScript(doc("script#service-worker"), false);
doc("html").attr("manifest", "manifest.appcache");
doc("head").append(`<link rel="manifest" href="manifest.json">`);
await fs.writeFile(path.join(targetDir, "index.html"), doc.html(), "utf8");
}
async function buildJs() {
// create js bundle
const rollupConfig = {
input: 'src/main.js',
@ -65,23 +59,58 @@ async function build() {
};
const bundle = await rollup.rollup(rollupConfig);
await bundle.write(rollupConfig);
}
async function buildOffline(version) {
// write offline availability
const offlineFiles = ["brawl.js", "brawl.css", "index.html", "icon-192.png"];
// write appcache manifest
const manifestLines = [
`CACHE MANIFEST`,
`# v${version}`,
`NETWORK`,
`"*"`,
`CACHE`,
];
manifestLines.push(...offlineFiles);
const manifest = manifestLines.join("\n") + "\n";
await fs.writeFile(path.join(targetDir, "manifest.appcache"), manifest, "utf8");
// write service worker
let swSource = await fs.readFile(path.join(projectDir, "src/service-worker.template.js"), "utf8");
swSource = swSource.replace(`"%%VERSION%%"`, `"${version}"`);
swSource = swSource.replace(`"%%FILES%%"`, JSON.stringify(offlineFiles));
await fs.writeFile(path.join(targetDir, "sw.js"), swSource, "utf8");
// write web manifest
const webManifest = {
name: "Brawl Chat",
short_name: "Brawl",
display: "standalone",
start_url: "index.html",
icons: [{"src": "icon-192.png", "sizes": "192x192", "type": "image/png"}],
};
await fs.writeFile(path.join(targetDir, "manifest.json"), JSON.stringify(webManifest), "utf8");
// copy icon
let icon = await fs.readFile(path.join(projectDir, "icon.png"));
await fs.writeFile(path.join(targetDir, "icon-192.png"), icon);
}
async function buildCss() {
// create css bundle
const cssMainFile = path.join(projectDir, "src/ui/web/css/main.css");
const preCss = await fs.readFile(cssMainFile, "utf8");
const cssBundler = postcss([postcssImport]);
const postCss = await cssBundler.process(preCss, {from: cssMainFile});
await fs.writeFile(path.join(targetDir, "brawl.css"), postCss, "utf8");
// write appcache manifest
const manifestLines = [
`CACHE MANIFEST`,
`# v${version}`,
"brawl.js",
"brawl.css",
"index.html",
""
];
await fs.writeFile(path.join(targetDir, "manifest.appcache"), manifestLines.join("\n"), "utf8");
console.log(`built brawl ${version} successfully`);
}
function removeOrEnableScript(scriptNode, enable) {
if (enable) {
scriptNode.attr("type", "text/javascript");
} else {
scriptNode.remove();
}
}
async function removeDirIfExists(targetDir) {

31
src/service-worker.template.js Normal file
View file

@ -0,0 +1,31 @@
const VERSION = "%%VERSION%%";
const FILES = "%%FILES%%";
const cacheName = `brawl-${VERSION}`;
self.addEventListener('install', function(e) {
e.waitUntil(
caches.open(cacheName).then(function(cache) {
return cache.addAll(FILES);
})
);
});
self.addEventListener('activate', (event) => {
event.waitUntil(
caches.keys().then((keyList) => {
return Promise.all(keyList.map((key) => {
if (key !== cacheName) {
return caches.delete(key);
}
}));
})
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.open(cacheName)
.then(cache => cache.match(event.request))
.then((response) => response || fetch(event.request))
);
});