Auf Englisch lesen

Freigeben über


Erste Schritte bei der Entwicklung einer PWA- oder Hybrid-Web-App für Android

Dieser Leitfaden hilft Ihnen bei den ersten Schritten beim Erstellen einer hybriden Web-App oder progressive Web App (PWA) unter Windows mithilfe einer einzelnen HTML/CSS/JavaScript-Codebasis, die im Web und auf allen Geräteplattformen (Android, iOS, Windows) verwendet werden kann.

Durch die Verwendung der richtigen Frameworks und Komponenten können webbasierte Anwendungen auf einem Android-Gerät auf eine Weise funktionieren, die Benutzern ähnlich aussieht wie eine systemeigene App.

Features einer PWA- oder Hybridweb-App

Es gibt zwei Haupttypen von Web-Apps, die auf Android-Geräten installiert werden können. Der Hauptunterschied besteht darin, ob Der Anwendungscode in ein App-Paket (Hybrid) eingebettet oder auf einem Webserver (pwa) gehostet wird.

  • Hybrid-Web-Apps: Code (HTML, JS, CSS) ist in einem APK verpackt und kann über den Google Play Store verteilt werden. Das Anzeigemodul ist vom Internetbrowser des Benutzers isoliert, keine Sitzungs- oder Cachefreigabe.

  • Progressive Web-Apps (PWAs):Code (HTML, JS, CSS) lebt im Web und muss nicht als APK verpackt werden. Ressourcen werden bei Bedarf mithilfe eines Service Workers heruntergeladen und aktualisiert. Der Chrome-Browser rendert und zeigt Ihre App an, sieht aber nativ aus und enthält nicht die normale Browseradressleiste usw. Sie können Speicher, Cache und Sitzungen für den Browser freigeben. Dies ist im Grunde wie die Installation einer Verknüpfung mit dem Chrome-Browser in einem speziellen Modus. PWAs können auch im Google Play Store mit vertrauenswürdigen Webaktivitäten aufgeführt werden.

PWAs und Hybrid-Web-Apps sind einer nativen Android-App sehr ähnlich, da sie:

  • Kann über den App Store (Google Play Store und/oder Microsoft Store) installiert werden.
  • Zugriff auf systemeigene Gerätefeatures wie Kamera, GPS, Bluetooth, Benachrichtigungen und Kontaktliste
  • Offline arbeiten (keine Internetverbindung)

PWAs verfügen auch über einige einzigartige Features:

  • Kann direkt über das Web auf dem Android-Startbildschirm installiert werden (ohne App Store)
  • Kann zusätzlich über den Google Play Store mit einer vertrauenswürdigen Webaktivität installiert werden
  • Kann über die Websuche ermittelt oder über einen URL-Link freigegeben werden
  • Verlassen Sie sich auf einen Service Worker , um zu vermeiden, dass systemeigener Code verpackt werden muss.

Sie benötigen kein Framework zum Erstellen einer Hybrid-App oder PWA, aber es gibt einige beliebte Frameworks, die in diesem Leitfaden behandelt werden, einschließlich PhoneGap (mit Cordova) und Ionic (mit Cordova oder Kondensator mit Angular oder React).

Apache Cordova

Apache Cordova ist ein Open-Source-Framework, das die Kommunikation zwischen Ihrem JavaScript-Code in einer nativen WebView und der nativen Android-Plattform mithilfe von Plug-Ins vereinfachen kann. Diese Plug-Ins machen JavaScript-Endpunkte verfügbar, die aus Ihrem Code aufgerufen und zum Aufrufen systemeigener Android-Geräte-APIs verwendet werden können. Ein Beispiel für Cordova-Plug-Ins sind der Zugriff auf Gerätedienste wie Akkustatus, Dateizugriff, Vibration / Ringtöne usw. Diese Features sind in der Regel nicht für Web-Apps oder Browser verfügbar.

Es gibt zwei beliebte Verteilungen von Cordova:

  • PhoneGap: Der Support wurde von Adobe eingestellt.

  • Ionic

Ionic

Ionic ist ein Framework, das die Benutzeroberfläche Ihrer App an die Entwurfssprache jeder Plattform (Android, iOS, Windows) anpasst. Ionic ermöglicht Ihnen die Verwendung von Angular oder React.

Hinweis

Es gibt eine neue Version von Ionic, die eine Alternative zu Cordova verwendet, genannt Kondensator. Diese Alternative verwendet Container, um Ihre App webfreundlicher zu gestalten.

