Add manifest json for PWA installation

.github/workflows/badge-wall.yml

@@ -4,7 +4,7 @@ permissions:
   contents: read
 
 on:
-  pull_request:
+  push:
     branches: [main]
   schedule:
     - cron: '0 0 * * 1'  # Weekly on Monday
@@ -45,6 +45,14 @@ jobs:
       env:
         TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
+    - name: Copy PWA files
+      run: |
+        cp manifest.json docs/manifest.json
+        cp wall/badge_generator/templates/service-worker.js docs/service-worker.js
+        mkdir -p docs/assets
+        cp assets/icon-192x192.png docs/assets/
+        cp assets/icon-512x512.png docs/assets/
+
     - name: Deploy to GitHub Pages
       uses: JamesIves/github-pages-deploy-action@v4
       with:

README.md

@@ -45,3 +45,13 @@ gh workflow run "Deploy to GitHub Pages"
 2. Create a feature branch
 3. Make your changes
 4. Submit a pull request
+
+## Installing the PWA on Your Phone
+
+1. Open the GitHub Workflow Status Wall in your mobile browser.
+2. Tap the browser menu (usually three dots or lines in the upper right corner).
+3. Select "Add to Home screen" or "Install app".
+4. Follow the prompts to add the app to your home screen.
+5. The app will now be available on your home screen for quick access.
+
+Icons from: <a href="https://www.flaticon.com/free-icons/brick" title="brick icons">Brick icons created by max.icons - Flaticon</a>

manifest.json

@@ -0,0 +1,20 @@
+{
+  "name": "GitHub Workflow Status Wall",
+  "short_name": "Badge Wall",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#f6f8fa",
+  "theme_color": "#24292e",
+  "icons": [
+    {
+      "src": "assets/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "wall"
-version = "0.1.0"
+version = "0.2.0"
 description = "GitHub Workflow Status Wall"
 requires-python = ">=3.8"
 dependencies = [

wall/badge_generator/templates/base.html

@@ -7,6 +7,18 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
     <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23218bff' d='M8 0a8 8 0 100 16A8 8 0 008 0zm3.5 8.5l-5 3a.5.5 0 01-.75-.4v-6a.5.5 0 01.75-.4l5 3a.5.5 0 010 .8z'/></svg>">
+    <link rel="manifest" href="/manifest.json">
+    <script>
+        if ('serviceWorker' in navigator) {{
+            window.addEventListener('load', function() {{
+                navigator.serviceWorker.register('/service-worker.js').then(function(registration) {{
+                    console.log('ServiceWorker registration successful with scope: ', registration.scope);
+                }}, function(err) {{
+                    console.log('ServiceWorker registration failed: ', err);
+                }});
+            }});
+        }}
+    </script>
     <title>GitHub Workflow Status Wall</title>
     <style>
 {styles}

wall/badge_generator/templates/service-worker.js

@@ -0,0 +1,45 @@
+const CACHE_NAME = 'badge-wall-cache-v1';
+const urlsToCache = [
+  '/',
+  '/index.html',
+  '/styles.css',
+  '/manifest.json',
+  'assets/icon-192x192.png',
+  'assets/icon-512x512.png'
+];
+
+self.addEventListener('install', event => {
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then(cache => {
+        return cache.addAll(urlsToCache);
+      })
+  );
+});
+
+self.addEventListener('fetch', event => {
+  event.respondWith(
+    caches.match(event.request)
+      .then(response => {
+        if (response) {
+          return response;
+        }
+        return fetch(event.request);
+      })
+  );
+});
+
+self.addEventListener('activate', event => {
+  const cacheWhitelist = [CACHE_NAME];
+  event.waitUntil(
+    caches.keys().then(cacheNames => {
+      return Promise.all(
+        cacheNames.map(cacheName => {
+          if (cacheWhitelist.indexOf(cacheName) === -1) {
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+  );
+});