Create a Progressive Web App for the website (#1248)

open /schedule on your phone and add website to home screen

![Untitled
design(1)](https://github.com/user-attachments/assets/69551380-083e-4441-aeea-d44134b182f3)

---------

Co-authored-by: hypha <[email protected]>
Co-authored-by: Mia Bajić <[email protected]>

Author: 3 people

astro.config.mjs

@@ -7,6 +7,7 @@ import rehypeSlug from "rehype-slug";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
 import metaTags from "astro-meta-tags";
 import deleteUnusedImages from "astro-delete-unused-images";
+import serviceWorker from "astrojs-service-worker";
 import { execSync } from "node:child_process";
 import svelte from "@astrojs/svelte";
 import compress from "astro-compress";
@@ -117,6 +118,9 @@ export default defineConfig({
     metaTags(),
     deleteUnusedImages(),
     svelte(),
+    serviceWorker({
+      workbox: { inlineWorkboxRuntime: true },
+    }),
     compress({
       HTML: false,
       CSS: false,
@@ -132,4 +136,8 @@ export default defineConfig({
     remotePatterns: [{ protocol: "https" }],
     domains: ["programme.europython.eu", "placehold.co"],
   },
+  prefetch: {
+    prefetchAll: true,
+    defaultStrategy: "load",
+  },
 });

package.json

@@ -27,6 +27,7 @@
     "astro-meta-tags": "^0.3.2",
     "astro-pagefind": "^1.8.3",
     "astro-preload": "^1.1.2",
+    "astrojs-service-worker": "^2.0.0",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",

pnpm-lock.yaml

@@ -0,0 +1,63 @@
+{
+  "name": "EuroPython 2025",
+  "short_name": "EP2025",
+  "display": "standalone",
+  "start_url": "./schedule/?utm_source=pwa",
+  "lang": "en",
+  "scope": ".",
+  "background_color": "#f5e5d6",
+  "theme_color": "#f5e5d6",
+  "icons": [
+    {
+      "src": "android-chrome-36x36.png",
+      "sizes": "36x36",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "maskable_icon.png",
+      "sizes": "650x650",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}

public/android-chrome-144x144.png

@@ -5,6 +5,7 @@ import HeaderLogo from "@components/header/header-logo.astro";
 import Search from "@components/Search.astro";
 
 import links from "@data/links.json";
+
 ---
 
 <section
@@ -47,6 +48,7 @@ import links from "@data/links.json";
 <Search />
 
 <script>
+document.addEventListener("DOMContentLoaded", () => {
   let prevScrollPos = window.pageYOffset;
   const navbar = document.getElementById("navbar") as HTMLElement;
 
@@ -69,4 +71,5 @@ import links from "@data/links.json";
       navbar.style.transform = "translateY(-100%)";
     }
   });
+});
 </script>

public/android-chrome-192x192.png

@@ -0,0 +1,54 @@
+---
+
+---
+<div id="install-pwa" class="hidden">
+  <p>Add website to home screen and get easy access to the schedule!</p>
+  <button id="install-btn" class="button-link font-bold text-lg px-4 py-4 rounded-lg inline-flex items-center justify-center leading-4 transition-colors duration-200 not-prose border text-white
+      bg-primary hover:bg-primary-hover border-transparent">Add to home screen</button>
+</div>
+
+<style>
+#install-pwa {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #4caf50;
+  color: white;
+  text-align: center;
+  padding: 1rem;
+  transition: all 0.3s ease;
+  z-index: 200;
+}
+
+#install-pwa.hidden {
+  transform: translateY(100%);
+  opacity: 0;
+}
+</style>
+
+<script>
+function showInstallPrompt() {
+  const installBanner = document.getElementById('install-pwa');
+  installBanner.classList.remove('hidden');
+}
+
+document.getElementById('install-btn').addEventListener('click', () => {
+  if (deferredPrompt) {
+    deferredPrompt.prompt();
+    deferredPrompt.userChoice.then((choiceResult: any) => {
+      console.log(choiceResult.outcome);
+      deferredPrompt = null;
+    });
+  }
+});
+
+let deferredPrompt: any;
+
+window.addEventListener('beforeinstallprompt', (e) => {
+  e.preventDefault();
+  deferredPrompt = e;
+
+  showInstallPrompt();
+});
+</script>

public/android-chrome-256x256.png

@@ -0,0 +1,51 @@
+---
+
+---
+
+<div id="offline-icon" class="offline-icon">
+  <i class="fas plug-circle-xmark"></i> Offline
+</div>
+<script is:inline>
+  document.addEventListener("DOMContentLoaded", () => {
+    const offlineIcon = document.getElementById("offline-icon");
+
+    function updateOnlineStatus() {
+      console.log("offline");
+      offlineIcon.classList.toggle("show", !navigator.onLine);
+    }
+
+    window.addEventListener("online", updateOnlineStatus);
+    window.addEventListener("offline", updateOnlineStatus);
+
+    updateOnlineStatus();
+  });
+</script>
+
+<style>
+  .offline-icon {
+    position: fixed;
+    bottom: 10px;
+    right: 10px;
+    z-index: 9999;
+    background: #ffe0e0;
+    color: #a00;
+    padding: 8px 12px;
+    border-radius: 8px;
+    border: 1px solid #a00;
+    font-family: sans-serif;
+    font-size: 14px;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
+  }
+
+  .offline-icon.show {
+    opacity: 1;
+    pointer-events: auto;
+  }
+</style>

public/android-chrome-36x36.png

@@ -4,6 +4,6 @@ interface Props {
 }
 ---
 
-<a href="/" class="block min-w-[44px] min-h-[44px]" aria-label="Go to homepage by clicking the logo">
+<a href="/" class="home-link block min-w-[44px] min-h-[44px]" aria-label="Go to homepage by clicking the logo">
   <img class="md:block block w-[44px] h-[44px]" src="/EuroPython2025_logo.png" alt="EuroPython logo" />
 </a>