Was ist eine Progressive Web App?

Eine Progressive Web App (PWA) ist eine Website, die wie eine App auf dem Gerät des Nutzers installiert werden kann. Das hat den Vorteil, dass diese auch ohne Internet nutzbar ist und dass der Anwender das Gefühl einer normalen App hat.

Ich habe eine MSA-Rechner Webseite mit Vue.js und dem Vite PWA Plugin erstellt und diese so angepasst, dass diese Funktionalitäten einer Progressive Web App hat. Beim Aufruf der Webseite des Rechners, kann diese als App installiert werden. Hier das Ergebnis auf einem iPad:

Die MSA-Rechner Webseite wurde als PWA auf einem iPad „installiert“.

Jede bereits bestehende Webseite kann so angepasst werden, dass sie zu einer Progressive Web App wird und auf den Geräten der Nutzer installiert werden kann. Dafür benötigt diese ein paar Voraussetzungen:

PWA minimale Voraussetzungen

Damit eine Webseite zu einer Progressive Web App wird, müssen ein paar grundlegende Einstellungen vorgenommen werden.

Entry Point festlegen.
Web App Manifest erstellen.
Icons / Images erstellen.

1) Entry Point (index.html) festlegen

In der index.html Datei muss der Head folgendermaßen aussehen:

<head>
  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>MSA Rechner</title>
  <meta name="description" content="Einfacher Rechner für den mittleren Schulabschluss an der Mittelschule.">
  <!-- folgender Code wurde durch den Faficon Generator automatisch erzeugt. -->
  <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="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
  <meta name="msapplication-TileColor" content="#2d89ef">
  <meta name="theme-color" content="#ffffff">

</head>

2) Web App Manifest

Das Web App Manifest ist eine JSON Datei mit Informationen zur PWA, die das System des Nutzers ausliest, um die App richtig zu installieren und die Icons zuzuweisen.

Die Web App Manifest passen wir in der „vite.config.js“ Datei an:

import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { VitePWA } from "vite-plugin-pwa";

export default defineConfig({
  base: "",
  plugins: [
    vue(),
    VitePWA({
      registerType: "autoUpdate",
      workbox: {
        globPatterns: ["**/*.{js,css,html,ico,png,svg}"],
      },
      devOptions: {
        enabled: true,
      },
      //manifest minimal requirements
      includeAssets: ["favicon.ico", "apple-touch-icon.png", "masked-icon.svg"],
      manifest: {
        name: "MSA Rechner",
        short_name: "MSARechner",
        description: "Einfacher Rechner für den mittleren Schulabschluss an der Mittelschule.",
        theme_color: "#ffffff",
        icons: [
          {
            src: "android-chrome-192x192.png",
            sizes: "192x192",
            type: "image/png",
          },
          {
            src: "android-chrome-512x512.png",
            sizes: "512x512",
            type: "image/png",
          },
        ],
      },
      //manifest minimal -> end
    }),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

3) Icons / Images erstellen

Damit die PWA auf den Endgeräten installiert werden kann, benötigen wir verschiedene Icons und Bilder, die dann das App-Bild auf Smartphones oder auf Desktops werden.

Am einfachsten bekommt man die benötigten Bilder in den richtigen Größen mit Hilfe eines Favicon Generators. Für den MSA-Rechner habe ich ein 512×512 Großes Bild erstellt und das mit Hilfe des Generators in die benötigten Icons umgewandelt.

Die Icons habe ich in den „public“ Ordner meiner Webseite eingefügt:

App installieren

Nachdem die drei Schritte durchgeführt wurden und du den Server startest, sieht man auf Desktop-Browser oben rechts ein „App installieren“ Symbol:

Nach der Installation ist die „App“ auf dem Dekstop des Computers. Bei Smartphones oder Tablets kann die App in den Einstellungen der Browser installiert werden. Um dem Nutzer zu helfen, kann man ein Modal mit der Information dem Nutzer bereitstellen. Zum Beispiel so:

PWA minimale Voraussetzungen

1) Entry Point (index.html) festlegen

2) Web App Manifest

3) Icons / Images erstellen

App installieren

Links

unsere-schule.org

Was ist eine Progressive Web App?

Code: