Make the app available offline

index.html

@@ -6,7 +6,6 @@
 		<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
 		<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
 		<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-		<link rel="manifest" href="/site.webmanifest">
 		<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
 		<meta name="msapplication-TileColor" content="#da532c">
 		<meta name="theme-color" content="#0b0b0b">

package.json

@@ -28,7 +28,8 @@
 		"typescript": "^5.2.2",
 		"uikit": "^3.19.1",
 		"vidstack": "^1.10.9",
-		"vite": "^5.1.4"
+		"vite": "^5.1.4",
+		"vite-plugin-pwa": "^0.19.8"
 	},
 	"type": "module"
 }

src/App.svelte

@@ -11,6 +11,7 @@
 
     let header;
     let roomId: string;
+    let isOnline: boolean;
 
     const testPrefix = 'test_';
     const syncHashAndRoomId = function () {
@@ -26,7 +27,7 @@
     syncHashAndRoomId();
 </script>
 
-<svelte:window on:hashchange={syncHashAndRoomId}></svelte:window>
+<svelte:window on:hashchange={syncHashAndRoomId} bind:online={isOnline}></svelte:window>
 
 <Analytics/>
 
@@ -36,8 +37,12 @@
     </span>
 {/if}
 
-<h1 bind:this={header} class="header">
-    🎬 Watch Together
+<h1 bind:this={header} class="header" class:offline={!isOnline}>
+    {#if isOnline}
+        🎬 Watch Together
+    {:else}
+        { $_('noInternet')}
+    {/if}
 </h1>
 
 <div class="uk-section-secondary window-height uk-flex uk-flex-column">
@@ -79,6 +84,11 @@
         border-bottom: 1px solid rgb(255 255 255 / .1);
         background-color: rgba(1, 1, 1, 0.9);
         z-index: 2;
+        transition: background-color 500ms ease-in-out;
+    }
+    
+    .offline {
+        background-color: red;
     }
 
     .uk-section-secondary {

src/components/index.svelte

@@ -27,14 +27,14 @@
         }
     };
 
-        const init = async function (roomId: string): Promise<Room> {
+    const init = async function (roomId: string): Promise<Room> {
         await initTime();
         await destroy();
         previousRoom = new Room(roomId);
         await previousRoom.init();
         return previousRoom;
     };
-    </script>
+</script>
 
 <div class="uk-flex-1 uk-flex uk-flex-center uk-flex-middle uk-flex-column">
     {#await init(roomId)}

src/i18n/_.ts

@@ -55,6 +55,7 @@ const def = {
         description: 'Error occurred',
         reload: 'Reload the app',
     },
+    noInternet: 'No internet connection',
 };
 
 export type TranslatedText = typeof def;

src/i18n/fr.ts

@@ -57,6 +57,7 @@ const fr: TranslatedText = {
         description: 'Une erreur s\'est produite',
         reload: 'Recharger l\'application',
     },
+    noInternet: 'Pas de connexion internet',
 };
 
 export default fr;

src/i18n/ru.ts

@@ -57,6 +57,7 @@ const ru: TranslatedText = {
         description: 'Произошла ошибка',
         reload: 'Перезапустить приложение',
     },
+    noInternet: 'Нет интернет соединения',
 };
 
 export default ru;

src/main.ts

@@ -1,32 +1,34 @@
 import * as Sentry from '@sentry/svelte';
+import { registerSW } from "virtual:pwa-register";
 import { initI18n } from './i18n';
 import Root from './App.svelte';
 import { environment, sentry, url } from './settings';
 
+registerSW({ immediate: true });
 
 if (sentry.dsn) {
-  Sentry.init({
-    dsn: sentry.dsn,
-    integrations: [
-      Sentry.browserTracingIntegration(),
-      Sentry.replayIntegration({
-        maskAllText: false,
-        blockAllMedia: false,
-      }),
-    ],
-    environment,
-    // Performance Monitoring
-    tracesSampleRate: 1.0, //  Capture 100% of the transactions
-    // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
-    tracePropagationTargets: ['localhost', url],
-    // Session Replay
-    replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
-    replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
-  });
+    Sentry.init({
+        dsn: sentry.dsn,
+        integrations: [
+            Sentry.browserTracingIntegration(),
+            Sentry.replayIntegration({
+              maskAllText: false,
+              blockAllMedia: false,
+            }),
+      ],
+      environment,
+      // Performance Monitoring
+      tracesSampleRate: 1.0, //  Capture 100% of the transactions
+      // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
+      tracePropagationTargets: ['localhost', url],
+      // Session Replay
+      replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
+      replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
+    });
 }
 
 initI18n();
 
 export default new Root({
-  target: document.getElementById('app'),
+    target: document.getElementById('app'),
 });

src/stores/room.ts

@@ -7,7 +7,6 @@ import { BoundTimedStore } from './bound-timed-store';
 import { UsersBoundStore } from './bound-users';
 import { BoundMinutesWatched } from './bound-minutes-watched';
 import normalizeLink, { type Link } from '../normalize-link';
-import { myNameStore } from './my-name';
 import { now } from './clock';
 import { Destructable } from '../destructable';
 import { firebaseConfig } from '../settings';

tsconfig.node.json

@@ -4,7 +4,10 @@
     "skipLibCheck": true,
     "module": "ESNext",
     "moduleResolution": "bundler",
-    "strict": true
+    "strict": true,
+    "types": [
+      "vite-plugin-pwa/client"
+    ]
   },
   "include": ["vite.config.ts"]
 }

vite.config.ts

@@ -1,7 +1,60 @@
-import { defineConfig } from 'vite'
-import { svelte } from '@sveltejs/vite-plugin-svelte'
+import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import { VitePWA } from 'vite-plugin-pwa';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [svelte()],
+    plugins: [
+        svelte(),
+        VitePWA({
+            includeAssets: [
+                "static/**",
+            ],
+            manifest: {
+                "name": "Watch Together",
+                "short_name": "WatchTogether",
+                "icons": [
+                    {
+                        "src": "/android-chrome-192x192.png",
+                        "sizes": "192x192",
+                        "type": "image/png"
+                    },
+                    {
+                        "src": "/android-chrome-512x512.png",
+                        "sizes": "512x512",
+                        "type": "image/png"
+                    }
+                ],
+                "theme_color": "#000000",
+                "background_color": "#000000",
+                "display": "standalone",
+                "start_url":"/",
+                "screenshots": [
+                    {
+                        "src": "screenshots/1.jpeg",
+                        "sizes": "853x1788",
+                        "type": "image/jpeg",
+                        "form_factor": "narrow"
+                    },
+                    {
+                        "src": "screenshots/2.jpeg",
+                        "sizes": "2564x1646",
+                        "type": "image/jpeg",
+                        "form_factor": "wide"
+                    },
+                    {
+                        "src": "screenshots/3.jpeg",
+                        "sizes": "2564x1646",
+                        "type": "image/jpeg",
+                        "form_factor": "wide"
+                    }
+                ],
+                "handle_links": "preferred",
+                "categories": [
+                    "entertainment",
+                    "utilities"
+                ]
+            }
+        })
+    ],
 })