Verwandeln Ihrer Website in eine hochwertige PWA

Ihre Website in eine voll funktionsfähige hochwertige PWA (Progressive Web Application) zu verwandeln, kann in einer Mittagspause erfolgen! In diesem Artikel führen Sie den End-to-End-Prozess durch.

Schritt 1: Erstellen eines Berichts Karte in PWA Builder

Zunächst sollten Sie überprüfen, ob Ihre Website über die Features und Metadaten verfügt, die von großen PWAs benötigt werden.

1. Navigieren Sie zu PWA Builder.
2. Geben Sie die URL der Website ein, die Sie in eine PWA konvertieren möchten, und klicken Sie auf Start.
3. Der PWA-Generator zeigt eine PWA-Berichtskarte an, die angibt, welche Features Ihre Website hat und nicht.

Schritt 2: Überprüfen Ihrer PWA-Berichtskarte

Ihre PWA-Berichtskarte enthält die Bewertung Ihrer Website mit einer maximalen Bewertung von 100. Die Bewertungen basieren auf drei Featurekategorien.

Manifest

PWA wertet das Webanwendungsmanifest Ihrer Website aus, sofern eines verfügbar ist, und identifiziert Felder oder Werte, die erforderlich, empfohlen und optional sind. Sie können Ihre Bewertung verbessern, indem Sie fehlende Werte hinzufügen, indem Sie entweder Ihre Manifestdatei bearbeiten und erneut veröffentlichen oder den Onlinemanifest-Editor verwenden.

Warnung

Änderungen, die im Onlinemanifest-Editor vorgenommen werden, werden nicht auf Ihrer Website veröffentlicht. Die änderungen, die Sie vornehmen, werden nur vom PWA Builder beim Erstellen Ihrer PWA verwendet.

Erforderliche Werte müssen vorhanden sein, andernfalls kann der PWA-Generator Ihre PWA nicht erstellen. Zu den erforderlichen Feldern gehören einfach ein Manifest, Symbole, Name, Kurzname und ein start_url.

Empfohlene Felder sind nicht erforderlich, aber wichtig für die Benutzeroberfläche Ihrer PWA. Es wird dringend empfohlen, alle empfohlenen Werte anzugeben, obwohl PWA Builder eine PWA ohne diese erstellen kann. Zu den empfohlenen Werten gehören Anzeigemodus, Hintergrundfarbe des Begrüßungsbildschirms, Beschreibung, Ausrichtung, Screenshots, hochauflösendes Symbol, maskierbares Symbol, Kategorien und Verknüpfungen.

Optionale Felder sind nicht erforderlich, können aber ggf. angegeben werden. Optionale Felder umfassen eine Altersfreigabe und verwandte Anwendungen.

Service Worker

Ein Service Worker wird im Hintergrund ausgeführt, um umfangreiche Web-App-Features zu aktivieren, bei denen andernfalls 404-Fehler auftreten würden. PWA Builder erfordert einen Service Worker, um Ihre PWA zu erstellen. Wenn Sie jedoch nicht über einen verfügen, können Sie einen von mehreren vordefinierten Service Workern verwenden, die von PWA Builder bereitgestellt werden. So verwenden Sie einen vordefinierten Service Worker:

1. Wählen Sie im Menü die Registerkarte Service Worker-Optionen aus.
2. Wählen Sie den entsprechenden Service Worker aus der kuratierten Liste aus. Beachten Sie, dass es viele vordefinierte Optionen gibt. Stellen Sie sicher, dass Sie den Service Worker auswählen, der für Ihren spezifischen Anwendungsfall am besten geeignet ist.
3. Nachdem Sie den Service Worker ausgewählt haben, den Sie verwenden möchten, werden Sie zu Ihrer PWA-Berichtskarte zurückkehren.

Sicherheit

Alle pwAs, die mit PWA Builder erstellt wurden, erfordern drei Sicherheitsprotokolle.

1. Ihre Website muss HTTPS verwenden.

2. Ihre Website muss über ein entsprechendes HTTPS-Zertifikat verfügen.

   Wenn Auf Ihrer Website kein HTTPS-Zertifikat vorhanden ist, können Sie in Azure veröffentlichen, um integrierte HTTPS-Unterstützung zu erhalten. Alternativ gibt es kostenlose Tools von Drittanbietern wie Letsencrypt , mit denen Sie ein HTTPS-Zertifikat kostenlos erhalten können.

3. Ihre Website darf keine gemischten Inhalte enthalten. Gemischter Inhalt ist, wenn eine über HTTPS bereitgestellte Seite Ressourcen enthält, die über HTTP geladen wurden. Gemischte Inhalte gefährden die Sicherheit von HTTPS und Ihrer PWA.

Schritt 3: Sammeln wichtiger Informationen aus Partner Center

Sie benötigen mehrere Informationen aus Ihrem Partner Center-Konto, um Ihre PWA zu erstellen. Wenn Sie kein MSA haben, klicken Sie hier, um Anweisungen zu den ersten Schritten zu erhalten. Sie müssen sich auch für das Windows-Entwicklerprogramm registrieren.

Wenn Sie dies noch nicht getan haben, müssen Sie Ihre PWA-App erstellen, indem Sie einen neuen Namen reservieren. Nachdem Sie Ihren Namen reserviert haben, klicken Sie auf die Schaltfläche Übermittlung starten , um eine neue App-Übermittlung zu erstellen.

Klicken Sie als Nächstes auf die Registerkarte Produktverwaltung , und wählen Sie Produktidentität aus. Auf der Seite "Produktidentität" werden die Paket-ID Ihres Produkts, Ihre Herausgeber-ID und der Anzeigename Ihres Herausgebers aufgelistet. Speichern Sie diese Werte, und kehren Sie zu PWA Builder zurück.

Schritt 4: Generieren Ihrer PWA in PWA Builder

Sie verfügen jetzt über alles, was Sie zum Erstellen Ihrer PWA in PWA Builder benötigen. Kehren Sie zur PWA Builder-Website zurück, und klicken Sie auf Generieren.

PWA Builder fordert Sie zur Eingabe der Informationen auf, die Sie aus Partner Center in Schritt 3 erhalten haben. Geben Sie die Werte ein, und klicken Sie auf Generieren.

Sobald PWA Builder Ihre PWA erstellt hat, lädt Ihr Browser sie automatisch herunter. Ihre PWA ist in einer .zip-Datei gepackt, die sechs Dateien enthält.

Die msix-Datei ist das Standard App-Paket Ihres PWA. Mit dieser Datei wird Ihre PWA auf dem Computer des Benutzers installiert.

Die appx-Datei ist ein klassisches App-Paket. Es wird verwendet, um Ihre PWA unter älteren Versionen von Windows zu installieren. Weitere Informationen finden Sie unter Klassische App-Pakete .

Schritt 5: Übermitteln Ihrer App-Pakete an den Microsoft Store

Diese Pakete können auf die gleiche Weise an den Microsoft Store übermittelt werden, wie jede andere App, die als MSIX-Datei gepackt ist. Weitere Anweisungen zum Übermitteln Ihrer PWA-Pakete an den Store finden Sie unter App-Übermittlungen.