Eine progressive Web-App erstellen und verteilen

Verwenden Sie das Power Pages-Designstudio, um Ihre progressive Web-App (PWA) zu konfigurieren. Sie können die PWA-Funktionalität aktivieren oder deaktivieren. Sie können die PWA-Einstellungen anpassen und das Erstellen eines App-Pakets vorbereiten, das Sie dann in den jeweiligen Geräte-Stores veröffentlichen können.

1. Wechseln Sie zu Power Pages.

2. Wählen Sie Ihre Website und dann Bearbeiten aus.

3. Wählen Sie im Designstudio den Arbeitsbereich Einrichten und dann Progressive Webanwendung aus.

   

4. Wählen Sie PWA aktivieren.

   

Markieren Sie Ihre App

Sie können Ihre eigene gebrandete PWA erstellen, indem Sie die Anpassungsoptionen nutzen, um den Namen der App, die Startseite, die Farbe und mehr zu ändern.

Notiz

Auf iOS-Geräten werden die Symbole für die PWA als Miniaturansichten angezeigt und der angepasste Startbildschirm wird nicht angezeigt.

1. Wählen Sie im Designstudio Progressive Web-App aus.

2. Aktualisieren Sie die folgenden PWA-Einstellungen für Ihre Website.

   Einstellungen	Description
   Title	Der Name der Portal-PWA, die auf dem mobilen Gerät und im App-Store angezeigt wird.
   Beschreibung	Die Beschreibung der Portal-PWA, die auf dem mobilen Gerät und im App-Store angezeigt wird.
   Startseite der App	Die Startseite für die Website, wenn sie über die PWA geöffnet wird.
   Hintergrund des Startbildschirms	Die Hintergrundfarbe für den Splash-Screen, wenn die PWA geladen wird.
   App Symbol	Das Symbol für die App, das auf dem mobilen Gerät und im App-Store angezeigt wird. Hinweis: Unterstützt die Formate .jpg, .jpeg, .png mit einer maximalen Uploadgröße von 5 MB. Die Größe des Symbols muss 512 × 512 Pixel betragen.

   Anmerkung

   Je nach Ihrem Browser kann es einen Moment dauern, bis Ihre Änderungen widergespiegelt werden. Nachdem Sie die PWA angepasst haben, wählen Sie Vorschau aus, um den Cache Ihrer Website zu löschen.

Offline-Verhalten definieren

PWA bietet Unterstützung für ein reibungsloses Navigationserlebnis, wenn das verwendete Gerät offline oder nicht mit dem Internet verbunden ist. Sie können die Seiten innerhalb Ihrer Website wählen, die offline (schreibgeschützt) zur Verfügung stehen sollen, sowie eine Nachrichtenseite für die restlichen Funktionalitäten des Portals festlegen, die nicht für Offlinezugriff aktiviert sind.

Konfigurieren Sie die Offline-Seiten für die PWA des Portals

1. Wählen Sie im Designstudio im Arbeitsbereich Einrichten die Option Progressive Web-App aus.

2. Wählen Sie unter Weitere Einstellungen die Option Offline-Seiten definieren aus.

   

3. Wählen Sie die Seiten aus, auf die Sie den Benutzern den Zugriff ermöglichen möchten, wenn sie die PWA offline verwenden.

   

Notiz

Bei der Konfiguration des Offline-Zugriffs auf PWA-Seiten sollten Sie die Speicherbeschränkungen für Benutzergeräte berücksichtigen. Wenn der Speicherbedarf für den Offline-PWA-Zugriff den verfügbaren Speicherplatz auf dem Gerät übersteigt, ist das gesamte Portal für den Offline-Zugriff nicht verfügbar. Wir empfehlen Ihnen, die Benutzerfreundlichkeit des Offline-Zugriffs zu testen und nur die Seiten zwischenzuspeichern, die für Ihre Benutzer besonders hilfreich und wichtig sind. Denken Sie daran, dass Offline-Seiten nur Informationen anzeigen können. Seiten, die mit Microsoft Dataverse verbunden sind und Formulare zum Ausfüllen oder Ausführen von Abfragen enthalten, funktionieren offline nicht.

Eine Seite für Offline-Nachrichten festlegen

Wenn ein Gerät offline ist, erscheint die Seite, die Sie als Offlinenachrichtenseite konfigurieren, wenn Benutzer versuchen, auf Seiten zuzugreifen, die nicht für den Offlinezugriff aktiviert wurden.

1. Wählen Sie im Designstudio den Arbeitsbereich Seiten aus.

2. Wählen Sie Standardmäßige Offlineseite aus.

