PWA

Incorporate go-shiori#325 changes, copy assets to static res dir, add json mime type for manifest.json
pythoninthegrass · Jul 11, 2023 · 277d2c8 · 277d2c8
1 parent e02d3e7
commit 277d2c8
Show file tree

Hide file tree

Showing 11 changed files with 219 additions and 2 deletions.
diff --git a/internal/view/content.html b/internal/view/content.html
@@ -8,6 +8,8 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <link rel="manifest" type="application/json" href="res/manifest.json">
+
 	<link rel="apple-touch-icon-precomposed" sizes="152x152" href="res/apple-touch-icon-152x152.png">
 	<link rel="apple-touch-icon-precomposed" sizes="144x144" href="res/apple-touch-icon-144x144.png">
 	<link rel="icon" type="image/png" href="res/favicon-32x32.png" sizes="32x32">
@@ -88,6 +90,14 @@
 			}
 		});
 	</script>
+  <!-- Register the service worker -->
+  <script type="module">
+    if ('serviceWorker' in navigator) {
+      window.addEventListener('load', function() {
+        navigator.serviceWorker.register('js/service-worker.js');
+      });
+    }
+  </script>
 </body>
 
 </html>
diff --git a/internal/view/index.html b/internal/view/index.html
@@ -8,6 +8,8 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <link rel="manifest" type="application/json" href="res/manifest.json">
+
 	<link rel="apple-touch-icon-precomposed" sizes="152x152" href="res/apple-touch-icon-152x152.png">
 	<link rel="apple-touch-icon-precomposed" sizes="144x144" href="res/apple-touch-icon-144x144.png">
 	<link rel="icon" type="image/png" href="res/favicon-32x32.png" sizes="32x32">
@@ -21,7 +23,7 @@
 	<link href="css/bookmark-item.css" rel="stylesheet">
 
 	<script src="js/vue.min.js"></script>
-	<script src="js/url.min.js"></script>
+  <script src="js/url.min.js"></script>
 </head>
 
 <body class="night">
@@ -171,6 +173,14 @@
 			}
 		})
 	</script>
+  <!-- Register the service worker -->
+  <script type="module">
+    if ('serviceWorker' in navigator) {
+      window.addEventListener('load', function() {
+        navigator.serviceWorker.register('js/service-worker.js');
+      });
+    }
+  </script>
 </body>
 
-</html>
+</html>
diff --git a/internal/view/js/service-worker.js b/internal/view/js/service-worker.js
@@ -0,0 +1,103 @@
+// SOURCE: @geekgonecrazy https://github.com/go-shiori/shiori/pull/325
+// This is the service worker with the Advanced caching
+
+importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
+
+const API_CACHE = "api";
+const BOOKMARK_CACHE = "bookmarks";
+const HTML_CACHE = "html";
+const JS_CACHE = "javascript";
+const STYLE_CACHE = "stylesheets";
+const IMAGE_CACHE = "images";
+const FONT_CACHE = "fonts";
+
+self.addEventListener("message", (event) => {
+  if (event.data && event.data.type === "SKIP_WAITING") {
+    self.skipWaiting();
+  }
+});
+
+workbox.routing.registerRoute(
+  ({ url, request, event }) => url.pathname === '/api/bookmarks',
+  new workbox.strategies.NetworkFirst({
+    cacheName: API_CACHE,
+    plugins: [
+      new workbox.expiration.ExpirationPlugin({
+        maxEntries: 50,
+      }),
+    ],
+  })
+);
+
+workbox.routing.registerRoute(
+  ({ url, event }) => event.request.destination === 'document' && url.pathname.startsWith('/bookmark'),
+  new workbox.strategies.NetworkFirst({
+    cacheName: BOOKMARK_CACHE,
+    plugins: [
+      new workbox.expiration.ExpirationPlugin({
+        maxEntries: 500,
+      }),
+    ],
+  })
+);
+
+workbox.routing.registerRoute(
+  ({ url, event }) => event.request.destination === 'document' && !url.pathname.startsWith('/bookmark'),
+  new workbox.strategies.NetworkFirst({
+    cacheName: HTML_CACHE,
+    plugins: [
+      new workbox.expiration.ExpirationPlugin({
+        maxEntries: 10,
+      }),
+    ],
+  })
+);
+
+
+workbox.routing.registerRoute(
+  ({ event }) => event.request.destination === 'script',
+  new workbox.strategies.StaleWhileRevalidate({
+    cacheName: JS_CACHE,
+    plugins: [
+      new workbox.expiration.ExpirationPlugin({
+        maxEntries: 15,
+      }),
+    ],
+  })
+);
+
+workbox.routing.registerRoute(
+  ({ event }) => event.request.destination === 'style',
+  new workbox.strategies.StaleWhileRevalidate({
+    cacheName: STYLE_CACHE,
+    plugins: [
+      new workbox.expiration.ExpirationPlugin({
+        maxEntries: 15,
+      }),
+    ],
+  })
+);
+
+workbox.routing.registerRoute(
+  ({ event }) => event.request.destination === 'image',
+  new workbox.strategies.StaleWhileRevalidate({
+    cacheName: IMAGE_CACHE,
+    plugins: [
+      new workbox.expiration.ExpirationPlugin({
+        maxEntries: 15,
+      }),
+    ],
+  })
+);
+
+workbox.routing.registerRoute(
+  ({ event }) => event.request.destination === 'font',
+  new workbox.strategies.StaleWhileRevalidate({
+    cacheName: FONT_CACHE,
+    plugins: [
+      new workbox.expiration.ExpirationPlugin({
+        maxEntries: 15,
+      }),
+    ],
+  })
+);
diff --git a/internal/view/login.html b/internal/view/login.html
@@ -8,6 +8,8 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <link rel="manifest" type="application/json" href="res/manifest.json">
+
 	<link rel="apple-touch-icon-precomposed" sizes="152x152" href="res/apple-touch-icon-152x152.png">
 	<link rel="apple-touch-icon-precomposed" sizes="144x144" href="res/apple-touch-icon-144x144.png">
 	<link rel="icon" type="image/png" href="res/favicon-32x32.png" sizes="32x32">
