Support Shinobi as a progressive web app / webapk
Chrome on Android supports "WebAPKs" which give a very native-app feel to web apps. Since the core of Shinobi is already fairly mobile friendly, there isn't a ton of work that needs to be done to support webapks.
- Add a web manifest. This worked for me:
{
"serviceworker": {
"src": "/service-worker.js",
"scope": "/"
},
"short_name": "Shinobi",
"name": "Shinobi",
"icons": [
{
"src":"/libs/img/icon/favicon-196x196.png",
"sizes": "196x196",
"type": "image/png"
}
],
"start_url": "/",
"background_color": "#000",
"theme_color": "#536878",
"display": "standalone"
}
- Add a service worker that implements (at minimum) fetch. I created
service-worker.js
with this content:
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
// Cache hit - return response
if (response) {
return response;
}
return fetch(event.request);
}
)
);
});
The main thing this does is enable offline serving of the web app. While that's not all that important (shinobi isn't super useful offline...), it's required.
service-worker.js has to be served from the root path (ie, http://shinobi/service-worker.js). I haven't ever created a web app in Node so I had no idea how to make it serve properly.
-
Add
<link rel="manifest" href="/libs/static/manifest.json">
to header. The manifest.json needs to be served from whatever path you put (I created a new static/ subfolder in libs). -
Load the service worker by adding this to the index page
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(function(reg){
console.log("Service worker successfully registered.");
}).catch(function(err) {
console.log("Service worker registration failure: ", err)
});
}
</script>
After that, when you launch Shinobi it'll ask you if you want to install it onto your home screen.