So codieren Sie eine progressive Web App News-Website

In den letzten zwei Wochen habe ich an einem persönlichen Projekt namens The Global Upvote gearbeitet. Die globale Aufwertung fasst die am besten bewerteten Artikel aus dem gesamten Web zusammen, die alle 60 Sekunden zusammengefasst und aktualisiert werden.

Dieser Artikel konzentriert sich darauf, wie ich The Global Upvote für angehende Entwickler implementieren konnte. Ich habe einen separaten Artikel über den Designprozess dahinter geschrieben. Diese beiden Geschichten scheinen völlig getrennt zu sein. Der Design- und Entwicklungsprozess war jedoch im wirklichen Leben eng miteinander verbunden.

Beachten Sie, dass ich hier einen Schwesterartikel über das Entwerfen dieser Progressive Web App-Nachrichtenwebsite geschrieben habe.

Daten finden

Im Design gibt es ein Konzept von Content-First. Content-First Design sagt, dass Sie um den Inhalt herum entwerfen müssen. Dazu musste ich sicherstellen, dass ich die richtigen Daten abrufen konnte. Bevor ich mit der eigentlichen Front-End-Arbeit begann, arbeitete ich mit der Reddit-API und meinem Node-Server.

Ich wusste, dass ich zwei Teile des Inhalts von Reddit erfassen wollte:

  1. Die Top-Beiträge von r / WorldNews für ihre Schlagzeilen
  2. Kommentar eines Bot-Benutzers, der die Geschichte zusammenfasst

Zum Glück gab es einen großartigen Node-Wrapper für die API namens Snoowrap. Es war einfach zu bedienen und ließ mich in kürzester Zeit Inhalte bekommen.

Eine große Sache, die ich bei diesem Projekt gelernt habe, war das Anforderungsmanagement. In der Vergangenheit hatte ich meinen Knotenserver jedes Mal als API-Anforderer verwendet, wenn ein Benutzer meine App besuchte. Aber ich hatte eine offensichtliche Offenbarung.

Ich könnte die kleine Menge an Daten (Geschichten) auf meinem Server behalten und sie einmal pro Minute mit einem einfachen aktualisieren setInterval. Dadurch wurde das Risiko eines Missbrauchs meiner Reddit-API-Grenzwerte und verkürzter Ladezeiten für Storys nicht mehr erhöht, da ich nicht jedes Mal die Reddit-API anpingen musste.

Progressiv bleiben

Möchten Sie das billige, schmutzige Geheimnis kennen, wie man in React eine progressive Web-App erstellt? Verwenden Sie einfach die Create-React-App. Die Mitarbeiter dieses Projekts haben hervorragende Arbeit geleistet, indem sie Servicemitarbeiter für nahezu sofortige Ladevorgänge und eine Manifestdatei für Ihre Metadaten hinzugefügt und das Webpack so gut wie möglich gebündelt haben. In der Vergangenheit musste ich viel für PWAs (Progressive Web Apps) arbeiten und schrieb sogar ein Tutorial, um sie zu perfektionieren.

Dies war das erste Mal, dass ich an einem offline-freundlichen Modus für Chrome und Firefox arbeitete, um Dinge wie das Lesen von Artikeln zu erledigen, bevor mein Computer mit WLAN verbunden war.

Die erste Hälfte bestand darin, Dinge zu tun, wenn sich die Internetverbindung mithilfe von Ereignis-Listenern änderte. Auf diese Weise kann eine neue Verbindung zum Internet das Abrufen von Storys auslösen, und eine unterbrochene Verbindung kann den Benutzer benachrichtigen, dass er offline ist.

In der zweiten Hälfte des Offline-Modus wurden jedes Mal, wenn sie abgerufen wurden, neue Storys auf dem Gerät des Benutzers gespeichert. Ich habe LocalStorage zum ersten Mal verwendet und war angenehm überrascht, wie einfach es war.

Ein letzter Teil der PWA war die Verbesserung des Wahrnehmungsgeschwindigkeitsindex. Sie können diese benutzerzentrierte Metrik anzeigen, indem Sie Chrome DevTools öffnen und eine Prüfung ausführen. Um diese Punktzahl zu verbessern, habe ich Skelette erstellt, die beim Abrufen des Status meiner App angezeigt werden.

Plugin einstecken

Ich hatte festgestellt, dass der Benutzer die Erfahrung als neue Registerkarte für Chrome und Firefox speichern soll. Die Browser unterstützen nativ das Festlegen einer Homepage. Dadurch haben Sie jedoch nicht sofort die Kontrolle über die URL-Leiste. Dies war ein wichtiges Detail, da ein Benutzer nicht jedes Mal, wenn er einen neuen Tab öffnet, auf die URL-Leiste klicken muss.

Ich befürchtete, dass ich in die Tiefe der Entwicklung von Browsererweiterungen eintauchen würde. Dies war etwas, mit dem ich außer einem Gitterprüfer nicht vertraut war, um meine visuellen Fähigkeiten zu verbessern. Wieder einmal wurde mir diese Lösung auf einem Silbertablett übergeben. Google nimmt eine ähnliche Erweiterung in seine Beispieldownloads auf. Ich habe in kürzester Zeit mit der Global Upvote Tab Extension gearbeitet. Es waren nicht einmal Änderungen für die Einreichung bei Firefox erforderlich!

Das Endergebnis

Vom Standpunkt der Entwicklung aus mochte ich all die verschiedenen Lösungen, die ich für The Global Upvote zusammenstellen konnte. Diese Lösungen zeigen mir, dass die Web-Community immer besser zusammenarbeitet, um die Entwicklungserfahrung weniger frustrierend zu gestalten. Mit dem Chrome DevTools Audit wurde früher auch die Google Lighthouse Extension so einfach wie nie zuvor.

Der gesamte Quellcode wurde als Open-Source-Code bereitgestellt, falls Sie sich umsehen oder ihn für Sie arbeiten lassen möchten.

Einige schnelle Dinge zu beachten:

  • Wo sind die CSS-Dateien?!

    Da sind keine. Ich verwende gestylte Komponenten, um Stile direkt an ihre Komponente anzuhängen!

    Schauen Sie sich diesen Vortrag an, den ich bei IBM darüber gehalten habe, warum CSS-in-JS wahnsinnig gut ist: //vimeo.com/230614037

  • Wo ist der Quellcode für Ihre Tab-Erweiterung?

    Überprüfen Sie es im separaten Repo für Global Upvote Tab.

  • Wie fange ich an, dies lokal auszuführen?

    Lesen Sie die Dokumentation zu Create-React-App, falls Sie dies noch nicht getan haben.

    Viel Wow. Sie benötigen außerdem eine Datei keys.jsonim Stammverzeichnis mit Ihren Informationen für Snoowrap. Es sollte so aussehen:

{ "userAgent": "random-term", "clientId": "FromYourRedditAPISettings", "clientSecret": "FromYourRedditAPISettings", "username": "YourRedditUsername", "password": "YourRedditPassword" }

Ich hoffe, Ihnen hat dieser Fall gefallen!

Wieder habe ich hier einen Schwesterartikel darüber geschrieben, wie man diese Progressive Web App-Nachrichtenwebsite gestaltet.

Für weitere Informationen: Sie können mich gerne über Kommentare, E-Mail oder @seejamescode kontaktieren. Ich arbeite in ATX für IBM Design und liebe es immer, mit der Webdesign-Community zu sprechen. Hinterlassen Sie Ihre Fragen und ich werde versuchen, sie für Sie zu beantworten!