PWA-Serie – EP1 – PWA installierbar machen (auf Android-Gerät getestet)

#pwa #progressivewebapp #pwainstallation #nodejs #httpserver #vanillajs Dieses Video ist das erste einer Reihe von Progressive Web Apps (PWAs), die im Wesentlichen eine Sammlung von Funktionen sind, die Ihrer Web-App nach und nach hinzugefügt werden können, damit sie funktioniert und aussieht wie eine native mobile App. Die Web-App kann installierbar gemacht werden, sodass Sie mit einem einzigen Fingertipp darauf zugreifen können, wie alle nativen mobilen Apps offline durch Caching, Hintergrundsynchronisierung und Benachrichtigungen arbeiten. All dies wird durch Browserbibliotheken und Service Worker als kritischer Baustein von PWAs ermöglicht. Das Ziel dieser Serie ist es, all diese Funktionen schrittweise durch einen projektbasierten Ansatz unter Verwendung einer einfachen E-Commerce-Plattform zu vermitteln und zu demonstrieren. Der gesamte Entwicklungsprozess der E-Comm-Plattform wird jedoch nicht abgedeckt. Nur Teile davon enthalten verschiedene Funktionen, die in dieser Serie besprochen werden. Als erste Episode wird es einen Code-Walk-Through des Starter-Codes und eine Einführung in andere relevante Ressourcen geben. In dieser Episode werden nur die Kriterien behandelt, wie Sie Ihre Web-App als PWA installierbar machen und wie Sie Ihre Codeänderungen auf einem Android-Emulator und auch auf einem echten Android-Gerät testen (indem Sie es über USB mit Ihrer Workstation verbinden). Bleiben Sie dran für weitere Inhalte in dieser Serie zu PWAs. In den nächsten Videos werden verschiedene Caching-Strategien behandelt und wie sie genutzt werden können, damit Ihre PWA offline funktioniert. Da das Video fast eine Stunde dauert, wurden der Zeitachse beschriftete Abschnitte hinzugefügt, damit Sie zu den Teilen des Videos gelangen, die Sie interessieren. GitHub Repo: ——————— Timeline: ————– 00:00 Einführung 01:30 Tour of Beispiel-Webapp – Eine EComm-Plattform 04:04 Code-Walkthrough – package.json, Projektstruktur, index.html 07:48 Näherer Blick auf Favicon & Responsive Image Rendering in Aktion 08:33 Weitere Code-Walkthrough – Javascript Teil 12:32 Kriterien (Theorie ) – PWA installierbar machen 14:50 Manifestdatei (Theorie) 19:11 Servicemitarbeiter (Theorie) 21:46 Servicemitarbeiter – Beispielcode (Theorie) 25:06 Implementieren der Manifestdatei (manifest.json) 30:34 Implementieren Servicemitarbeiter (sw.js) 40:27 Implementieren von Logik zum Aufschieben der PWA-Installationsaufforderung 47:18 Testen der EComm-PWA auf einem Android-Emulator (virtuelle mobile Umgebung) 52:00 Verbinden eines echten Android-Geräts mit Ihrer Workstation 54:54 Testen der EComm-PWA auf einem echten Android-Gerät 57:03 Zusammenfassung Ressourcen: —————— App-Installationskriterien: Web-App-Manifest: Service Worker: Entwickleroptionen auf Android aktivieren: Musik Attribution: —————————– Musik: Spark Of Inspiration von Shane Ivers – Lizenziert unter Creative Commons Namensnennung 4.0 International License Musik gefördert von Sweet Dreams by BatchBug | Musik, die von Creative Commons gefördert wird Attribution 3.0 Unported License Feel Free by Free Music | Musik, die von Creative Commons Attribution 3.0 Unported License gefördert wird

Video Statistik:

78x angesehen // Bewertung: 5.00// Likes: 3 // Dislikes:

Standardbild
Tom Scharlock
PWA.ist ein PWA App Store, ein Blog, eine Video Wissensseite und die Agenturpräsenz der PRGRSV _WEB /nd APP //Agentur Arnstadt. Tragen Sie noch heute Ihre LIEBLINGS PWA ein, kontaktieren Sie uns: /Kontakt/ oder beteiligen Sie sich einfach an der Diskussion. Meine Biografie
Artikel: 169

Schreibe einen Kommentar

ajax-loader