Veröffentlichen einer progressiven Web-App im Microsoft Store

Artikel
10/13/2023

Das Veröffentlichen Ihrer progressiven Web-App (PWA) im Microsoft Store bietet die folgenden Vorteile:

Vorteil	Beschreibung
Auffindbarkeit	Benutzer suchen natürlich nach Apps im App Store. Wenn Sie im Microsoft Store veröffentlichen, können Millionen von Windows-Benutzern Ihre PWA zusammen mit anderen Windows-Apps entdecken. Der Store präsentiert Apps über Kategorien, kuratierte Sammlungen und vieles mehr. App-Ermittlungsportale bieten potenziellen Benutzern Ihrer App ein einfaches Browsen und Einkaufen. Sie können Ihren Store-Eintrag sogar mit Screenshots, einem Hero-Bild und Video-Trailern erweitern – siehe App-Screenshots, Bilder und Trailer.
Vertrauenswürdigkeit	Windows-Kunden wissen, dass sie ihren Käufen und Downloads im Microsoft Store vertrauen können, da sie die strengen Microsoft Store-Richtlinien einhalten.
Einfache Installation	Der Microsoft Store bietet eine konsistente und benutzerfreundliche Installationserfahrung für alle Windows 10 oder höheren Apps.
App-Analyse	Das Microsoft Partner Center Dashboard bietet detaillierte Analysen zur Integrität, Nutzung und mehr Ihrer App.

Um Ihre PWA im Microsoft Store zu veröffentlichen, sind keine Codeänderungen erforderlich. Stattdessen erstellen Sie eine App-Reservierung im Microsoft Partner Center, packen Ihre PWA mit PWA Builder und übermitteln ihr Paket dann an den Microsoft Store. In den folgenden Abschnitten werden diese Schritte erläutert.

Erstellen einer App-Reservierung

Um Ihre App an den Microsoft Store zu übermitteln, verwenden Sie Microsoft Partner Center.

So erstellen Sie eine App-Reservierung:

Bevor Sie eine App-Reservierung erstellen können, müssen Sie über ein persönliches Microsoft-Konto (kein Geschäfts-Microsoft-Konto oder ein Microsoft-Schulkonto) verfügen, das im Windows-Entwicklerprogramm registriert ist.
1. Wenn Sie noch keins besitzen, erstellen Sie unter account.microsoft.com ein persönliches Microsoft-Konto.
2. Registrieren Sie sich für das Windows Developer-Programm, indem Sie die Schritte unter Öffnen eines Entwicklerkontos in Partner Center ausführen.
Nachdem Ihr Konto im App-Entwicklerprogramm registriert wurde, führen Sie die folgenden Schritte aus, um eine App-Reservierung zu erstellen:
1. Wechseln Sie zum Partner Center-Dashboard. Melden Sie sich mit dem Konto an, das Sie registriert haben.
2. Wählen Sie unter Arbeitsbereichedie Option Apps und Spiele aus. Die Apps und Spiele | Die Seite Übersicht wird angezeigt.
3. Wählen Sie Neues Produkt>MSIX- oder PWA-App aus.
4. Wenn Sie dazu aufgefordert werden, geben Sie einen Namen für Ihre Reservierung ein, und wählen Sie dann Produktnamen reservieren aus.
Wählen Sie Produktverwaltungsproduktidentität> aus, um ihre Herausgeberdetails zur Verwendung im Abschnitt PWA verpacken anzuzeigen.
Kopieren und speichern Sie die folgenden Werte.
- Paket-ID
- Herausgeber-ID
- Anzeigename des Herausgebers

Packen Ihrer PWA für den Store

Nachdem Sie nun die Veröffentlichungsinformationen zu Ihrer App gesammelt haben, generieren Sie mithilfe von PWA Builder ein Windows-App-Paket für Ihre PWA.

So generieren Sie ein App-Paket:

Wechseln Sie zu PWA Builder.
Geben Sie unter PWA an App-Stores senden die URL Ihrer PWA in das Textfeld ein, und klicken Sie dann auf die Schaltfläche Start .

