UX steht seit einiger Zeit im Mittelpunkt der modernen Webentwicklung. Dies wird durch verschiedene Faktoren beeinflusst, darunter Seitenladegeschwindigkeit, Lesbarkeit, Benutzerfreundlichkeit und Design. Aber jetzt, dass mehr Benutzer bevorzugen das mobile Surfen im Internet Über die Verwendung von Desktops sollte jede Website - sei es ein Nischenblog oder ein E-Commerce-Shop - beginnen, der Mobilitätsfreundlichkeit Priorität einzuräumen .
Heutzutage ist es einfach, ein auf Mobilgeräte ansprechendes Thema anzuwenden und Tools wie Google zu verwenden Mobilfreundlicher Test um zusätzliche Empfehlungen zur Optimierung Ihrer Website zu erhalten. Aber wenn Sie die Dinge auf die nächste Ebene bringen möchten, können Sie eine Progressive Web App (PWA) entwickeln, um Ihren mobilen Nutzern frische und unvergessliche neue Erlebnisse zu bieten.
Ein PWA nutzt moderne Webtechnologien, um App-ähnliche Funktionen zu ermöglichen. Im Gegensatz zu herkömmlichen mobilen Websites muss ein PWA beim Laden neuer Inhalte nicht die gesamte Seite aktualisieren, noch muss eine Internetverbindung verfügbar sein. Sie sind auch installierbar, was bedeutet, dass Benutzer sie problemlos wiederverwenden können, indem sie eine Startbildschirm-Verknüpfung hinzufügen.
Progressive Web-Anwendungen haben das Potenzial, das nächste große Ding für das mobile Web zu sein. Dies wurde ursprünglich von Google vor ein paar Jahren im Jahr 2015 vorgeschlagen. Aber innerhalb so kurzer Zeit hat es bereits viel Aufmerksamkeit auf sich gezogen, weil es relativ einfach zu entwickeln ist und für die Benutzererfahrung der Anwendung.
-Rahul Varshneya, Mitbegründer der App-Entwicklungsgesellschaft Arkenea .
Ein PWA ist ein großes Projekt, das die Richtung Ihrer mobilen Internetpräsenz in Zukunft bestimmen könnte. Wenn Sie PWA jedoch völlig neu kennen, finden Sie hier sieben Tools und Ressourcen, die Sie auf den richtigen Weg bringen:
Wenn es um die Entwicklung eines PWA geht, müssen Sie ein tieferes Verständnis darüber haben, zu was sie fähig sind.
Um PWAs in Aktion zu sehen, können Sie sich darauf beziehen PWA.rocks Beispiele in verschiedenen Kategorien, darunter Business, Games, Shopping und Social. Dies wird Ihnen helfen zu visualisieren, wie Ihre zukünftige PWA aussehen könnte. Sie können sich auch an den verfügbaren Beispielen inspirieren lassen, wenn Sie sich vorstellen, was Ihr PWA den mobilen Benutzern bietet.
Schlagen ist ein kostenloses Open-Source-Tool, das Ihnen bei Model-View-View-Modell- oder MVVM-Bindungen helfen kann. Auf diese Weise können Sie die Codierung von JavaScript-Benutzeroberflächen vereinfachen, indem Sie Ansichten und deklarative Bindungen definieren, die von viewmodel- Eigenschaften gesteuert werden.
Die Plattform läuft ausschließlich mit JavaScript, das mit allen gängigen Browsern und Web-Frameworks funktioniert. Die Knockout-Bibliothek kann auch ohne umfangreiche Umschreibungen problemlos in bestehende Websites integriert werden.
Der schnellste Weg zum Erstellen eines PWA ist zu verwenden PWABuilder und bauen Sie schnell einen Service-Mitarbeiter für die Offline-Funktionalität auf, indem Sie "offline.html" von Ihrem Webserver ziehen und bereitstellen, wenn Benutzer die Internetverbindung verlieren. Sie können Ihre PWA auch an den App Store für Android- und iOS-Geräte senden.
Um PWABuilder zu verwenden, müssen Sie nur die URL Ihrer Website eingeben und dann die zusätzlichen Details wie Ihren Namen, die Beschreibung der Website und das bevorzugte Symbol eingeben. Sie können auch bestimmte Eigenschaften wie PWA-Bildschirmausrichtung, Sprache und Hintergrundfarbe problemlos ändern. Die Plattform generiert dann basierend auf den von Ihnen angegebenen Informationen automatisch ein Manifest.
JavaScript ist normalerweise die Einführungssprache, die von Studenten gelernt wird, die Webentwicklung lernen möchten. Wenn Sie ein erfahrener Java- oder .NET-Entwickler sind, dann AngularJS ist eines der besten JavaScript-Frameworks, die Sie für Webanwendungen verwenden können. Nichtsdestotrotz bietet ihre Website eine Menge an Leitfäden, Tutorials und Ressourcen, die Ihnen helfen werden, sich auf der Plattform zurecht zu finden.
Die neueste Version, Angular v4.0, bietet dieselbe Umgebung, unabhängig davon, ob Sie für Mobilgeräte oder Desktops entwickeln. Falls Sie denken, dass Angular zu komplex für Ihre Bedürfnisse ist, können Sie sich stattdessen dafür entscheiden Reagieren -Eine JavaScript-Bibliothek, die auf die UI-Entwicklung zugeschnitten ist. Eine andere Alternative ist Polymer , die Sie mit Vorlagen und anderen wiederverwendbaren Komponenten versorgen können, die den Prozess der PWA-Entwicklung beschleunigen können.
Ein PWA ist nicht gerade ein DIY-Projekt für Self-Made-Blogger oder Affiliate-Vermarkter, aber es kann immer noch mit den richtigen Ressourcen getan werden. Wenn Sie bereits Erfahrung mit Content-Management-Systemen haben, aber keine Ahnung von der Entwicklung von Web-Anwendungen haben, können Sie sich mit den Grundlagen vertraut machen Google-Entwickler , eine Bibliothek mit Ressourcen, mit der Sie lernen können, wie man programmiert.
Google-Entwickler haben ein umfassendes Tutorial, wie PWAs funktionieren, wie man es erstellt und wie es korrekt ausgeführt wird. Es enthält auch weitere Grundlagen wie das Aktivieren des "Zum Startbildschirm hinzufügen" -Banner und die Verwendung von HTTPS.
Webpaket ist ein äußerst nützliches Tool zum Bündeln Ihrer JavaScript-App-Ressourcen, einschließlich Nicht-Code-Assets wie Schriftarten und Bilder. Diese werden als JavaScript-Objekte behandelt, wodurch sie schneller geladen werden können. Die Plattform erleichtert auch die Verwaltung von Abhängigkeiten erheblich.
Denken Sie daran, dass Webpack eine steile Lernkurve hat, was bedeutet, dass Sie stundenlang nach Tutorials und Anleitungen suchen können. Die auf ihrer Website verfügbaren Lernressourcen und Dokumentationen sind jedoch nicht anfängerfreundlich. Die gute Nachricht ist, dass Webpack in vielen anderen Bereichen, einschließlich der Dokumentationsabteilung von Angular 4.0, ausführlich behandelt wird.
Endlich, GitHub ist eine Community-gesteuerte Website, die Repositories von Projekten verwaltet. Es deckt eine breite Palette von programmbezogenen Themen ab, darunter JavaScript- und PWA-Service-Mitarbeiter. In der Tat können Sie die PWA.rocks und Webpack-Repositories innerhalb der Plattform finden. Dies wird Ihnen helfen, Ihr Verständnis zu vertiefen oder sogar zur Weiterentwicklung beizutragen.
Heute gibt es eine Handvoll Repositories mit PWAs auf GitHub. Sie können von diesen Projekten lernen oder ein eigenes Repository erstellen, während Sie mit Ihrem ersten PWA experimentieren. GitHub verfügt nun auch über Projektmanagementfunktionen, mit denen Sie nahtlos mit anderen Entwicklern zusammenarbeiten können.
Progressive Web Apps sind die Zukunft der mobilen Web-Erlebnisse, aber nicht viele Marken verwenden sie derzeit. Mit den oben genannten Tools können Sie nun ein herausragendes PWA erstellen und eine autoritative Präsenz aufbauen. Beachten Sie, dass sich PWA-Tools, -Ressourcen und -Praktiken mit den sich ständig weiterentwickelnden Technologien der wichtigsten Online-Browser weiterentwickeln.