1.1.4

assets/manifest.json

@@ -0,0 +1,22 @@
+{
+    "short_name": "LS Admin",
+    "name": "Let's Swing Admin",
+    "icons": [
+      {
+        "src": "/static/192.png",
+        "type": "image/png",
+        "sizes": "192x192"
+      },
+      {
+        "src": "/static/512.png",
+        "type": "image/png",
+        "sizes": "512x512"
+      }
+    ],
+    "start_url": "/",
+    "background_color": "#3367D6",
+    "display": "standalone",
+    "scope": "/",
+    "theme_color": "#3367D6"
+  }
+  

main.py

@@ -60,12 +60,15 @@ def manager_page(sede:int, livello:int) -> None:
    manage.main(db, sede, livello)
 
 # Routes
+app.add_static_files('/static', 'static')
+
 @ui.page('/', title="Let's Swing Admin", favicon="assets/favicon.ico")
 def index_page() -> None:
+    
     login_check()
     styling()
     index.main(db)
-
+    
 
 @ui.page('/user/{userid}', title="Let's Swing Admin", favicon="assets/favicon.ico")
 def user_page(userid: str) -> None:
@@ -113,6 +116,11 @@ def page_login() -> None:
         username = ui.input('Username').on('keydown.enter', try_login).classes('w-full')
         password = ui.input('Password', password=True, password_toggle_button=True).on('keydown.enter', try_login)
         ui.button('Log in', on_click=try_login)
+# PWA conversion
+@ui.page('/manifest.json')
+def manifest_json() -> None:
+
+    return FileResponse(path='assets/manifest.json', media_type='application/json', filename="manifest.json")
 
 
 # Run main loop

pages/index.py

@@ -29,4 +29,16 @@ def main(db: MontyClient):
                 ui.row().classes("grow")
 
     ## FRONTEND
+    
+    ui.add_body_html('''<script>if ('serviceWorker' in navigator) {
+  window.addEventListener('load', function() {
+    navigator.serviceWorker.register('/static/service-worker.js').then(function(registration) {
+      // Registration was successful
+      console.log('ServiceWorker registration successful with scope: ', registration.scope);
+    }, function(err) {
+      // registration failed :(
+      console.log('ServiceWorker registration failed: ', err);
+    });
+  });
+}</script>''')
     page(-1)

static/service-worker.js

@@ -0,0 +1,109 @@
+// Set a name for the current cache
+var cacheName = 'v1'; 
+
+// Default files to always cache
+var cacheFiles = [
+        '/',
+        '/_nicegui/1.3.13/static/nicegui.css',
+        '/_nicegui/1.3.13/static/fonts.css',
+        '/_nicegui/1.3.13/static/quasar.prod.css',
+        '/_nicegui/1.3.13/static/es-module-shims.js',
+        '/_nicegui/1.3.13/static/socket.io.min.js',
+        '/_nicegui/1.3.13/static/tailwindcss.min.js',
+        '/_nicegui/1.3.13/static/vue.global.prod.js',
+        '/_nicegui/1.3.13/static/quasar.umd.prod.js',
+        '/_nicegui/1.3.13/static/lang/en-US.umd.prod.js'
+]
+
+
+self.addEventListener('install', function(e) {
+    console.log('[ServiceWorker] Installed');
+
+    // e.waitUntil Delays the event until the Promise is resolved
+    e.waitUntil(
+
+        // Open the cache
+        caches.open(cacheName).then(function(cache) {
+
+            // Add all the default files to the cache
+            console.log('[ServiceWorker] Caching cacheFiles');
+            return cache.addAll(cacheFiles);
+        })
+    ); // end e.waitUntil
+});
+
+
+self.addEventListener('activate', function(e) {
+    console.log('[ServiceWorker] Activated');
+
+    e.waitUntil(
+
+        // Get all the cache keys (cacheName)
+        caches.keys().then(function(cacheNames) {
+            return Promise.all(cacheNames.map(function(thisCacheName) {
+
+                // If a cached item is saved under a previous cacheName
+                if (thisCacheName !== cacheName) {
+
+                    // Delete that cached file
+                    console.log('[ServiceWorker] Removing Cached Files from Cache - ', thisCacheName);
+                    return caches.delete(thisCacheName);
+                }
+            }));
+        })
+    ); // end e.waitUntil
+
+});
+
+
+self.addEventListener('fetch', function(e) {
+    console.log('[ServiceWorker] Fetch', e.request.url);
+
+    // e.respondWith Responds to the fetch event
+    e.respondWith(
+
+        // Check in cache for the request being made
+        caches.match(e.request)
+
+            .then(function(response) {
+
+                // If the request is in the cache
+                if ( response ) {
+                    console.log("[ServiceWorker] Found in Cache", e.request.url, response);
+                    // Return the cached version
+                    return response;
+                }
+
+                // If the request is NOT in the cache, fetch and cache
+
+                var requestClone = e.request.clone();
+                
+                fetch(requestClone)
+                    .then(function(response) {
+
+                        if ( !response ) {
+                            console.log("[ServiceWorker] No response from fetch ")
+                            return response;
+                        }
+
+                        var responseClone = response.clone();
+
+                        //  Open the cache
+                        caches.open(cacheName).then(function(cache) {
+
+                            // Put the fetched response in the cache
+                            cache.put(e.request, responseClone);
+                            console.log('[ServiceWorker] New Data Cached', e.request.url);
+
+                            // Return the response
+                            return response;
+            
+                        }); // end caches.open
+
+                    })
+                    .catch(function(err) {
+                        console.log('[ServiceWorker] Error Fetching & Caching New Data', err);
+                    });
+            }) // end caches.match(e.request)
+    ); // end e.respondWith
+});