Die Zukunft von Web-Apps und nativen Apps
Die Kluft zwischen nativen Apps und Web-Apps verringert sich. Lassen Sie uns also die sich entwickelnde Welt der Web-Apps erkunden und sehen, wie sie uns helfen können, unsere Apps zu verbessern.
Die Möglichkeiten von Websites und Apps haben sich seit den Anfängen statischer Seiten dramatisch verändert. Auch in jüngster Zeit haben wir bedeutende Fortschritte erlebt, darunter:
Native Animationen, einfache und flexible Layouts, realistische 3D-Grafiken und Streaming-Videos sind auf dem Vormarsch. Ganz nach dem Motto „aber nur wenig“. Doch es bleibt noch viel zu tun. Vor allem, wenn das Web effektiv mit nativen Betriebssystemen konkurrieren will.
Fachautoren und Browserentwickler haben nach Funktionen gesucht, die das native Betriebssystem und seine Anwendungen populärer machen würden. Nun sehen wir, wie das Web selbst aktiv wird und versucht, die Lücken in den Funktionen des Betriebssystems zu schließen. Dies hat im Wesentlichen zu einem Fokus auf einige wenige Funktionen geführt, von denen manche leicht, andere hingegen schwieriger zu implementieren sind. Die folgenden Titel erheben keinen Anspruch auf Vollständigkeit, decken aber die wichtigsten Punkte ab.
Native Programme umfassen:
- Link: Es ist möglich, dass Sie über eine bestimmte URL zur Webanwendung weitergeleitet werden.
- Reaktiv: Mithilfe von Tools wie Media Queries lassen sich komplexe Layouts erstellen, die in verschiedenen Formaten (Ausrichtung, Auflösung, Bildschirmgröße usw.) funktionieren. Tatsächlich ist das Standard-Web-Layoutmodell von Natur aus responsiv, was es besonders gut für die Textbearbeitung geeignet macht.
- Datengetrieben: Mit HTML lassen sich Bedeutung und Struktur vermitteln, und das Web eignet sich hervorragend zur Datenverarbeitung.
- Fortschrittlich: Sie können Webanwendungen so gestalten, dass moderne Browser die neuesten Funktionen nutzen können und gleichzeitig auch in älteren Browsern ein akzeptables Benutzererlebnis geboten wird.
- Sicherheit: Das Web bietet Funktionen, die Anwendungen mithilfe des Single-Origin-Sicherheitsmodells und HTTPS schützen können. Dank eines Programms wie Let's Encrypt Das Absichern von Webanwendungen ist noch einfacher geworden.
Das Internet hat jedoch auch gewisse Vorteile, wie zum Beispiel:
- Installationsfähigkeit: Die Verfügbarkeit von Apps auf dem Gerät und die nahtlose Integration ins Betriebssystem sorgen für ein angenehmes Benutzererlebnis – noch besser wäre es, wenn die Apps ein kleines Symbol auf dem Startbildschirm hätten und sich im Vollbildmodus oder in einem kleinen Fenster öffnen ließen. Das sind doch einfache Dinge, oder?
- Auffindbarkeit: US-amerikanische Web-Fans sind geschlossenen App-Stores gegenüber größtenteils abgeneigt. Man kann jedoch nicht leugnen, dass sie ihre Methoden zur App-Suche verbessert haben – obwohl manche argumentieren, dass selbst die besten geschlossenen App-Stores aufgrund von Überfüllung scheitern.
- Offline sein: Internetverbindungen sind weltweit verfügbar. Aber auf 100% kann man sich nicht verlassen. Man hat aber das Problem, eine App nicht nutzen zu können, weil man offline ist und es keine andere Möglichkeit gibt.
- Charme: Sobald ein Nutzer Ihre App verwendet, ist die halbe Miete geschafft. Doch wie hält man ihn bei der Stange und informiert ihn regelmäßig? Entwickler nativer Apps nutzen schon lange Push-Benachrichtigungen, um ihre Nutzer auf dem Laufenden zu halten.
- Schnell: Viele glauben, dass nativer Code besser funktioniert als Webcode, aber wie Sie später lesen werden, verringert sich diese Kluft rapide.
Die Webseite pokedex.org ist das beste Beispiel für eine fortschrittliche Webanwendung und dient gleichzeitig als unterhaltsames Hobby.
√Wir möchten das Web so gestalten, dass nützliche Anwendungen in nativen Apps zugänglich sind, jedoch nicht auf Kosten der bewährten Grundlagen. Diese Bewegung wird als Web-App-Revolution bezeichnet und von Unternehmen wie Mozilla und anderen angeführt. Google Sie werden unterstützt.
√Wir werden uns später mit den neuen Technologien befassen, die solche Fortschritte ermöglichen, aber zunächst wollen wir uns dem Web etwas nähern, um den nativen Apps einen Schritt voraus zu sein.
√Anmerkung: An welchen interessanten Dingen arbeiten native Betriebssysteme andererseits, um die Kluft zwischen sich und dem Web zu überbrücken? Zum Beispiel die an Rube Goldberg erinnernde Initiative, die tiefere Verknüpfungen ermöglichte.
Was war vorher
Es ist wichtig, zuerst offline zu gehen.
Erfahrene Fans möchten Web-Apps entwickeln, die offline funktionieren und sich standardmäßig nur für Updates mit dem Internet verbinden.
Apps mit nativen Funktionen sind kein neues Konzept. Schon früh gab es zahlreiche “Web”-Pakete, App-Vorlagen, die an verschiedenen Stellen – beispielsweise in der Chrome-App – verfügbar waren und die Installation genehmigter Pakete auf dem Gerät zur Offline-Nutzung sowie den Zugriff auf Hardware usw. ermöglichten.
Wir sind auf den Begriff “Hybrid-Apps” gestoßen, beispielsweise bei Cordova und Electron. Diese ermöglichen es Entwicklern, Apps mit Webtechnologien zu erstellen und sie anschließend in native Apps für iOS und Android zu portieren. Solche Apps sind sehr beliebt. Allerdings müssen mehrere Versionen derselben App erstellt und verteilt werden, und der Funktionsumfang ist eingeschränkt. “Einmal schreiben, überall ausführen” stimmt bekanntlich nicht ganz.
Zunächst einmal sind Single-Page-Anwendungen (SPAs) unbedingt zu erwähnen. Eine einzelne HTML-Seite dient als Hauptseite der Anwendung und lädt verschiedene Ansichten dynamisch per XHR (oder einer ähnlichen Methode), um Webanwendungen schneller und reaktionsfähiger zu machen. Dieses Anwendungsmodell wird von gängigen Frameworks wie Ember unterstützt. JavaScript und AngularJS bilden zusammen mit dem Offline-First-Ansatz die Grundlage für einen Großteil moderner Webanwendungen.
Installations- und Einrichtungsfunktionen
Im ersten Teil von „Erweiterte Web-Apps“ beschäftigen wir uns mit Installation und Einrichtung. Dadurch können Sie das Web-App-Design verwenden, das eine JSON-Datei erstellt, die Informationen über die Web-App enthält, wie z. B. Symbole, Name und Anzeigemodus, die beim Öffnen der App verwendet werden:
Mit einem solchen Code kann die Anwendung noch besser in das Hauptbetriebssystem integriert werden (Symbol auf dem Startbildschirm, Öffnen im Vollbildmodus anstelle des Browsers usw.) und sorgt außerdem für eine bessere Auffindbarkeit in der Anwendungsliste – sie erscheint beispielsweise in den Suchmaschinenergebnissen.
Diese Informationen werden bereits in Opera und Chrome auf Smartphones für die plattformübergreifende Integration genutzt, die Unterstützung für Firefox folgt in Kürze.
Offline
Und heute gibt es Service-Apps – eine neue Technologie in Firefox, Chrome und Opera, die es Entwicklern ermöglicht, Offline-Apps ähnlich wie AppCache und mit vielen weiteren Funktionen zu erstellen. Dies ist die niedrigste API-Ebene und daher deutlich komplexer. Dafür erhalten Entwickler aber auch mehr Kontrolle darüber, was ihre Dienste leisten sollen.
Die Speicherung von Assets ist hingegen eine ganz andere Sache. Eine Zeit lang schien es, als könnte etwas wie AppCache das Problem lösen, doch die Annahme, dass es eine Möglichkeit gäbe, eine App zu starten, war zu optimistisch, und Entwickler hatten nicht genügend Kontrolle über die Vorgänge.
Das Problem des Offline-Webs besteht schon erstaunlich lange, obwohl es auf den ersten Blick so einfach erscheint. Die Implementierung einer effektiven Offline-Technologie ist nämlich alles andere als einfach. Große Datenmengen offline zu speichern, ist hingegen kein Problem. Moderne Browser bieten schon seit Längerem APIs (Programmierschnittstellen) wie IndexedDB, und Web Storage wird seit dem Internet Explorer 8 unterstützt.
Eine Serveranwendung ist ein in einer separaten Datei geschriebener JavaScript-Code, der in einem eigenen Thread ausgeführt wird. Sie fungiert als Vermittler zwischen dem Internet und Ihren Anwendungen (sowie dem Browser). Wenn eine Anfrage gestellt wird, kann die Serveranwendung diese abfangen und anpassen, bevor sie an den Browser zur Verwendung weitergeleitet wird.
Um das Serviceprogramm nutzen zu können, müssen Sie es zuerst ausführen. () Navigator. serviceWorker. registrieren Registrieren Sie es auf der Startseite.
Navigator.Servicearbeiter.registrieren(‘'sw.js'’)
.Dann(Funktion(reg) {
// Führe eine Aktion zur Initialisierung der App durch.
});
Anschließend wurde es mithilfe des Installationsprogramms im Bereich „Dienstprogramme“ installiert. Manchmal werden diese wichtigen Dateien von allen Anwendungen gespeichert, die die Cache-API verwenden (die übrigens unabhängig von den Kommunikationsanwendungen genutzt wird).
Das.addEventListener(‘'installieren'’, Funktion(Ereignis) {
Ereignis.warte, bis(
Caches.offen(‘'v1'’).Dann(Funktion(Cache) {
zurückkehren Cache.addAll([
‘'/sw-test/'’,
‘'/sw-test/index.html'’,
‘'/sw-test/style.css'’,
‘'/sw-test/app.js'’
]);
})
);
});
Nachdem ein Ereignis-Listener in der Dienstanwendung auf Anfragen reagiert hat, sendet diese Code, sodass Entwickler das Ergebnis der Antwort anpassen können. So kann ein Entwickler beispielsweise Dateien, die sich kaum geändert haben (wie das UI-Design), in der Installation speichern lassen und bei Bedarf die im Repository gespeicherten Versionen (anstatt der Online-Version) verwenden. Und schon sind Offline-Anwendungen möglich.
Das.addEventListener(‘'bringen'’, Funktion(Ereignis) {
var Antwort;
Ereignis.antwortenMit(Caches.übereinstimmen(Ereignis.Anfrage).fangen(
// Code schreiben, um den Fall zu behandeln, in dem die angeforderte Datei
// ist noch nicht offline im Cache gespeichert
);
});
Es ist zu beachten, dass Serviceanwendungen nur mit HTTPS-Kommunikation funktionieren.
↑ Das obige Diagramm zeigt den Installationszyklus einer Serviceanwendung ↑
Den Nutzer erneut kontaktieren
Native Betriebssysteme nutzen schon lange Push-Benachrichtigungen – die Möglichkeit eines Servers, eine Nachricht an ein Client-System zu senden, um den Benutzer über Änderungen zu informieren – selbst wenn die Anwendung geschlossen ist. Vielleicht möchte eine Nachrichten-App dem Benutzer ein neues Update zukommen lassen? Oder vielleicht ist Ihr Pokémon-Spiel in die Jahre gekommen und braucht etwas Aufmerksamkeit? Diese Funktionen stehen uns nun auch für Webanwendungen zur Verfügung.
Um dieses Programm zu nutzen, muss, wie bereits erwähnt, ein Serviceprogramm auf der Programmseite installiert und aktiviert werden. Anschließend kann es durch Abonnieren genutzt werden. Sie können die Formel verwenden. () ServiceWorkerRegistration.pushManager.subscribe Verwenden Sie es, um die Aufgabe zu erledigen:
Navigator.Servicearbeiter.bereit.Dann(Funktion(reg) {
reg.pushManager.abonnieren({Nur für Benutzer sichtbar: WAHR})
.Dann(Funktion(Abonnement) {
// Benutzeroberfläche usw. im Hinblick auf das Abonnement aktualisieren.
// Status aktualisieren, um den aktuellen Benutzer auf dem Server zu abonnieren
var Endpunkt = Abonnement.Endpunkt;
var Schlüssel = Abonnement.getKey(‘'p256dh'’);
Status aktualisieren(Endpunkt,Schlüssel,‘'abonnieren'’);
})
});
Diese Methode sendet eine Art von Sicherheiten, die zur Lösung des Sharing-Problems verwendet werden. Sie verfügt über eine Endpunkt-Eigenschaft (die eine eindeutige URL enthält, die auf den Server verweist) und eine Methode. getKey(), Damit wird ein öffentlicher Schlüssel für Verschlüsselungszwecke generiert. Sie benötigen die Zustimmung beider Parteien, die die Ergebnisse anschließend an den Anwendungsserver senden.
Um eine Warnmeldung an den Server zu senden, senden Sie eine Anfrage an die Endpunktadresse. Dadurch wird eine Nachricht vom Server an die Dienstanwendungen gesendet. Optional können Sie der Nachricht auch Daten beifügen; dies muss jedoch mit einem Verschlüsselungsschlüssel erfolgen. Datenbasierte Warnmeldungen funktionieren derzeit nur mit Firefox, andere Browser sollten aber in Kürze folgen.
Die Dienstanwendung empfängt Benachrichtigungen über einen Push-Ereignishandler. Sobald eine Benachrichtigung gesendet wird, können Sie über die Dateneigenschaft des Ereignisobjekts darauf zugreifen. Sie können dann auf die Nachricht beliebig reagieren – beispielsweise durch das Senden einer Meldung oder einer Nachricht an die Startseite, die Ihre Anwendung aktualisiert.
selbst.addEventListener(‘'drücken'’, Funktion(e) {
var Objekt = e.Daten.JSON();
// Auf die Push-Nachricht in irgendeiner Weise reagieren
// z. B. eine Benachrichtigung oder eine Kanalnachricht
});
Hinweis: Viele der technischen Dienste (Benachrichtigungen usw.) werden von Chrome und Firefox bereits gut unterstützt, andere Browser arbeiten jedoch an deren Integration. Benachrichtigungsdaten funktionieren zum jetzigen Zeitpunkt nur in Firefox.
Dieses Programm von Mozilla liefert Informationen über die Fortschritte bei der Implementierung moderner Webanwendungsschnittstellen in Browsern.
Leistung
Die Performance war lange Zeit ein Streitpunkt zwischen Web- und nativen Apps, wobei native Entwickler die Performance-Möglichkeiten des Webs eher vernachlässigten. Doch die Kluft hat sich in letzter Zeit deutlich verringert, dank wesentlich schnellerer Java-Engines in Browsern und schnellerem Code im Web für Animationen und 3D-Grafiken, die zunehmend die verfügbare GPU-Leistung nutzen können.
Darüber hinaus können wir nativen Anwendungscode (wie C++) mithilfe von Technologien wie Emscripten in Java konvertieren. Wenn wir hier von Java sprechen, meinen wir im Wesentlichen asm.js, eine hochoptimierte Teilmenge von Java, die AOT-Kompilierungstechniken für nahezu native Performance nutzt. Es ist so populär geworden, dass es nicht nur von Firefox, sondern auch von Chrome und Edge unterstützt wird. Zudem wurde asm.js als Veröffentlichungsziel für die beliebten 3D-Engines Unity und Unreal hinzugefügt.
Und die nächste Generation steht bereits in den Startlöchern – einige Browserhersteller haben Partnerschaften geschlossen, um WebAssembly einzurichten und zu implementieren, das eine ähnliche Funktion wie Emcscripten bieten wird. Allerdings mit schnelleren, besseren Standards und höherer Leistung.
Dies wird anstelle von (asm.js) mit dem WASM-Format verwendet, da es bessere Einstellungen bietet, wir uns darauf verlassen können sollten, dass Compiler gültige WASM-Ausgabe erzeugen und Browser diese mit gleichbleibender Leistung ausführen können, unabhängig davon, welcher Compiler sie erzeugt hat.
Ergebnis
Wie Sie sehen, entwickelt sich das Web stetig weiter. Spannende neue Technologien sollen einige der verbleibenden Schwächen unserer beliebten Plattformen beheben, die traditionell darunter litten. Die Leistung übertrifft sogar die Erwartungen. Dadurch können Web-Apps sich problemlos neben nativen Apps behaupten. Vorausgesetzt, wir verlieren dabei nicht aus den Augen, was das Web ursprünglich so großartig gemacht hat.
