Merge pull request #96 from tridecco/feature/95-enhance-offline-experience-with-fallback-page-and-service-worker-pre-caching

Author: tedhyu

README.md

@@ -56,7 +56,7 @@ Tridecco Game Client is a frontend application designed to support Tridecco game
    DEV_SERVER_PROXY_TARGET=http://localhost:5000 # Development server proxy target (default: http://localhost:5000)
    ```
 
-   > **Note**: The `BUILD_MODE` variable is used to determine the build mode. It can be `web` or `local`. When set to `web`, the client will load static assets from the CDN. When set to `local`, the client will load static assets from the local server. The `local` build mode is used for native builds (e.g. Electron, Capacitor, etc.).
+   > **Note**: The `BUILD_MODE` variable is used to determine the build mode. It can be `web` or `local`. When set to `web`, the client will load static assets from the CDN. When set to `local`, the client will load static assets from the local server, and Service Workers will be disabled. The `local` build mode is used for native builds (e.g. Electron, Capacitor, etc.).
 
 4. Build the client:
 

src/partials/head.ejs

@@ -2,5 +2,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="icon" type="image/x-icon" href="/favicon.ico">
 <link rel="stylesheet" href="<%= env.CDN_URL %>/css/styles.css">
+<% if (env.BUILD_MODE !== 'local') { %>
 <%- include('./service-worker.ejs') %>
+<% } %>
 <script src="<%= env.CDN_URL %>/js/app.js"></script>

src/scripts/app.js

@@ -443,7 +443,7 @@ class Location {
    * @returns {boolean} - True if the route is public, false otherwise.
    */
   isPublicRoute(route) {
-    return ['/', '/more', '/404', '/403', '/leaderboards'].includes(route);
+    return ['/', '/more', '/404', '/403', '/leaderboards', '/offline'].includes(route);
   }
 
   /**

src/scripts/service-worker.js

@@ -6,12 +6,149 @@
 const DYNAMIC_CACHE = 'dynamic';
 const STATIC_CACHE = 'static';
 
+const PRECACHE_ASSETS = [
+  '/',
+  '/offline',
+  '/login',
+  '/logout',
+  '/register',
+  '/password-reset',
+  '/user',
+  '/user/edit',
+  '/user/account',
+  '/user/settings',
+  '/user/security',
+  '/more',
+
+  '/favicon.ico',
+  '/css/styles.css',
+  '/js/app.js',
+  '/js/auth.js',
+  '/js/user.js',
+  '/img/default-avatar.svg',
+
+  '/img/backgrounds/tridecco.jpg',
+  '/img/backgrounds/wooden-board.jpg',
+  '/img/backgrounds/broken-glass.jpg',
+  '/img/backgrounds/composite-board.jpg',
+  '/img/backgrounds/frosted-glass.jpg',
+  '/img/backgrounds/galaxy.jpg',
+  '/img/backgrounds/gold-leaf.jpg',
+  '/img/backgrounds/leather.jpg',
+  '/img/backgrounds/log.jpg',
+  '/img/backgrounds/marble.jpg',
+  '/img/backgrounds/metal-plate.jpg',
+  '/img/backgrounds/sand.jpg',
+  '/img/ranks/bg/iron.png',
+  '/img/ranks/bg/bronze.png',
+  '/img/ranks/bg/silver.png',
+  '/img/ranks/bg/gold.png',
+  '/img/ranks/bg/platinum.png',
+  '/img/ranks/bg/diamond.png',
+  '/img/ranks/bg/tridecco.png',
+  '/img/ranks/nobg/iron.png',
+  '/img/ranks/nobg/bronze.png',
+  '/img/ranks/nobg/silver.png',
+  '/img/ranks/nobg/gold.png',
+  '/img/ranks/nobg/platinum.png',
+  '/img/ranks/nobg/diamond.png',
+  '/img/ranks/nobg/tridecco.png',
+
+  '/libs/tridecco-board/0.4.2/tridecco-board.min.js',
+  '/libs/tridecco-board/0.4.2/assets/grids/black.png',
+  '/libs/tridecco-board/0.4.2/assets/grids/blue.png',
+  '/libs/tridecco-board/0.4.2/assets/grids/cyan.png',
+  '/libs/tridecco-board/0.4.2/assets/grids/green.png',
+  '/libs/tridecco-board/0.4.2/assets/grids/magenta.png',
+  '/libs/tridecco-board/0.4.2/assets/grids/red.png',
+  '/libs/tridecco-board/0.4.2/assets/grids/white.png',
+  '/libs/tridecco-board/0.4.2/assets/grids/yellow.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/normal/index.json',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/normal/hexagons/blue.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/normal/hexagons/red.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/normal/hexagons/white.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/normal/hexagons/yellow.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/normal/tiles/empty-flipped.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/normal/tiles/empty.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/normal/tiles/blue-white-flipped.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/normal/tiles/blue-white.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/normal/tiles/red-blue-flipped.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/normal/tiles/red-blue.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/normal/tiles/red-yellow-flipped.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/normal/tiles/red-yellow.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/normal/tiles/white-red-flipped.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/normal/tiles/white-red.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/normal/tiles/yellow-blue-flipped.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/normal/tiles/yellow-blue.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/rgbblind/index.json',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/rgbblind/hexagons/blue.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/rgbblind/hexagons/red.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/rgbblind/hexagons/white.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/rgbblind/hexagons/yellow.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/rgbblind/tiles/empty-flipped.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/rgbblind/tiles/empty.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/rgbblind/tiles/blue-white-flipped.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/rgbblind/tiles/blue-white.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/rgbblind/tiles/red-blue-flipped.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/rgbblind/tiles/red-blue.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/rgbblind/tiles/red-yellow-flipped.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/rgbblind/tiles/red-yellow.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/rgbblind/tiles/white-red-flipped.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/rgbblind/tiles/white-red.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/rgbblind/tiles/yellow-blue-flipped.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/rgbblind/tiles/yellow-blue.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/monochrome/index.json',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/monochrome/hexagons/blue.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/monochrome/hexagons/red.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/monochrome/hexagons/white.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/monochrome/hexagons/yellow.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/monochrome/tiles/empty-flipped.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/monochrome/tiles/empty.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/monochrome/tiles/blue-white-flipped.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/monochrome/tiles/blue-white.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/monochrome/tiles/red-blue-flipped.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/monochrome/tiles/red-blue.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/monochrome/tiles/red-yellow-flipped.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/monochrome/tiles/red-yellow.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/monochrome/tiles/white-red-flipped.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/monochrome/tiles/white-red.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/monochrome/tiles/yellow-blue-flipped.png',
+  '/libs/tridecco-board/0.4.2/assets/textures/classic/monochrome/tiles/yellow-blue.png',
+  '/libs/tridecco-board/0.4.2/assets/backgrounds/wooden-board.jpg',
+  '/libs/tridecco-board/0.4.2/assets/backgrounds/broken-glass.jpg',
+  '/libs/tridecco-board/0.4.2/assets/backgrounds/composite-board.jpg',
+  '/libs/tridecco-board/0.4.2/assets/backgrounds/frosted-glass.jpg',
+  '/libs/tridecco-board/0.4.2/assets/backgrounds/galaxy.jpg',
+  '/libs/tridecco-board/0.4.2/assets/backgrounds/gold-leaf.jpg',
+  '/libs/tridecco-board/0.4.2/assets/backgrounds/leather.jpg',
+  '/libs/tridecco-board/0.4.2/assets/backgrounds/log.jpg',
+  '/libs/tridecco-board/0.4.2/assets/backgrounds/marble.jpg',
+  '/libs/tridecco-board/0.4.2/assets/backgrounds/metal-plate.jpg',
+  '/libs/tridecco-board/0.4.2/assets/backgrounds/sand.jpg',
+];
+
 self.addEventListener('install', (event) => {
-  event.waitUntil(self.skipWaiting());
+  event.waitUntil(
+    caches
+      .open(STATIC_CACHE)
+      .then((cache) => cache.addAll(PRECACHE_ASSETS))
+      .then(() => self.skipWaiting()),
+  );
 });
 
 self.addEventListener('activate', (event) => {
-  event.waitUntil(clients.claim());
+  event.waitUntil(
+    caches
+      .keys()
+      .then((keys) =>
+        Promise.all(
+          keys
+            .filter((key) => key !== STATIC_CACHE && key !== DYNAMIC_CACHE)
+            .map((key) => caches.delete(key)),
+        ),
+      )
+      .then(() => self.clients.claim()),
+  );
 });
 
 self.addEventListener('fetch', (event) => {
@@ -41,6 +178,24 @@ self.addEventListener('fetch', (event) => {
     return;
   }
 
+  if (req.mode === 'navigate') {
+    event.respondWith(
+      fetch(req)
+        .then((networkRes) => {
+          return caches.open(DYNAMIC_CACHE).then((cache) => {
+            cache.put(req, networkRes.clone());
+            return networkRes;
+          });
+        })
+        .catch(() =>
+          caches
+            .match(req)
+            .then((cachedRes) => cachedRes || caches.match('/offline')),
+        ),
+    );
+    return;
+  }
+
   event.respondWith(
     fetch(req)
       .then((networkRes) => {

src/views/offline/index.ejs

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <%- include("../../partials/head.ejs") %>
+  <title>Tridecco | Offline</title>
+</head>
+
+<body class="h-screen overflow-hidden" style="background: url('<%= env.CDN_URL %>/img/backgrounds/wooden-board.jpg') center center / cover no-repeat;">
+  <!-- Main Layout Container -->
+  <div class="fixed inset-0 flex flex-col h-screen text-gray-800 z-20">
+
+    <!-- Centered Content Container -->
+    <main class="flex flex-1 flex-col items-center justify-center p-4">
+
+      <div class="bg-white/80 backdrop-blur-sm rounded-xl shadow-xl border border-amber-700/30 px-8 py-10 max-w-md w-full flex flex-col items-center">
+        <!-- Icon -->
+        <svg class="w-16 h-16 mb-4 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+        </svg>
+
+        <!-- Title -->
+        <h1 class="text-2xl font-bold text-amber-900 mb-2 text-center">You Are Offline</h1>
+
+        <!-- Description -->
+        <p class="text-gray-700 mb-6 text-center">
+          It looks like you have lost your internet connection.<br>
+          Please check your network and try again.
+        </p>
+
+        <!-- Return Home Button -->
+        <a href="/" class="bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-2 px-6 rounded-md focus:outline-none focus:shadow-outline transition duration-200 text-sm">
+          Return to Home
+        </a>
+      </div>
+
+    </main>
+
+    <!-- Footer -->
+    <footer class="h-8 bg-black/30 backdrop-blur-sm border-t border-amber-700/50 z-10 flex items-center justify-between px-4 text-xs text-gray-400 flex-shrink-0">
+      <script>
+        document.write('<div>Tridecco © ' + new Date().getFullYear() + '</div>');
+      </script>
+    </footer>
+
+  </div>
+</body>
+
+</html>