Added support for PWA logic

madblog/app.py

@@ -19,6 +19,7 @@ class BlogApp(Flask):
         self.pages_dir = os.path.join(config.content_dir, 'markdown')
         self.img_dir = config.default_img_dir
         self.css_dir = config.default_css_dir
+        self.js_dir = config.default_js_dir
         self.fonts_dir = config.default_fonts_dir
 
         if not os.path.isdir(self.pages_dir):
@@ -36,6 +37,10 @@ class BlogApp(Flask):
         if os.path.isdir(css_dir):
             self.css_dir = os.path.abspath(css_dir)
 
+        js_dir = os.path.join(config.content_dir, 'js')
+        if os.path.isdir(js_dir):
+            self.js_dir = os.path.abspath(js_dir)
+
         fonts_dir = os.path.join(config.content_dir, 'fonts')
         if os.path.isdir(fonts_dir):
             self.fonts_dir = os.path.abspath(fonts_dir)

madblog/config.py

@@ -20,6 +20,7 @@ class Config:
     templates_dir = os.path.join(basedir, 'templates')
     static_dir = os.path.join(basedir, 'static')
     default_css_dir = os.path.join(static_dir, 'css')
+    default_js_dir = os.path.join(static_dir, 'js')
     default_fonts_dir = os.path.join(static_dir, 'fonts')
     default_img_dir = os.path.join(static_dir, 'img')
 

madblog/routes.py

@@ -33,6 +33,21 @@ def favicon_route():
     return img_route('favicon.ico')
 
 
+@app.route('/js/<file>', methods=['GET'])
+def js_route(file: str):
+    return send_from_directory(app.js_dir, file, config.default_js_dir)
+
+
+@app.route('/pwabuilder-sw.js', methods=['GET'])
+def pwa_builder_route():
+    return send_from_directory(app.js_dir, 'pwabuilder-sw.js', config.default_js_dir)
+
+
+@app.route('/pwabuilder-sw-register.js', methods=['GET'])
+def pwa_builder_register_route():
+    return send_from_directory(app.js_dir, 'pwabuilder-sw-register.js', config.default_js_dir)
+
+
 @app.route('/css/<style>', methods=['GET'])
 def css_route(style: str):
     return send_from_directory(app.css_dir, style, config.default_css_dir)

madblog/static/js/pwabuilder-sw-register.js

@@ -0,0 +1,15 @@
+// This is the "Background Sync" service worker
+
+// Add this below content to your HTML page inside a <script type="module"></script> tag, or add the js file to your page at the very top to register service worker
+// If you get an error about not being able to import, double check that you have type="module" on your <script /> tag
+
+/*
+ This code uses the pwa-update web component https://github.com/pwa-builder/pwa-update to register your service worker,
+ tell the user when there is an update available and let the user know when your PWA is ready to use offline.
+*/
+
+import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';
+
+const el = document.createElement('pwa-update');
+document.body.appendChild(el);
+

madblog/static/js/pwabuilder-sw.js

@@ -0,0 +1,27 @@
+// This is the "Offline copy of assets" service worker
+
+const CACHE = "pwabuilder-offline";
+const QUEUE_NAME = "bgSyncQueue";
+
+importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
+
+self.addEventListener("message", (event) => {
+  if (event.data && event.data.type === "SKIP_WAITING") {
+    self.skipWaiting();
+  }
+});
+
+const bgSyncPlugin = new workbox.backgroundSync.BackgroundSyncPlugin(QUEUE_NAME, {
+  maxRetentionTime: 24 * 60 // Retry for max of 24 Hours (specified in minutes)
+});
+
+workbox.routing.registerRoute(
+  new RegExp('/*'),
+  new workbox.strategies.StaleWhileRevalidate({
+    cacheName: CACHE,
+    plugins: [
+      bgSyncPlugin
+    ]
+  })
+);
+

madblog/templates/common-head.html

@@ -7,6 +7,8 @@
     <link rel="stylesheet" href="/fonts/poppins.css">
     <link rel="stylesheet" href="/fonts/fira-sans.css">
     <link rel="stylesheet" href="/css/common.css">
+    <link rel="manifest" href="/manifest.json">
+    <script type="module" src="/pwabuilder-sw-register.js"></script>
 
     {% if styles %}
         {% for style in styles %}