3. Passen Sie die Seite an.

Anmerkung

• Sie können die Felder Titel oder Partial URL ("/default-offline-page") für die Offline-Seite nicht ändern. Wenn die Offline-Seite nicht vorhanden ist, wird den Benutzern eine Standard-Offline-Seite angezeigt.
• Je nach Ihrem Browser kann es einen Moment dauern, bis Ihre Änderungen widergespiegelt werden. Nachdem Sie die PWA-Offline-Erfahrung angepasst haben, wählen Sie Vorschau aus, um den Cache Ihrer Website zu löschen.

Ihre Website im Offline-Modus testen

Nachdem Sie die Offlineseiten aktiviert haben, können Sie nun ein mobiles Gerät im Offlinemodus verwenden und durch verschiedene Seiten blättern, die für den Offlinezugriff aktiviert sind.

1. Rufen Sie Ihre Website auf, indem Sie einen Webbrowser auf Ihrem mobilen Gerät im Online-Modus verwenden.

2. Wählen Sie Zum Startbildschirm hinzufügen oder eine ähnliche Option. Auf einem Android-Gerät könnte die Option zum Beispiel + Hinzufügen zu>App-Bildschirm lauten.

   

   Notiz

   Diese Aktion lädt Portalseiten herunter, die für das Offline-Browsing aktiviert wurden. Dies kann eine Weile dauern, abhängig von der Netzwerkbandbreite und der Größe der Seiten, die für das Offline-Browsing ausgewählt wurden.

3. Aktivieren Sie den Offline-Modus auf Ihrem mobilen Gerät.

4. Öffnen Sie Ihr Portal über den Startbildschirm. Oben wird eine Benachrichtigung angezeigt, die Sie daran erinnert, dass Sie im Offlinemodus browsen. Wenn Sie eine Seite auswählen, die nicht für das Offlinebrowsen aktiviert wurde, erscheint die Offlinenachricht.

   

Verteilen Sie Ihre App

Sie können Ihre App entweder über einen Browser oder über einen App Store verteilen.

Verteilen Sie Ihre App mit Hilfe eines Browsers

Nachdem Ihr Portal als PWA aktiviert wurde, können Ihre Benutzer die Power Pages-Website als App auf dem Startbildschirm ihres Geräts anheften. Diese Option wird auf allen Plattformen (Android, iOS, Chromebook und Windows) sowie auf allen Formfaktoren (Smartphone, Desktop und Tablet) unterstützt.

Die folgenden Abbildungen zeigen, wie Benutzende ein Portal zu ihrem Startbildschirm hinzufügen, indem sie den Browser verwenden, der das Portal als PWA installiert.

Android und iOS bieten jeweils unterschiedliche Methoden zur browserbasierten Installation.

Verbreiten Sie Ihre App über einen App Store

Progressive Web-Apps können auch über App-Stores für Android, iOS und Windows vertrieben werden. Dies erfolgt durch die Erstellung eines App-Pakets und die Veröffentlichung der App im jeweiligen App-Store. Für die Erstellung der App-Pakete arbeiten wir mit PWABuilder zusammen, das eine Plattform zum Generieren von Anwendungspaketen für verschiedene App-Stores bietet.

Um ein App-Paket zu erstellen, navigieren Sie im Designstudio zum Arbeitsbereich Einrichten. Wählen Sie unter App-Paket die Option App-Paket erstellen.

Dadurch gelangen Sie zur die PWA-Builder-Website, auf der Sie ein App-Paket für verschiedene App Stores erstellen können. Das Paket, das Sie mit dem PWA-Builder erstellen, enthält:

• Ein App-Paket für die PWA, die in dem jeweiligen App Store verwendet werden soll.

• Ein schrittweiser Beleg für das Veröffentlichen der App.

Weitere Einzelheiten finden Sie im PWA Resource Hub.

Für iOS unterstützt PWABuilder die Generierung des App-Store-Pakets. Weitere Informationen finden Sie unter Paket für den App-Store.

Für Windows siehe Paket für den Microsoft Store.

Weitere Überlegungen für Android

Für die Android-Plattform können Sie auch das Android-Zertifikat mit der Option Android-Zertifikat aktualisieren aktualisieren.

Aktualisieren Sie den Titel und den Fingerabdruck des SHA-256-Zertifikats, um die Datei mit den digitalen Asset-Links (assetlinks.json) zu aktualisieren, die den Besitz Ihrer PWA belegt.

Siehe auch

Übersicht über Websites als progressive Web-Apps
Übersicht über progressive Web-Apps (PWAs)
Progressive Web-App erstellen und verteilen (Video)