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.
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 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 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.
Um mit dem Erstellen einer PWA- oder Hybrid-Web-App mit Ionic zu beginnen, sollten Sie zuerst die folgenden Tools installieren:
Node.js für die Interaktion mit dem Ionic-Ökosystem. Laden Sie NodeJS für Windows herunter, oder folgen Sie dem NodeJS-Installationshandbuch mithilfe von Windows-Subsystem für Linux (WSL). Möglicherweise sollten Sie die Verwendung von Node Version Manager (NVM) in Betracht ziehen, wenn Sie mit mehreren Projekten und der Version von NodeJS arbeiten.
VS-Code zum Schreiben des Codes. Laden Sie VS Code für Windows herunter. Sie können auch die WSL-Remoteerweiterung installieren, wenn Sie Ihre App lieber mit einer Linux-Befehlszeile erstellen möchten.
Windows-Terminal für die Arbeit mit Ihrer bevorzugten Befehlszeilenschnittstelle (CLI). Installieren Sie Windows-Terminal aus dem Microsoft Store.
Git für die Versionssteuerung. Laden Sie Git herunter.
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.
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.
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.
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:
Installieren Sie die erforderlichen Komponenten – Java Development Kit (JDK), Gradle und android SDK.
Erstellen eines virtuellen Android-Geräts (AVD): Weitere Informationen finden Sie im [Android-Entwicklerhandbuch]](https://developer.android.com/studio/run/managing-avds.html).
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.
Feedback zu Windows developer
Windows developer ist ein Open Source-Projekt. Wählen Sie einen Link aus, um Feedback zu geben: