Anmerkung des Herausgebers: Hallo, dieses Dokument bietet einen Überblick über die Erstellung einer PWA-App für den Einstieg. Möglicherweise erhalten Sie keine vollständigen technischen Details.
Progressive Web-Apps, besser bekannt als Chrome-Apps, sind kleine Web-Apps, die größtenteils aus eingebetteten JavaScripts bestehen und mit allen gängigen Browsern kompatibel sind.
Obwohl sie leichtgewichtig sind, können sie die meisten erforderlichen Funktionssätze enthalten. Die Installation dauert nur ein paar Sekunden und der Grund für die Beliebtheit von PWA liegt darin, dass es alles bietet, was man sich vorstellen kann.
Diese Apps bieten so viele Vorteile, dass viele Verlage damit begonnen haben, ihre PWA-Pendants in ihre Websites zu integrieren.
Wenn Sie also ein Herausgeber oder Entwickler sind, der auf diesen Zug aufspringen möchte, ist dieser Leitfaden hier, um Ihnen zu helfen.
Hier finden Sie detaillierte Anweisungen, die Ihnen beim Erstellen, Testen, Versenden und anschließenden Installieren von Progressive Web Apps auf Ihrem Computer helfen.
Erstellen Sie eine PWA-App
Erstellen Sie einen leeren Ordner auf Ihrem Desktop und geben Sie der PWA-App denselben Namen wie dem Ordner.
Danach müssen Sie in diesem Ordner programmieren und eine Manifestdatei erstellen. Verwenden Sie dazu einen Texteditor wie Notepad++ und erstellen Sie ein neues JSON oder JavaScript-Objekt-Notation Archiv.
Geben Sie die gewünschten Informationen in die Manifestdatei für Ihre PWA-Anwendung ein. Es muss folgende Werte haben:
- Name: der Name, der im Chrome Web Store angezeigt wird
- version – Die Version der Metadaten
- Symbole – Ein Array, das die von Ihrem Element verwendeten Symbole angibt
- Beschreibung – Eine Zeichenfolge mit maximal 132 Zeichen, die ihre Erweiterung beschreibt
Hier ist beispielsweise eine JSON-Datei für eine Lesezeichenanwendung, die Sie auschecken können:
Sobald die Kodierung abgeschlossen ist, müssen Sie überprüfen, ob die Codes das richtige Format haben. Dazu können Sie ein JSON-Validierungstool wie JSONLint verwenden.
Wenn die Validierung erfolgreich ist, speichern Sie diese Datei als manifest.json.
Als Nächstes müssen Sie ein Logo für Ihre App entwerfen. Stellen Sie sicher, dass die Größe stimmt 128p x 128p. Sobald das Logo erstellt ist, speichern Sie es als 128.png im selben Ordner, in dem sich Ihre JSON-Datei befindet.
Das ist alles. Sie haben erfolgreich die gewünschte Miniaturansicht einer PWA-App erstellt. Jetzt stellen wir es auf die Probe.
PWA-App-Test
Starten Sie den Chrome-Browser auf Ihrem PC und gehen Sie zum folgenden Speicherort: chrome://extensions/, um die Chrome-Erweiterungsseite zu öffnen. Aktivieren Sie die Entwicklermodus Wechseln Sie oben rechts auf der Seite und klicken Sie auf die Schaltfläche „Load Unpacked“.
Navigieren Sie nun im Explorer-Fenster zum PWA-Anwendungsordner, wählen Sie ihn aus und klicken Sie auf die Schaltfläche „Ordner auswählen“.
Öffnen Sie nach dem Laden der App einen neuen Tab und klicken Sie im Chrome-Browser auf das Apps-Symbol. Alternativ können Sie chrome://apps/ in der Adressleiste aufrufen.
Wählen Sie Ihre erstellte PWA aus und prüfen Sie, ob sie ordnungsgemäß funktioniert oder nicht. Wenn Sie auf Probleme stoßen, nehmen Sie die erforderlichen Änderungen an manifest.json vor und laden Sie das Paket in Chrome über die oben erwähnte Option „Ohne Verpackung hochladen“ neu.
Überprüfen Sie es nun noch einmal und veröffentlichen Sie es im Chrome Web Store, wenn Sie alle Fehler behoben haben.
Veröffentlichen Sie Ihre App im Chrome Web Store
Bevor Sie mit der Veröffentlichung der App fortfahren, müssen Sie zunächst Ihre Zielgruppen überprüfen. Sie werden in vier Segmente eingeteilt:
- Öffentlich: Ihre Bewerbung steht jedem zur Verfügung.
- Nicht im Angebot enthalten: Nur für diejenigen verfügbar, mit denen Sie den direkten Link zu Ihrer PWA teilen. Es würde nicht im Chrome Web Store erscheinen.
- Privat: Nur für Tester und Debugger verfügbar, deren Namen Sie in das Entwickler-Dashboard aufgenommen haben.
- Gruppenredakteure– Verfügbar für Publisher, die eine einmalige Entwicklergebühr bezahlt haben.
Sobald Sie eine Entscheidung getroffen haben, beginnen wir mit den Schritten zur Veröffentlichung Ihrer App. Erste, Erstellen Sie eine ZIP-Datei aus Ihrem App-Paket, das die Dateien 128.png und manifest.json enthält.
Als nächstes müssen Sie sich registrieren als Chrome Web Store-Entwickler. Besuchen Sie diese Website und folgen Sie den Anweisungen auf dem Bildschirm, um sich als Chrome Web Store-Entwickler zu registrieren.
Nachdem Sie Ihr Konto erstellt haben, rufen Sie das Chrome-Entwickler-Dashboard auf und melden Sie sich mit Ihren Anmeldeinformationen an. Klicke auf Füge neuen Gegenstand hinzu > Wählen Sie die Datei aus und navigieren Sie zur ZIP-Datei Ihrer Bewerbung; Wählen Sie es aus und klicken Sie auf die Schaltfläche „Hochladen“.
Sobald die Datei hochgeladen ist, müssen Sie die zusätzlichen Details eingeben. Geben Sie die Details ein und klicken Sie oben rechts auf die Schaltfläche „Zur Überprüfung einreichen“.
Aktivieren Sie anschließend das Kontrollkästchen, wenn Sie die PWA-App mithilfe der automatischen Veröffentlichung veröffentlichen möchten, nachdem sie die Prüfung bestanden hat, und klicken Sie im Bestätigungsdialog auf „Zur Prüfung einreichen“.
Ihre Bewerbung wird geprüft und auf der veröffentlicht Virtueller Chrome-Store wenn alles in Ordnung ist (wenn Sie die Zielgruppe festgelegt haben).
Außerdem erhalten Sie den Bewertungsstatus und veröffentlichen ihn automatisch, wenn alles gut aussieht.
Installieren Sie die PWA-App auf dem Computer
Nachdem Ihre App nun veröffentlicht ist, installieren Sie sie auf Ihrem PC.
Gehen Sie zum Chrome Web Store und öffnen Sie die Seite mit den App-Details. Klicken Sie auf die Schaltfläche „Zu Chrome hinzufügen“ (Beispiel unten).
Klicken Sie im angezeigten Bestätigungsdialog auf die Schaltfläche „Erweiterung hinzufügen“.
Das ist alles; Die Anwendung wurde auf Ihrem PC installiert und ist unter chrome://applications/ verfügbar.
Wenn Sie Ihre PWA-App zur Website hinzugefügt haben, wird der Vorgang etwas anders sein.
Gehen Sie zu Ihrer Website und klicken Sie dann auf das Symbol „Installieren“ ganz rechts in der Omnibox (als Referenz nehmen wir die Website zur Bildkomprimierung von Google Squoosh).
Klicken Sie im Bestätigungsfeld auf „Installieren“. Anschließend wird die PWA installiert.
Endeffekt
Wir vervollständigen die Anleitung zum Erstellen einer Chrome-Anwendung. Ebenso wurden die Schritte zum Veröffentlichen und anschließenden Installieren auf Ihrem Computer aufgeführt.
Erwägen Sie, Ihre demografischen Daten auf festzulegen Öffentlich wenn Sie möchten, dass Ihre PWA ein breiteres Publikum erreicht. Befindet sich die App jedoch derzeit in der Testphase, ist es am besten, sie mit dem Tag „Privat/Nicht gelistet“ zu kennzeichnen, sie gründlich zu testen und sie nur öffentlich zu machen.
Darüber hinaus gibt es keinen festen Zeitrahmen für die Prüfung Ihres Antrags. Dies hängt in der Regel von der Art der von Ihnen eingereichten Bewerbung ab. Unabhängig vom Ergebnis werden Sie vom Team per E-Mail benachrichtigt.
Wenn Sie die PWA-App nicht mehr im Browser haben möchten, deinstallieren Sie sie von der Erweiterungsseite.
Damit schließen wir diese Anleitung zum Erstellen und Installieren der PWA-Anwendung ab. Wenn Sie Fragen zu den oben genannten Anweisungen haben, teilen Sie uns dies bitte mit.
Wenn Sie schließlich Ideen oder Kommentare zum Erstellen und Installieren einer progressiven Web-App auf dem Computer haben, können Sie diese gerne im Kommentarfeld unten hinterlassen. Sie können auch veraltete Informationen melden.
Der Artikel wurde von Sadique Hassan beigesteuert; .