Ihre PWA wird ausgewertet, um sicherzustellen, dass sie speicherbereit ist.
Wenn die Auswertung im PWABuilder-Bericht Karte Seite anzeigt, dass Ihre PWA zum Packen bereit ist, fahren Sie mit dem nächsten Schritt fort. Wenn die Auswertung darauf hinweist, dass Ihre PWA nicht zum Packen bereit ist, sehen Sie sich den Abschnitt Aktionselemente an, um zu erfahren, wie Sie Ihre PWA verbessern können:
Sobald Ihre PWA zum Verpacken bereit ist, klicken Sie in der oberen rechten Ecke des PWABuilder-Berichts Karte Seite auf die Schaltfläche Paket für Stores. Ein Dialogfeld mit der Meldung Awesome! Ihre PWA ist store ready!.
Klicken Sie unter Windows auf die Schaltfläche Paket generieren . Das Dialogfeld Windows-Paketoptionen wird geöffnet.
Fügen Sie die folgenden Werte ein, die Sie oben im Abschnitt Erstellen einer App-Reservierung gespeichert haben:
- Paket-ID
- Anzeigename des Herausgebers
- Herausgeber-ID
Klicken Sie auf die Schaltfläche Paket herunterladen , um Ihr Windows-Paket herunterzuladen.

Ihr Download ist ein .zip Archiv, das eine .msixbundle Datei und eine .classic.appxbundle Datei enthält. Mit den beiden App-Paketen kann Ihre PWA unter einer Vielzahl von Windows-Versionen ausgeführt werden.

Siehe auch:

Übermitteln Ihres App-Pakets an den Microsoft Store

So übermitteln Sie Ihre App an den Microsoft Store:

Wechseln Sie zu Microsoft Partner Center.
Wählen Sie Ihre App aus.
Klicken Sie auf die Schaltfläche Übermittlung starten .
Wenn Sie dazu aufgefordert werden, geben Sie Informationen zu Ihrer App an, z. B. Preise und Altersfreigaben.
Wählen Sie in der Eingabeaufforderung Pakete die .msixbundle Dateien und aus, die .classic.appxbundle Sie im Abschnitt Paketieren Ihrer PWA generiert haben.

Nachdem Sie Ihre Übermittlung abgeschlossen haben, wird Ihre App in der Regel innerhalb von 24 bis 48 Stunden überprüft. Nachdem Sie die Genehmigung erhalten haben, ist Ihre PWA im Microsoft Store verfügbar.

Messen der Nutzung Ihrer aus dem Microsoft Store installierten PWA

Wenn Ihre PWA beim ersten Start aus dem Microsoft Store installiert wurde, enthält Microsoft Edge den folgenden Referer Header mit der Anforderung der ersten Navigation Ihrer Web-App.

Referer: app-info://platform/microsoft-store

Verwenden Sie dieses Feature, um den eindeutigen Datenverkehr von Ihrer PWA zu messen, die aus dem Microsoft Store installiert wurde. Basierend auf dem Datenverkehr können Sie den Inhalt Ihrer App anpassen, um die Benutzererfahrung zu verbessern. Auf dieses Feature kann sowohl Client- als auch Servercode zugreifen. Um auf diese Informationen auf clientseitiger Seite zuzugreifen, können document.referrer Sie abfragen in Ihrem JavaScript.

Umleiten zu gebietsschemaspezifischen Domänen ohne Anzeige einer zusätzlichen Benutzeroberfläche

Standardmäßig zeigt eine PWA, die aus dem Microsoft Store installiert wird, eine zusätzliche Benutzeroberfläche an, wenn die App an eine gebietsschemaspezifische Domäne umgeleitet wird. Die hinzugefügte Benutzeroberfläche zeigt die URL und den Seitentitel an. Diese Benutzeroberfläche wird hinzugefügt, da die Navigation zur gebietsschemaspezifischen Domäne als außerhalb des Bereichs gilt.

Die folgende Abbildung zeigt die Benutzeroberfläche, die eingeführt wird, wenn sich ein Benutzer außerhalb des Bereichs einer PWA bewegt.

Die zusätzliche Benutzeroberfläche mit URL und Seitentitel, wenn die App an eine andere Domäne umgeleitet wird

Domänenumleitung mit über den Browser installierten PWAs

