You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I have been working on PWA support for NiceGUI and found #246 which is already closed. So, let me share my achievements in addition to that old thread also here.
Disclaimer: I am not a professional programmer and have only minor knowledge in JavaScript. If anybody has come up with a better solution or can improve my approach, I would be happy to see that :)
You can achieve the "pwa" look with that neat install button by providing a manifest file and a service_worker.js. If a user visits your page, he will see a notification to install the app. And of cause you can use the APIs from the browser (like notifications) to make your app look even more native.
However, this will not lead to a pure offline experience, because the backend needs to be there. But, it leads to a nice setup for new users and a better experience with a startup logo and full-screen instead of browser tab.
You need these four ingredients:
A manifest.json file
A service_worker.js file
One static binding for each of these files in your application
Add them to your page in the head-html section
This is manifest.json. Please replace the values in capital to your liking
This is an optimized service-worker who caches static files (e.g. media), but does nothing on web-socket-connections:
constCACHE_NAME='APP_NAME-vYOUR_VERSION_NUMER';constCACHE_URLS=['/media/'];// WebSocket connections to be excluded from the fetch handlerconstWEBSOCKET_URLS=['wss://','ws://'];self.addEventListener('install',(event)=>{event.waitUntil(caches.open(CACHE_NAME).then((cache)=>{returnPromise.all(CACHE_URLS.map(url=>{returncache.add(url).catch(error=>{console.error('Failed to cache:',url,error);});}));}));});self.addEventListener('fetch',(event)=>{// Check if the request is for a WebSocketif(WEBSOCKET_URLS.some(wsUrl=>event.request.url.startsWith(wsUrl))){// Don't interfere with WebSocket connectionsreturn;}event.respondWith(caches.match(event.request).then((response)=>{returnresponse||fetch(event.request);}));});self.addEventListener('activate',(event)=>{constcacheWhitelist=[CACHE_NAME];event.waitUntil(caches.keys().then((cacheNames)=>{returnPromise.all(cacheNames.map((cacheName)=>{if(cacheWhitelist.indexOf(cacheName)===-1){returncaches.delete(cacheName);}}));}));});// Handle WebSocket keep-aliveself.addEventListener('message',(event)=>{if(event.data==='keepalive'){// Respond to keep-alive messagesevent.ports[0].postMessage('alive');}});
You need to bind these to files with the app.add_static_file command and then the following in your page where it should appear:
ui.add_head_html('<link rel="manifest" href="/manifest.json">')
ui.add_head_html('<script>if("serviceWorker" in navigator) { navigator.serviceWorker.register("/service_worker.js"); };</script>')
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Hi guys,
I have been working on PWA support for NiceGUI and found #246 which is already closed. So, let me share my achievements in addition to that old thread also here.
Disclaimer: I am not a professional programmer and have only minor knowledge in JavaScript. If anybody has come up with a better solution or can improve my approach, I would be happy to see that :)
You can achieve the "pwa" look with that neat install button by providing a manifest file and a service_worker.js. If a user visits your page, he will see a notification to install the app. And of cause you can use the APIs from the browser (like notifications) to make your app look even more native.
However, this will not lead to a pure offline experience, because the backend needs to be there. But, it leads to a nice setup for new users and a better experience with a startup logo and full-screen instead of browser tab.
You need these four ingredients:
This is manifest.json. Please replace the values in capital to your liking
This is an optimized service-worker who caches static files (e.g. media), but does nothing on web-socket-connections:
You need to bind these to files with the
app.add_static_file
command and then the following in your page where it should appear:BR/Peter
Beta Was this translation helpful? Give feedback.
All reactions