@@ -146,6 +148,14 @@
 			}
 		})
 	</script>
+  <!-- Register the service worker -->
+  <script type="module">
+    if ('serviceWorker' in navigator) {
+      window.addEventListener('load', function() {
+        navigator.serviceWorker.register('js/service-worker.js');
+      });
+    }
+  </script>
 </body>
 
 </html>
diff --git a/internal/view/res/09-mobile-login.png b/internal/view/res/09-mobile-login.png
diff --git a/internal/view/res/10-mobile-home.png b/internal/view/res/10-mobile-home.png
diff --git a/internal/view/res/11-mobile-home-list.png b/internal/view/res/11-mobile-home-list.png
diff --git a/internal/view/res/12-mobile-options.png b/internal/view/res/12-mobile-options.png
diff --git a/internal/view/res/icon.png b/internal/view/res/icon.png
diff --git a/internal/view/res/manifest.json b/internal/view/res/manifest.json
@@ -0,0 +1,83 @@
+{
+"name": "Shiori",
+"short_name": "Shiori",
+"start_url": "/",
+"display": "standalone",
+"description": "Shiori is a simple bookmarks manager written in the Go language. Intended as a simple clone of Pocket. You can use it as a command line application or as a web application. This application is distributed as a single binary, which means it can be installed and used easily.",
+"lang": "English",
+"dir": "auto",
+"theme_color": "#000000",
+"background_color": "#000000",
+"orientation": "any",
+"share_target": {
+  "action": "/share-target/",
+  "method": "GET",
+  "params": {
+    "title": "title",
+    "text": "text",
+    "url": "url"
+    }
+  },
+  "categories": [
+    "productivity"
+  ],
+  "icons": [
+    {
+      "src": "/res/apple-touch-icon-144x144.png",
+      "type": "image/png",
+      "sizes": "144x144"
+    },
+    {
+      "src": "/res/apple-touch-icon-152x152.png",
+      "type": "image/png",
+      "sizes": "152x152"
+    }
+  ],
+  "screenshots": [
+    {
+      "src": "/res/09-mobile-login.png",
+      "sizes": "1440×2960",
+      "type": "image/png"
+    },
+    {
+      "src": "/res/10-mobile-home.png",
+      "sizes": "1440×2960",
+      "type": "image/png"
+    },
+    {
+      "src": "/res/11-mobile-home-list.png",
+      "sizes": "1440×2960",
+      "type": "image/png"
+    },
+    {
+      "src": "/res/12-mobile-home-options.png",
+      "sizes": "1440×2960",
+      "type": "image/png"
+    }
+  ],
+  "related_applications": [
+    {
+      "platform": "itunes",
+      "url": "https://apps.apple.com/us/app/pocket-stay-informed/id309601447",
+      "id": "id309601447"
+    }
+  ],
+  "prefer_related_applications": false,
+  "shortcuts": [
+    {
+      "name": "Home",
+      "url": "https://shiori.io/#home",
+      "description": "Landing page"
+    },
+    {
+      "name": "Login",
+      "url": "https://shiori.io/login",
+      "description": "Login page"
+    },
+    {
+      "name": "Settings",
+      "url": "https://shiori.io/#setting",
+      "description": "Settings"
+    }
+  ]
+}
diff --git a/internal/webserver/utils.go b/internal/webserver/utils.go
@@ -23,6 +23,7 @@ var (
 		".html": "text/html; charset=utf-8",
 		".js":   "application/javascript",
 		".png":  "image/png",
+		".json": "application/json",
 	}
 )