Ein Web-App-Manifest ist an eine einzelne Domäne gebunden. Einige PWAs verwenden jedoch gebietsschemaspezifische Domänen für ihre Kunden in bestimmten Regionen der Welt. Wenn Sie die PWA in einem Webbrowser besuchen, werden Kunden nahtlos von der Prinzipaldomäne (z. B contoso.com. ) in eine gebietsschemaspezifische Domäne (z. B. ) umgestellt, contoso.co.keda die Umleitung während des anfänglichen Ladens dieser Website erfolgt.

Kunden, die die PWA von Microsoft Edge installieren, würden daher die PWA aus der gebietsschemaspezifischen Domäne installieren. Nachfolgende PWA-Starts erfolgen direkt in dieser gebietsschemaspezifischen Domäne und nicht zuerst in der Prinzipaldomäne.

Domänenumleitung mit aus dem Microsoft Store installierten PWAs

PWAs, die aus dem Microsoft Store installiert werden, verfügen über eine hartcodierte Start-URL, die auf die Prinzipaldomäne verweist. Wenn die PWA gestartet wird, navigiert die PWA zunächst zur Prinzipaldomäne, und dann kann ein Kunde (bei Bedarf) an seine gebietsschemaspezifische Domäne umgeleitet werden. Wenn diese Umleitung erfolgt, wird die Navigation als "außerhalb des Gültigkeitsbereichs" betrachtet. Daher zeigt die App die URL und den Seitentitel oben auf der Seite an.

Das Anzeigen der URL und des Seitentitels ist ein Sicherheitsfeature, um sicherzustellen, dass Benutzer wissen, dass sie den Kontext der PWA verlassen haben. Diese hinzugefügte Benutzeroberfläche ist sinnvoll, wenn ein Benutzer eine Seite von einer anderen Website im Kontext der PWA lädt. Diese hinzugefügte Benutzeroberfläche kann jedoch unangemessen sein, wenn ein Benutzer zwischen Domänen wechselt, die alle Teil derselben Website sind.

Verhindern der Anzeige der gebietsschemaspezifischen URL und des Titels

Es ist derzeit für Apps, die aus dem Microsoft Store installiert sind, nicht möglich, die Anzeige der zusätzlichen URL und der Titelbenutzeroberfläche zu verhindern, wenn sie zu einer gebietsschemaspezifischen Domäne umgeleitet werden.

In Zukunft ermöglichen Bereichserweiterungen es einer PWA, die Navigation zu Pfaden, Unterdomänen oder sogar Websites zu erfassen, die nicht ihren eigenen Bereich haben. Das Bereichserweiterungsfeature befindet sich in der aktiven Entwicklung und kann noch nicht verwendet werden. Weitere Informationen zum Entwicklungsstatus dieses Features in Chromium finden Sie im Web-App-Bereichserweiterungsfeature unter Chrome-Plattformstatus.

Sobald das Feature in Microsoft Edge verwendet werden kann, werden wir es hier dokumentieren. Weitere Informationen zur Funktionsweise von Bereichserweiterungen finden Sie in der Zwischenzeit im Erläuterungsdokument im WICG-Repository.

Vornehmen von Updates an Ihrer App

Wenn Sie Ihren PWA-Code aktualisieren, müssen Sie im Allgemeinen kein neues App-Paket erstellen und es erneut an den Microsoft Store übermitteln. Angenommen, Sie nehmen Änderungen am Front-End-HTML-, CSS- oder JavaScript-Code Ihrer App oder am Service Worker vor. Wenn der Benutzer die App das nächste Mal startet, werden die Änderungen von dem Browser heruntergeladen, der Ihre App von Ihrem Webserver ausführt.

Wenn Sie jedoch Änderungen an der Web-App-Manifestdatei vornehmen, müssen Sie ein neues App-Paket erstellen und es erneut an den Microsoft Store übermitteln. Beispielsweise können Sie im Manifest das App-Symbol oder den App-Namen ändern oder Manifestmember wie file_handlers, protocol_handlersoder share_targethinzufügen. Das Erstellen und Übermitteln eines neuen App-Pakets ist erforderlich, wenn das Manifest geändert wird, da die Informationen in der Web-App-Manifestdatei in das Windows-App-Paket kopiert werden, um eine bessere Integration in Windows zu ermöglichen.