Im afraid im going to have to go either or… Its ALOT of work to maintain the toolkit. I dont think im up for maintaining BOTH types… Besides my new Toolkit… I know ALOT more and its designed WAY better… Faster, Cleaner, FAR LESS code to maintain and for others to maintain their OWN toolkit they may have tailored for a certain project… EVERYTHING that is not the actual GLTF export is a TEMPLATE and can be easily tweaked to fit whatever type of project you have… and i have BUILT-IN PWA that auto creates your worker.js with ALL the files from your project built-in… all the required icons and images and HTML tags need to properly invoke PWA services in the browser. Just by Checking Progressive Web App In the Toolkit Exporter Option:
And that generates full PWA export:
And most importantly auto create worker.js with all the installFiles and Required Service Worker Function:
var versionStamp = '9c90ccb0-6de8-464f-bf86-b019897e23d3';
var installFiles = ['./', './index.html', './game.html', './project.js', './toaster.css', './favicon.ico', './manifest.json', './scripts/babylon.ammo.js', './scripts/babylon.gltf.js', './scripts/babylon.gui.js', './scripts/babylon.inspector.js', './scripts/babylon.js', './scripts/babylon.manager.js', './scripts/babylon.materials.js', './scripts/babylon.navmesh.js', './scripts/fastclick.js', './scripts/meter.js', './scripts/pep.js', './scripts/toaster.js', './scenes/BabylonCanvasTools.js', './scenes/SampleScene.bin', './scenes/SampleScene.gltf', './scenes/assets/Canyon_env.dds', './scenes/assets/Canyon_nx.jpg', './scenes/assets/Canyon_ny.jpg', './scenes/assets/Canyon_nz.jpg', './scenes/assets/Canyon_px.jpg', './scenes/assets/Canyon_py.jpg', './scenes/assets/Canyon_pz.jpg', './scenes/assets/SampleScene_Lightmap-0_comp_light.png', './scenes/assets/SampleScene_Lightmap-1_comp_light.png', './scenes/assets/babylon/images/Amiga.jpg', './scenes/assets/models/remy/textures/Remy_Body_Diffuse.jpg', './scenes/assets/models/remy/textures/Remy_Body_Normal.png', './scenes/assets/models/remy/textures/Remy_Bottom_Diffuse.jpg', './scenes/assets/models/remy/textures/Remy_Bottom_Normal.png', './scenes/assets/models/remy/textures/Remy_Hair_Diffuse.jpg', './scenes/assets/models/remy/textures/Remy_Hair_Normal.png', './scenes/assets/models/remy/textures/Remy_Shoes_Diffuse.jpg', './scenes/assets/models/remy/textures/Remy_Shoes_Normal.png', './scenes/assets/models/remy/textures/Remy_Top_Diffuse.jpg', './scenes/assets/models/remy/textures/Remy_Top_Normal.png'];
// ..
// Post Service Worker Version Message
// ..
self.addEventListener('message', function(evt) {
if (evt.data != null && evt.data === 'version' && evt.ports != null && evt.ports.length > 0) {
var port = evt.ports[0];
if (port && port.postMessage) {
// console.log('WORKER: Version check: ' + versionStamp);
port.postMessage(versionStamp);
}
}
});
// ..
// Install Service Worker File System
// ..
self.addEventListener('install', function(evt) {
evt.waitUntil(
caches.open(versionStamp).then(function(cache) {
// console.log('WORKER: Fetching cache: ' + versionStamp);
var cachePromises = installFiles.map(function(urlToPrefetch) {
var url = new URL(urlToPrefetch, location.href);
url.search += (url.search ? '&' : '?') + 'time=' + new Date().getTime().toString();
var request = new Request(url, { mode: 'no-cors' });
return fetch(request, { cache: 'no-store' }).then(function(response) {
if (response.status >= 400) throw new Error('request for ' + urlToPrefetch + ' failed with status ' + response.statusText);
return cache.put(urlToPrefetch, response);
}).catch(function(error) {
// console.warn('WORKER: Not caching ' + urlToPrefetch + ' due to ' + error);
});
});
return Promise.all(cachePromises).then(function() {
// console.log('WORKER: Cache updated: ' + versionStamp);
return self.skipWaiting();
});
}).catch(function(error) {
// console.warn('WORKER: Pre-Fetching Failed: ', error);
})
);
});
// ..
// Activate Service Worker File System
// ..
self.addEventListener('activate', function(evt) {
evt.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(cache) {
if (cache !== versionStamp) {
// console.log('WORKER: Cleaning cache: ' + cache);
return caches.delete(cache);
}
})
);
})
);
// console.log('WORKER: Activate cache: ' + versionStamp);
return self.clients.claim();
});
// ..
// Fetch Service Worker Request Files
// ..
self.addEventListener('fetch', function(evt) {
// Chrome Dev Tools Bug - Temporary Workaround
// https://bugs.chromium.org/p/chromium/issues/detail?id=823392
if (evt.request.cache === 'only-if-cached' && evt.request.mode !== 'same-origin') {
var oStrangeRequest = evt.request.clone();
console.warn('Chrome Dev Tools. Request cache has only-if-cached, but not same-origin.', oStrangeRequest.cache, oStrangeRequest.mode, 'request redirect:', oStrangeRequest.redirect, oStrangeRequest.url, oStrangeRequest);
return;
}
evt.respondWith(
caches.match(evt.request).then(function(response) {
return response || fetch(evt.request, { cache: 'no-store' });
})
);
});
manifest.json
{
"name": "Babylon Canvas Tools",
"short_name": "Babylon Canv",
"theme_color": "#3B789A",
"background_color": "#3B789A",
"orientation": "any",
"display": "browser",
"start_url": ".",
"icons": [
{
"src": "icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
Plus Toaster Popup to notify when server files change and auto update the cache… Its Beautiful
So im putting all my efforts in the new toolkit