-
Notifications
You must be signed in to change notification settings - Fork 8
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Could a service worker help offline usage? It worked! See this GIF demo #13
Comments
So the code to add is given below. |
// Chargement et events
window.addEventListener("load", function () {
new Resizer(document.querySelector('[name=resizerH1]'), 'V');
document.getElementById('box_1').style.fontSize = "1.2em";
document.getElementById('box_2').style.fontSize = "1.2em";
/* beginning of new stuff to have service workers! */
if('serviceWorker' in navigator){
try {
navigator.serviceWorker.register('serviceWorker.js');
console.log("Service Worker Registered");
} catch (error) {
console.log("Service Worker Registration Failed");
}
}
/* end of new stuff to have service workers! */
}, false); |
/*
Service worker for BetterOCaml offline use
- References: https://levelup.gitconnected.com/build-a-pwa-using-only-vanilla-javascript-bdf1eee6f37a
*/
console.log("Starting serviceWorker.js");
const staticAssets = [
// './',
'./manifest.json',
'./index.html',
'./favicon.ico',
'./cache.appcache',
// './css/',
'./css/bootstrap.css',
'./css/icon.css',
'./css/index.css',
'./css/codemirror/codemirror.min.css',
'./css/codemirror/dialog.css',
'./css/iconfont/MaterialIcons-Regular.eot',
'./css/iconfont/MaterialIcons-Regular.ttf',
'./css/iconfont/MaterialIcons-Regular.woff',
'./css/iconfont/MaterialIcons-Regular.woff2',
'./css/materialize/materialize.min.css',
'./css/theme/material.css',
'./css/theme/mdn-like.css',
'./css/theme/monokai.css',
// './icon/',
'./icon/apple-touch-icon.png',
'./icon/android-chrome-192x192.png',
'./icon/android-chrome-512x512.png',
'./icon/favicon-16x16.png',
'./icon/favicon-32x32.png',
// './screenshots/',
'./screenshots/screenshot1.png',
// './js/',
'./js/buttons.js',
// './js/serviceWorker.js',
'./js/editor_change.js',
'./js/jquery.min.js',
'./js/materialize.min.js',
'./js/resizer.js',
'./js/toplevel-4.08.js',
'./js/codemirror/closebrackets.js',
'./js/codemirror/codemirror.min.js',
'./js/codemirror/dialog.js',
'./js/codemirror/jump-to-line.js',
'./js/codemirror/matchbrackets.min.js',
'./js/codemirror/mllike.min.js',
'./js/codemirror/search.js',
'./js/codemirror/searchcursor.js',
'./js/codemirror/show-hint.js',
'./js/codemirror/sublime.min.js',
'./js/old/autocomplete.js',
'./js/old/utility.js'
];
self.addEventListener('install', async event => {
const cache = await caches.open('static-cache');
cache.addAll(staticAssets);
});
self.addEventListener('fetch', event => {
const req = event.request;
const url = new URL(req.url);
if (url.origin === location.url) {
event.respondWith(cacheFirst(req));
} else {
event.respondWith(networkFirst(req));
}
});
async function cacheFirst(req) {
const cachedResponse = caches.match(req);
return cachedResponse || fetch(req);
}
async function networkFirst(req) {
const cache = await caches.open('dynamic-cache');
try {
const res = await fetch(req);
cache.put(req, res.clone());
return res;
} catch (error) {
return await cache.match(req);
}
}
console.log("Finished serviceWorker.js"); This worked by add the file at the ROOT (and not |
See this GIF, showing that I can toggle the "offline" mode from inside Chromium dev tools, reload the app with cltr+r and it still loads with no error! (not force reload, shift+ctr+r, which erases the cache). |
So I think this will be enough to make the app
That's all I dreamed of last weekend, hooray! |
It works on my mobile phone too! |
Apparently the theme is not perfectly loaded for the editor part (only) if choosing another theme than the default one. |
The editing and usage of the app is quite different from @RomainVernoux's https://play.google.com/store/apps/details?id=fr.vernoux.ocaml (10 year old but still great!), but it's a good complement to have. |
I used this example and it worked!
The text was updated successfully, but these errors were encountered: