30. April 2024

So erstellst du eine Offline-WebApp (PWA)

Um aus einer Website eine WebApp zu generieren, die auch offline funktioniert, sind 3 Dateien essentiell: „index.html“, „manifest.json“ und der Service-Worker „serviceworker.js“. (Die Dateinamen sind frei wählbar.)

In den jeweiligen Files wird folgender Code benötigt:

Im HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-title" content="vCard">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

<link rel="apple-touch-icon" href="assets/img/icon.png">

<link rel="manifest" href="manifest.json">

<script>
if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
    navigator.serviceWorker.register('serviceworker.js')
        .then(registration => {
        console.log('Service Worker registered:', registration);
        })
        .catch(error => {
        console.error('Service Worker registration failed:', error);
        });
    });
}
</script>Code-Sprache: HTML, XML (xml)

manifest.json

{
    "name": "vCard",
    "short_name": "vCard",
    "description": "vCard",
    "start_url": "index.html",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#f5f5f2"
}Code-Sprache: JSON / JSON mit Kommentaren (json)

serviceworker.js

const cacheName = 'offline-app-cache-v1';
const filesToCache = [
    "index.html",
    "assets/img/logo.svg",
    "assets/css/styles.css",
    "assets/fonts/inter-v13-latin-regular.woff2",
    "assets/fonts/inter-v13-latin-700.woff2"
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(cacheName)
      .then(cache => {
        return cache.addAll(filesToCache);
      })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        return response || fetch(event.request);
      })
  );
});Code-Sprache: PHP (php)

Um auf die WebApp hinzuweisen, kann folgenden Script ebenfalls hilfreich sein:
add-to-homescreen.js

CSS für iPhone-Notch

Damit die App auch auf iPhones mit Notch im Fullscreen richtig dargestellt wird, ist dieses CSS-Snippet erforderlich:

html{
    min-height: calc(100% + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
}Code-Sprache: CSS (css)