Web-App als App auf dem Handy

Von /
transform web app to mobile app

Eine Web-App die sonst nur über einen Browser zugänglich ist, kann ebenfalls auf dem Handy verwendet werden. Der einfachste Weg um das zu erreichen, ist von Anfang an auf responsives Design zu achten und die App über einen Browser (z.B. Safari) am Handy zu öffnen.

Es gibt aber auch die Möglichkeit eine bestehende Web-App in eine mobile App zu transformieren, ohne auf Frontend Seite alles neu entwickeln zu müssen.

Angular SPA in eine PWA umwandeln

Durch die Transformation in eine progressive Web-App (PWA) erhält die Web-App Funktionen die für mobile Anwendungen wichtig sind:

  • Offline Nutzung
  • Push-Benachrichtigungen
  • Schnelle Ladezeiten

Sie bleibt dabei im Wesentlichen eine Web-App die im Hintergrund im Browser ausgeführt wird. Die PWA kann jedoch auf dem Startbildschirm eines Gerätes gespeichert werden und der Eindruck einer ganz normalen App vermittelt werden.

Schritt für Schritt Anleitung

Um eine Single-Page Anwendungen (SPA), die mit Angular entwickelt wurde, in eine Progressive Web App (PWA) zu transformieren, wird der Angular Service Worker benötigt.

Folgende Schritte sind dazu notwendig:

1. Angular PWA Modul installieren

ng add @angular/pwa

Dieser Befehl fügt der Anwendung notwendige PWA Module wie den Service Worker hinzu.

2. Service Worker aktivieren

Der Service Worker ist das Kernstück der PWA. Der ng add @angular/pwa Befehl hat bereits eine Konfiguration für den Service Worker hinzugefügt, aber es muss sichergestellt werden, dass er aktiviert ist.

Hierzu muss der build-Konfigurationsabschnitt der angular.json Datei wie folgt angepasst werden:

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    "serviceWorker": true,
    "ngswConfigPath": "ngsw-config.json"
  }
}

3. Manifest Datei anpassen

In der manifest.webmanifest Datei befinden sich Basisdaten der App, wie der Name, Beschreibung, Icon, etc. Dort wird ebenso festgelegt, dass die App wie eine mobile App aussieht und nicht wie eine Webseite.
Diese können unter src/manifest.webmanifest angepasst werden.

{
  "name": "Meine Angular PWA",
  "short_name": "AngularPWA",
  "description": "Eine tolle Progressive Web App mit Angular",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#3f51b5",
  "icons": [
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

4. Die App bauen und bereitstellen

Um die App auf dem Handy testen zu können muss sie als PWA gebaut werden. Hierzu muss im Terminal der folgende Befehlt ausgeführt werden:

ng build --prod

Anschließend kann im Browser getestet werden ob die Service Worker registriert wurden und die App offlinefähig ist.
Dazu führen wir sie lokal mit einem http-server aus:

npx http-server -p 8080 -c-1

Danach kann in in den Entwicklertools des Browsers im Tab Anwendung überprüft werden, ob der Service Worker vorhanden ist und die App offline funktioniert.

Als letzten Schritt muss die Anwendung nur noch auf einem Webserver (z.B. Firebase) unter einem HTTPS Endpoint bereitgestellt werden.

5. Die App auf dem Handy installieren

Hierzu wird über den Browser des Handys die bereitgestellte URL aufgerufen und nach Aufforderung „Zum Home Billdschirm hinzufügen“ als App auf dem Handy hinzugefügt.

Bei IOS muss hierzu zunächst auf das Teilen-Symbol (Quardrat mit Pfeil nach oben) geklickt werden.



Nach oben scrollen