Wie erstelle und installiere ich Progressive Web App auf dem Computer?

Progressive Web Apps oder Chrome Apps sind leichtgewichtige Anwendungen, die auf Chrome-basierten Betriebssystemen und Browsern installiert und ausgeführt werden. Es unterstützt die meisten Computergeräte und wurde hauptsächlich für Chrome OS-Maschinen entwickelt. Wir können die Progressive-Web-Apps manuell erstellen und sie dann als eigenständige App in den Browsern Chrome OS oder Chromium auf dem Computer installieren.

Die Progressive Web Apps, oder besser bekannt als Chrome Apps, sind kleine Web-Apps, die hauptsächlich aus integrierten JavaScripts bestehen und mit allen gängigen Browsern kompatibel sind.

Obwohl sie leicht sind, schaffen sie es dennoch, die meisten erforderlichen Funktionen zu integrieren. Die Installation dauert nur ein paar Sekunden, und der Grund für die Popularität von PWA ist, dass es alles hat, was man sich vorstellen kann.

Diese Apps bieten eine solche Fülle von Vorteilen, dass viele Publisher damit begonnen haben, PWA-Pendants in ihre Websites zu integrieren.

Wenn Sie also ein Publisher oder Entwickler sind, der auf diesen Zug aufspringen möchte, dann ist dieser Leitfaden hier, um Ihnen zu helfen.

Hier finden Sie detaillierte Anweisungen, die Ihnen helfen sollen, Progressive Web Apps zu erstellen, zu testen, einzureichen und anschließend auf Ihrem Computer zu installieren.

Inhalt

PWA-App erstellen

Erstellen Sie einen leeren Ordner auf Ihrem Desktop und geben Sie der PWA-App denselben Ordnernamen.

Danach müssen Sie eine Manifestdatei in diesem Ordner codieren und erstellen. Verwenden Sie dazu einen Texteditor wie z Notepad++ und eine neue erstellen JSON oder JavaScript-Objekt-Notation Datei.

Geben Sie die gewünschten Informationen in die Manifestdatei für Ihre PWA-App ein. Es sollte folgende Werte haben:

• name – Der Name, der im Chrome Web Store angezeigt wird
• version — Die Version der Metadaten
• icons — Ein Array, das die Symbole angibt, die Ihr Element verwendet
• description – Eine Zeichenfolge mit (maximal) 132 Zeichen, die Ihre Erweiterung beschreibt

Hier ist zum Beispiel eine JSON-Datei für eine Lesezeichen-App, auf die Sie verweisen könnten:

Sobald die Codierung abgeschlossen ist, müssen Sie überprüfen, ob die Codes korrekt formatiert sind. Dazu können Sie ein JSON-Validierungstool wie z JSONLint .

Wenn die Validierung erfolgreich ist, speichern Sie diese Datei unter manifest.json .

Als nächstes müssen Sie ein Logo für Ihre App entwerfen. Stellen Sie sicher, dass die Größe ist 128p mal 128p . Sobald das Logo erstellt ist, speichern Sie es unter 128.png im selben Ordner, in dem sich Ihre JSON-Datei befindet.

Das ist es. Sie haben erfolgreich die gewünschte Miniaturversion einer PWA App erstellt. Stellen wir es jetzt auf die Probe.

Testen Sie die PWA-App

Starten Sie den Chrome-Browser auf Ihrem PC und gehen Sie dann zum folgenden Ort: chrome://extensions/ , um die Seite mit den Chrome-Erweiterungen zu öffnen. Aktivieren Sie die Entwicklermodus schalten Sie oben rechts auf der Seite um und klicken Sie auf Ausgepackt laden Taste.

Durchsuchen und wählen Sie nun den PWA-App-Ordner im Explorer-Fenster aus und klicken Sie auf die Ordner auswählen Taste.

Öffnen Sie nach dem Laden der App einen neuen Tab und klicken Sie im Chrome-Browser auf das Apps-Symbol. Alternativ können Sie auch besuchen chrome://apps/ in der Adressleiste.

Wählen Sie Ihre erstellte PWA aus und prüfen Sie, ob sie korrekt funktioniert oder nicht. Wenn Sie Probleme finden, nehmen Sie die erforderlichen Änderungen an der Datei vor manifest.json Datei und laden Sie das Paket wie oben erwähnt über die Option Load Unpacked neu in Chrome.

Führen Sie nun den Check erneut durch und wenn Sie alle Bugs ausgebügelt haben, veröffentlichen Sie ihn im Chrome Web Store!

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:

• Öffentlichkeit: Ihre App wird für alle verfügbar sein.
• Nicht aufgeführt: Nur für diejenigen verfügbar, mit denen Sie den direkten Link Ihrer PWA teilen. Es würde nicht im Chrome Web Store erscheinen.
• Privatgelände: Nur für die Tester und Debugger verfügbar, deren Namen Sie im Entwickler-Dashboard aufgelistet haben.
• Verlage der Gruppe : Verfügbar für Publisher, die eine einmalige Entwicklergebühr bezahlt haben.

Sobald Sie sich entschieden haben, beginnen wir mit den Schritten zur Veröffentlichung Ihrer App. Zuerst, eine ZIP-Datei erstellen Ihres App-Pakets, das die hat 128.png und die manifest.json Datei.

Als nächstes müssen Sie sich selbst als registrieren Chrome Web Store-Entwickler . Geh 'rüber zu Diese Seite und fahren Sie mit den Anweisungen auf dem Bildschirm fort, um sich als Chrome Web Store-Entwickler zu registrieren.

Sobald Ihr Konto erstellt ist, gehen Sie zu Chrome-Entwickler-Dashboard und melden Sie sich mit Ihren Zugangsdaten an. Klicke auf Neues Element hinzufügen > Datei wählen und navigieren Sie zur ZIP-Datei Ihrer App; auswählen und drücken Hochladen Taste.

Sobald die Datei hochgeladen ist, müssen Sie einige zusätzliche Details ausfüllen. Füllen Sie die Details aus und klicken Sie auf die Zur Überprüfung einreichen Schaltfläche rechts oben.

Aktivieren Sie danach das Kontrollkästchen, wenn Sie die PWA-App nach bestandener Überprüfung automatisch mit Veröffentlichen veröffentlichen möchten, und klicken Sie auf Zur Überprüfung einreichen im Bestätigungsdialogfeld.

Ihre App wird überprüft und im veröffentlicht Chrome-Webstore und ob alles gut ist (wenn Sie die Zielgruppe auf eingestellt hatten Öffentlichkeit).

Außerdem erhalten Sie den Status der Bewertung und veröffentlichen diese automatisch, wenn alles in Ordnung aussieht.

Installieren Sie die PWA-App auf dem Computer

Nachdem Ihre App veröffentlicht wurde, installieren wir sie auf Ihrem PC.

Gehen Sie zum Chrome Web Store und öffnen Sie die Seite mit den App-Details. Klick auf das Zu Chrome hinzufügen Schaltfläche (Beispiel unten).

Klick auf das Erweiterung hinzufügen Schaltfläche im angezeigten Bestätigungsdialogfeld.

Das ist es; Die App wurde erfolgreich auf Ihrem PC installiert und ist unter verfügbar chrome://apps/ .

Falls Sie Ihre PWA-App zur Website hinzugefügt haben, ist der Vorgang etwas anders.

Gehen Sie zu Ihrer Website und klicken Sie dann auf das Installationssymbol ganz rechts in der Omnibox (als Referenz nehmen wir die Bildkomprimierungs-Website von Google, Squoosh).

Klicken Installieren in das Bestätigungsfeld ein und installiert dann die PWA.

Fazit: PWA erstellen und installieren

Wir runden die Anleitung ab, wie Sie eine Chrome-App erstellen könnten. Ebenso wurden die Schritte zum Veröffentlichen und anschließenden Installieren auf Ihrem Computer aufgelistet.

Erwägen Sie, Ihre demografischen Merkmale auf einzustellen Öffentlichkeit wenn Sie möchten, dass Ihre PWA ein breiteres Publikum erreicht. Befindet sich die App aber gerade in der Testphase, dann ist es besser, ihr das Tag Private/Unlisted zuzuweisen, sie ausgiebig zu testen und erst öffentlich zu machen.

Außerdem gibt es keinen festen Zeitrahmen, in dem Ihre App verifiziert wird. Dies hängt normalerweise von der Art der App ab, die Sie eingereicht haben. Und was auch immer die Ergebnisse sein werden, das Team wird Sie per E-Mail darüber informieren.

Damit schließen wir diesen Leitfaden zum Erstellen und Installieren der PWA-App ab. Wenn Sie Fragen zu den oben genannten Anweisungen haben, lassen Sie es uns wissen.

Schließlich sind hier die empfohlenen Webbrowser für Ihren Computer und Ihr Mobiltelefon, die Sie ausprobieren sollten.

Wenn Sie irgendwelche Gedanken haben Wie erstelle und installiere ich Progressive Web App auf dem Computer? , dann schauen Sie gerne unten vorbei