Erste Schritte mit Ionic durch Installieren der erforderlichen Tools

Um mit dem Erstellen einer PWA- oder Hybrid-Web-App mit Ionic zu beginnen, sollten Sie zuerst die folgenden Tools installieren:

Erstellen eines neuen Projekts mit Ionic Cordova und Angular

Installieren Sie Ionic und Cordova, indem Sie Folgendes in Ihrer Befehlszeile eingeben:

npm install -g @ionic/cli cordova

Erstellen Sie eine ionic Angular-App mithilfe der App-Vorlage "Registerkarten", indem Sie den Befehl eingeben:

ionic start photo-gallery tabs

Ändern Sie den App-Ordner:

cd photo-gallery

Führen Sie die App in Ihrem Webbrowser aus:

ionic serve

Weitere Informationen finden Sie in den Angular-Dokumenten von Ionic Cordova. Besuchen Sie den Abschnitt "Erstellen Ihrer Angular-App als PWA"-Abschnitt der Ionic-Dokumentation, um zu erfahren, wie Sie Ihre App von einer Hybridbereitstellung zu einer PWA verschieben.

Erstellen eines neuen Projekts mit Ionic Kondensator und Angular

Installieren Sie Ionic und Cordova-Res, indem Sie Folgendes in Der Befehlszeile eingeben:

npm install -g @ionic/cli native-run cordova-res

Erstellen Sie eine ionic Angular-App mithilfe der App-Vorlage "Tabs", und fügen Sie Kondensator hinzu, indem Sie den Befehl eingeben:

ionic start photo-gallery tabs --type=angular --capacitor

Ändern Sie den App-Ordner:

cd photo-gallery

Fügen Sie Komponenten hinzu, um die App zu einer PWA zu machen:

npm install @ionic/pwa-elements

Fügen Sie @ionic/pwa-elements Folgendes zu Ihrer src/main.ts Datei hinzu:

import { defineCustomElements } from '@ionic/pwa-elements/loader';

// Call the element loader after the platform has been bootstrapped
defineCustomElements(window);

Führen Sie die App in Ihrem Webbrowser aus:

ionic serve

Weitere Informationen finden Sie in den Dokumentationen zum Ionic-Kondensator Angular. Besuchen Sie den Abschnitt "Erstellen Ihrer Angular-App als PWA"-Abschnitt der Ionic-Dokumentation, um zu erfahren, wie Sie Ihre App von einer Hybridbereitstellung zu einer PWA verschieben.

Erstellen eines neuen Projekts mit Ionic und React

Installieren Sie die Ionic CLI, indem Sie Folgendes in der Befehlszeile eingeben:

npm install -g @ionic/cli

Erstellen Sie ein neues Projekt mit React, indem Sie den Befehl eingeben:

ionic start myApp blank --type=react

Ändern Sie den App-Ordner:

cd myApp

Führen Sie die App in Ihrem Webbrowser aus:

ionic serve

Weitere Informationen finden Sie in den Ionic React-Dokumenten. Besuchen Sie den Abschnitt "Erstellen Ihrer React-App als PWA " der Ionic-Dokumentation, um zu erfahren, wie Sie Ihre App von einer Hybridbereitstellung zu einer PWA verschieben.

Testen Der Ionic-App auf einem Gerät oder Emulator

Um Ihre Ionic-App auf einem Android-Gerät zu testen, schließen Sie Ihr Gerät an (stellen Sie sicher, dass sie zuerst für die Entwicklung aktiviert ist), und geben Sie dann in der Befehlszeile Folgendes ein:

ionic cordova run android

Um Ihre Ionic-App auf einem Android-Geräte-Emulator zu testen, müssen Sie:

  1. Installieren Sie die erforderlichen Komponenten – Java Development Kit (JDK), Gradle und android SDK.

  2. Erstellen eines virtuellen Android-Geräts (AVD): Weitere Informationen finden Sie im [Android-Entwicklerhandbuch]](https://developer.android.com/studio/run/managing-avds.html).

  3. Geben Sie den Befehl für Ionic ein, um Ihre App im Emulator zu erstellen und bereitzustellen: ionic cordova emulate [<platform>] [options]. In diesem Fall sollte der Befehl folgendes sein:

ionic cordova emulate android --list

Weitere Informationen finden Sie im Cordova Emulator in den Ionic-Dokumenten.