feat: add progressive web app (PWA) support with service worker and manifest (steam-bell-92#1717)

Author: nishtha-agarwal-211

web-app/index.html

@@ -29,6 +29,7 @@
   <meta content="Interactive games, math visualizations, and utilities in the browser." name="twitter:description" />
   <title>Python Mini Projects — Interactive Web Edition</title>
   <link href="assets/favicon.svg" rel="icon" type="image/svg+xml" />
+  <link rel="manifest" href="manifest.json" />
   <link href="css/styles.css" rel="stylesheet" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
     integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
@@ -1733,6 +1734,15 @@ <h3 id="confirmModalTitle">Confirm</h3>
     </div>
   </div>
 
+  <script>
+    if ('serviceWorker' in navigator) {
+      window.addEventListener('load', () => {
+        navigator.serviceWorker.register('./service-worker.js')
+          .then((reg) => console.log('Service Worker registered:', reg.scope))
+          .catch((err) => console.error('Service Worker registration failed:', err));
+      });
+    }
+  </script>
 </body>
 
 </html>

web-app/manifest.json

@@ -0,0 +1,18 @@
+{
+  "name": "Python Mini Projects",
+  "short_name": "PythonProjects",
+  "description": "Play beginner-friendly Python mini projects in your browser offline.",
+  "start_url": "./index.html",
+  "display": "standalone",
+  "background_color": "#0c0f1a",
+  "theme_color": "#0c0f1a",
+  "orientation": "any",
+  "icons": [
+    {
+      "src": "assets/favicon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any maskable"
+    }
+  ]
+}

web-app/service-worker.js

@@ -0,0 +1,114 @@
+const CACHE_NAME = 'python-mini-projects-v1';
+
+const PRECACHE_ASSETS = [
+  './',
+  './index.html',
+  './games.html',
+  './math.html',
+  './utilities.html',
+  './faq.html',
+  './privacy-policy.html',
+  './terms-condition.html',
+  './404.html',
+  './manifest.json',
+  './css/styles.css',
+  './assets/favicon.svg',
+  './assets/games-bg.webp',
+  './assets/math-bg.webp',
+  './assets/utilities-bg.webp',
+  './js/main.js',
+  './js/projects.js',
+  './js/playground.js',
+  './js/playground-worker.js',
+  './js/cm-editor.js',
+  './js/audio.js',
+  './js/audioManager.js',
+  './projects_registry.json'
+];
+
+const PYODIDE_CDN_PREFIX = 'https://cdn.jsdelivr.net/pyodide/v0.26.2/full/';
+const PYODIDE_ASSETS = [
+  PYODIDE_CDN_PREFIX + 'pyodide.js',
+  PYODIDE_CDN_PREFIX + 'pyodide.asm.js',
+  PYODIDE_CDN_PREFIX + 'pyodide.asm.wasm',
+  PYODIDE_CDN_PREFIX + 'python_stdlib.zip',
+  PYODIDE_CDN_PREFIX + 'pyodide-lock.json'
+];
+
+// Install Event - Pre-cache core app shell & Pyodide assets
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then(async (cache) => {
+      await cache.addAll(PRECACHE_ASSETS);
+      try {
+        await cache.addAll(PYODIDE_ASSETS);
+      } catch (err) {
+        console.warn('Pyodide caching skipped or partial during SW install:', err);
+      }
+    }).then(() => self.skipWaiting())
+  );
+});
+
+// Activate Event - Clean up old caches
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((cacheNames) => {
+      return Promise.all(
+        cacheNames
+          .filter((name) => name !== CACHE_NAME)
+          .map((name) => caches.delete(name))
+      );
+    }).then(() => self.clients.claim())
+  );
+});
+
+// Fetch Event - Serve from Cache, fallback to Network (and cache dynamically)
+self.addEventListener('fetch', (event) => {
+  if (event.request.method !== 'GET') return;
+
+  const url = new URL(event.request.url);
+
+  // Network-first strategy for navigation requests (HTML pages)
+  if (event.request.mode === 'navigate') {
+    event.respondWith(
+      fetch(event.request)
+        .then((networkResponse) => {
+          if (networkResponse && networkResponse.status === 200) {
+            const responseClone = networkResponse.clone();
+            caches.open(CACHE_NAME).then((cache) => cache.put(event.request, responseClone));
+          }
+          return networkResponse;
+        })
+        .catch(() => {
+          return caches.match(event.request).then((cachedResponse) => {
+            return cachedResponse || caches.match('./index.html');
+          });
+        })
+    );
+    return;
+  }
+
+  // Cache-first strategy for static resources & Pyodide CDN assets
+  event.respondWith(
+    caches.match(event.request).then((cachedResponse) => {
+      if (cachedResponse) {
+        return cachedResponse;
+      }
+      return fetch(event.request).then((networkResponse) => {
+        if (
+          networkResponse &&
+          networkResponse.status === 200 &&
+          (url.origin === self.location.origin ||
+           url.hostname === 'cdn.jsdelivr.net' ||
+           url.hostname === 'cdnjs.cloudflare.com' ||
+           url.hostname === 'fonts.googleapis.com' ||
+           url.hostname === 'fonts.gstatic.com')
+        ) {
+          const responseClone = networkResponse.clone();
+          caches.open(CACHE_NAME).then((cache) => cache.put(event.request, responseClone));
+        }
+        return networkResponse;
+      });
+    })
+  );
+});

web-app/tests-e2e/pwa.spec.js

@@ -0,0 +1,23 @@
+const { test, expect } = require('@playwright/test');
+
+test.describe('PWA Capability and Offline Support', () => {
+  test('should reference manifest.json and register service worker', async ({ page }) => {
+    await page.goto('/');
+
+    // Check manifest link exists in head
+    const manifestLink = page.locator('link[rel="manifest"]');
+    await expect(manifestLink).toHaveAttribute('href', 'manifest.json');
+
+    // Fetch manifest file to verify its structure
+    const response = await page.goto('/manifest.json');
+    expect(response.status()).toBe(200);
+    const manifest = await response.json();
+    expect(manifest.name).toBe('Python Mini Projects');
+    expect(manifest.start_url).toBe('./index.html');
+    expect(manifest.display).toBe('standalone');
+
+    // Fetch service-worker.js to verify it exists
+    const swResponse = await page.goto('/service-worker.js');
+    expect(swResponse.status()).toBe(200);
+  });
+});