Anmerkung des Herausgebers: Hallo, dieses Dokument bietet einen \u00dcberblick \u00fcber die Erstellung einer PWA-App f\u00fcr den Einstieg. M\u00f6glicherweise erhalten Sie keine vollst\u00e4ndigen technischen Details. <\/p>\n
Progressive Web-Apps, besser bekannt als Chrome-Apps, sind kleine Web-Apps, die gr\u00f6\u00dftenteils aus eingebetteten JavaScripts bestehen und mit allen g\u00e4ngigen Browsern kompatibel sind.<\/p>\n
Obwohl sie leichtgewichtig sind, k\u00f6nnen sie die meisten erforderlichen Funktionss\u00e4tze enthalten. Die Installation dauert nur ein paar Sekunden und der Grund f\u00fcr die Beliebtheit von PWA liegt darin, dass es alles bietet, was man sich vorstellen kann.<\/p>\n
Diese Apps bieten so viele Vorteile, dass viele Verlage damit begonnen haben, ihre PWA-Pendants in ihre Websites zu integrieren.<\/p>\n
Wenn Sie also ein Herausgeber oder Entwickler sind, der auf diesen Zug aufspringen m\u00f6chte, ist dieser Leitfaden hier, um Ihnen zu helfen.<\/p>\n
Hier finden Sie detaillierte Anweisungen, die Ihnen beim Erstellen, Testen, Versenden und anschlie\u00dfenden Installieren von Progressive Web Apps auf Ihrem Computer helfen.<\/p>\n
Erstellen Sie einen leeren Ordner auf Ihrem Desktop und geben Sie der PWA-App denselben Namen wie dem Ordner.<\/p>\n
Danach m\u00fcssen Sie in diesem Ordner programmieren und eine Manifestdatei erstellen. Verwenden Sie dazu einen Texteditor wie Notepad++<\/strong> und erstellen Sie ein neues JSON oder JavaScript-Objekt-Notation<\/strong> Archiv.<\/p>\n Geben Sie die gew\u00fcnschten Informationen in die Manifestdatei f\u00fcr Ihre PWA-Anwendung ein. Es muss folgende Werte haben:<\/p>\n Hier ist beispielsweise eine JSON-Datei f\u00fcr eine Lesezeichenanwendung, die Sie auschecken k\u00f6nnen:<\/p>\n Sobald die Kodierung abgeschlossen ist, m\u00fcssen Sie \u00fcberpr\u00fcfen, ob die Codes das richtige Format haben. Dazu k\u00f6nnen Sie ein JSON-Validierungstool wie JSONLint verwenden.<\/p>\n Wenn die Validierung erfolgreich ist, speichern Sie diese Datei als manifest.json.<\/p>\n Als N\u00e4chstes m\u00fcssen Sie ein Logo f\u00fcr Ihre App entwerfen. Stellen Sie sicher, dass die Gr\u00f6\u00dfe stimmt 128p x 128p<\/strong>. Sobald das Logo erstellt ist, speichern Sie es als 128.png im selben Ordner, in dem sich Ihre JSON-Datei befindet.<\/p>\n Das ist alles. Sie haben erfolgreich die gew\u00fcnschte Miniaturansicht einer PWA-App erstellt. Jetzt stellen wir es auf die Probe.<\/p>\n Starten Sie den Chrome-Browser auf Ihrem PC und gehen Sie zum folgenden Speicherort: chrome:\/\/extensions\/, um die Chrome-Erweiterungsseite zu \u00f6ffnen. Aktivieren Sie die Entwicklermodus<\/strong> Wechseln Sie oben rechts auf der Seite und klicken Sie auf die Schaltfl\u00e4che \u201eLoad Unpacked\u201c.<\/p>\n Navigieren Sie nun im Explorer-Fenster zum PWA-Anwendungsordner, w\u00e4hlen Sie ihn aus und klicken Sie auf die Schaltfl\u00e4che \u201eOrdner ausw\u00e4hlen\u201c.<\/p>\n \u00d6ffnen Sie nach dem Laden der App einen neuen Tab und klicken Sie im Chrome-Browser auf das Apps-Symbol. Alternativ k\u00f6nnen Sie chrome:\/\/apps\/ in der Adressleiste aufrufen.<\/p>\n W\u00e4hlen Sie Ihre erstellte PWA aus und pr\u00fcfen Sie, ob sie ordnungsgem\u00e4\u00df funktioniert oder nicht. Wenn Sie auf Probleme sto\u00dfen, nehmen Sie die erforderlichen \u00c4nderungen an manifest.json vor und laden Sie das Paket in Chrome \u00fcber die oben erw\u00e4hnte Option \u201eOhne Verpackung hochladen\u201c neu.<\/p>\n \u00dcberpr\u00fcfen Sie es nun noch einmal und ver\u00f6ffentlichen Sie es im Chrome Web Store, wenn Sie alle Fehler behoben haben.<\/p>\n Bevor Sie mit der Ver\u00f6ffentlichung der App fortfahren, m\u00fcssen Sie zun\u00e4chst Ihre Zielgruppen \u00fcberpr\u00fcfen. Sie werden in vier Segmente eingeteilt:<\/p>\n Sobald Sie eine Entscheidung getroffen haben, beginnen wir mit den Schritten zur Ver\u00f6ffentlichung Ihrer App. Erste, Erstellen Sie eine ZIP-Datei<\/strong> aus Ihrem App-Paket, das die Dateien 128.png und manifest.json enth\u00e4lt.<\/p>\n Als n\u00e4chstes m\u00fcssen Sie sich registrieren als Chrome Web Store-Entwickler<\/strong>. Besuchen Sie diese Website und folgen Sie den Anweisungen auf dem Bildschirm, um sich als Chrome Web Store-Entwickler zu registrieren.<\/p>\n Nachdem Sie Ihr Konto erstellt haben, rufen Sie das Chrome-Entwickler-Dashboard auf und melden Sie sich mit Ihren Anmeldeinformationen an. Klicke auf F\u00fcge neuen Gegenstand hinzu<\/strong> > W\u00e4hlen Sie die Datei aus<\/strong> und navigieren Sie zur ZIP-Datei Ihrer Bewerbung; W\u00e4hlen Sie es aus und klicken Sie auf die Schaltfl\u00e4che \u201eHochladen\u201c.<\/p>\n Sobald die Datei hochgeladen ist, m\u00fcssen Sie die zus\u00e4tzlichen Details eingeben. Geben Sie die Details ein und klicken Sie oben rechts auf die Schaltfl\u00e4che \u201eZur \u00dcberpr\u00fcfung einreichen\u201c.<\/p>\n Aktivieren Sie anschlie\u00dfend das Kontrollk\u00e4stchen, wenn Sie die PWA-App mithilfe der automatischen Ver\u00f6ffentlichung ver\u00f6ffentlichen m\u00f6chten, nachdem sie die Pr\u00fcfung bestanden hat, und klicken Sie im Best\u00e4tigungsdialog auf \u201eZur Pr\u00fcfung einreichen\u201c.<\/p>\n Ihre Bewerbung wird gepr\u00fcft und auf der ver\u00f6ffentlicht Virtueller Chrome-Store <\/strong>wenn alles in Ordnung ist (wenn Sie die Zielgruppe festgelegt haben). <\/p>\n Au\u00dferdem erhalten Sie den Bewertungsstatus und ver\u00f6ffentlichen ihn automatisch, wenn alles gut aussieht.<\/p>\n Nachdem Ihre App nun ver\u00f6ffentlicht ist, installieren Sie sie auf Ihrem PC.<\/p>\n Gehen Sie zum Chrome Web Store und \u00f6ffnen Sie die Seite mit den App-Details. Klicken Sie auf die Schaltfl\u00e4che \u201eZu Chrome hinzuf\u00fcgen\u201c (Beispiel unten).<\/p>\n Klicken Sie im angezeigten Best\u00e4tigungsdialog auf die Schaltfl\u00e4che \u201eErweiterung hinzuf\u00fcgen\u201c.<\/p>\n Das ist alles; Die Anwendung wurde auf Ihrem PC installiert und ist unter chrome:\/\/applications\/ verf\u00fcgbar.<\/p>\n Wenn Sie Ihre PWA-App zur Website hinzugef\u00fcgt haben, wird der Vorgang etwas anders sein.<\/p>\n Gehen Sie zu Ihrer Website und klicken Sie dann auf das Symbol \u201eInstallieren\u201c ganz rechts in der Omnibox (als Referenz nehmen wir die Website zur Bildkomprimierung von Google Squoosh).<\/p>\n Klicken Sie im Best\u00e4tigungsfeld auf \u201eInstallieren\u201c. Anschlie\u00dfend wird die PWA installiert.<\/p>\n Wir vervollst\u00e4ndigen die Anleitung zum Erstellen einer Chrome-Anwendung. Ebenso wurden die Schritte zum Ver\u00f6ffentlichen und anschlie\u00dfenden Installieren auf Ihrem Computer aufgef\u00fchrt.<\/p>\n Erw\u00e4gen Sie, Ihre demografischen Daten auf festzulegen \u00d6ffentlich <\/strong>wenn Sie m\u00f6chten, dass Ihre PWA ein breiteres Publikum erreicht. Befindet sich die App jedoch derzeit in der Testphase, ist es am besten, sie mit dem Tag \u201ePrivat\/Nicht gelistet\u201c zu kennzeichnen, sie gr\u00fcndlich zu testen und sie nur \u00f6ffentlich zu machen.<\/p>\n Dar\u00fcber hinaus gibt es keinen festen Zeitrahmen f\u00fcr die Pr\u00fcfung Ihres Antrags. Dies h\u00e4ngt in der Regel von der Art der von Ihnen eingereichten Bewerbung ab. Unabh\u00e4ngig vom Ergebnis werden Sie vom Team per E-Mail benachrichtigt.<\/p>\n Wenn Sie die PWA-App nicht mehr im Browser haben m\u00f6chten, deinstallieren Sie sie von der Erweiterungsseite.<\/p>\n Damit schlie\u00dfen 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.<\/p>\n Wenn Sie schlie\u00dflich Ideen oder Kommentare zum Erstellen und Installieren einer progressiven Web-App auf dem Computer haben, k\u00f6nnen Sie diese gerne im Kommentarfeld unten hinterlassen. Sie k\u00f6nnen auch veraltete Informationen melden.<\/p>\n Der Artikel wurde von Sadique Hassan beigesteuert; .<\/p>\n ","protected":false},"excerpt":{"rendered":" Anmerkung des Herausgebers: Hallo, dieses Dokument bietet einen \u00dcberblick \u00fcber die Erstellung einer PWA-App f\u00fcr den Einstieg. M\u00f6glicherweise erhalten Sie keine vollst\u00e4ndigen technischen Details. Progressive Web-Apps, besser bekannt als Chrome-Apps, sind kleine Web-Apps, die gr\u00f6\u00dftenteils aus eingebetteten JavaScripts bestehen und mit allen g\u00e4ngigen Browsern kompatibel sind. Obwohl sie leichtgewichtig sind, k\u00f6nnen sie die meisten erforderlichen […]<\/p>\n","protected":false},"author":1,"featured_media":891977,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","fifu_image_url":"https:\/\/blogging-techies.com\/wp-content\/uploads\/2023\/06\/1910-BLOG.webp","fifu_image_alt":""},"categories":[7],"tags":[],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/891976"}],"collection":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/comments?post=891976"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/891976\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media\/891977"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media?parent=891976"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/categories?post=891976"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/tags?post=891976"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
PWA-App-Test<\/h2>\n
Ver\u00f6ffentlichen Sie Ihre App im Chrome Web Store<\/h2>\n
\n
Installieren Sie die PWA-App auf dem Computer<\/h2>\n
Endeffekt<\/h2>\n