So verwandeln Sie Ihre Website in eine mobile App mit 7 Zeilen JSON

Ein neuer Ansatz, um Web Engine in native Apps zu integrieren

Was wäre, wenn ich Ihnen die 7 Zeilen von JSON oben in Orange sagen würde? Alles, was Sie brauchen, um eine Website in eine mobile App zu verwandeln? Sie müssen Ihre Website nicht mit einer Framework-API umschreiben, nur damit sie sich wie eine mobile App verhält. Bringen Sie einfach Ihre vorhandene Website in den aktuellen Zustand und fügen Sie sie mit einer einfachen URL-Referenz in eine native App ein.

Und was ist, wenn Sie, indem Sie das JSON-Markup ein wenig optimieren, sofort auf alle nativen APIs, nativen UI-Komponenten sowie nativen Ansichtsübergänge zugreifen können?

So sieht ein minimales Beispiel in Aktion aus:

Beachten Sie, dass ich eine github.com-Webseite eingebettet habe, der Rest des Layouts jedoch nur native UI-Komponenten enthält, z. B. den Navigationsheader und die untere Registerkartenleiste. Der Übergang ist automatisch systemeigen, ohne dass Sie die Website mithilfe von APIs neu schreiben müssen.

Bevor ich erkläre, wie, könnten Sie fragen: "Das ist cool, aber können Sie etwas anderes tun, als nur die Webseite in einem nativen App-Frame anzuzeigen?"

Gute Frage, denn das ist das Hauptthema dieses Beitrags. Sie müssen lediglich einen nahtlosen bidirektionalen Kommunikationskanal zwischen der Webansicht und der App erstellen, damit die übergeordnete App alle JavaScript-Funktionen in der Webansicht auslösen und die Webansicht nach außen greifen kann, um native APIs aufzurufen.

Hier ist ein solches Beispiel:

Beachten Sie, dass diese Ansicht Folgendes enthält:

  1. Native Navigationskopfzeile mit integrierter Übergangsfunktion
  2. Eine Webansicht, in die eine QR-Code-Generator-Webanwendung eingebettet ist
  3. Eine native Chat-Eingabekomponente unten

All dies kann beschrieben werden, indem nur einige der oben gezeigten JSON-Markup-Attribute angepasst werden.

Beachten Sie schließlich, dass sich der QR-Code ändert, wenn Sie über die Chat-Eingabe etwas eingeben. Die Chat-Eingabe löst eine JavaScript-Funktion in der QR-Code-Web-App aus, die das Bild neu generiert.

Kein App-Entwicklungsframework hat versucht, dieses Problem der „nahtlosen Integration von Web View in native Apps“ grundlegend zu lösen, da sich alle darauf konzentrieren, entweder 100% native oder 100% HTML5-Seite auszuwählen.

Wenn Sie jemanden über die Zukunft mobiler Apps sprechen hören, werden Sie wahrscheinlich hören, wie er über „Wird es der HTML5-Ansatz sein, der sich durchsetzt? Oder wird es einheimisch sein? "

Keiner von ihnen sieht native und html als etwas, das nebeneinander existieren und darüber hinaus Synergien schaffen und Dinge erreichen könnte, die sonst nicht leicht möglich wären.

In diesem Artikel werde ich erklären:

  • Warum das Mischen von Web-Engine und nativen Komponenten oft eine gute Idee ist.
  • Warum eine nahtlose Integration von HTML und Native nicht einfach ist und wie ich eine implementiert habe.
  • Am wichtigsten ist, wie Sie es verwenden können, um Ihre eigene App sofort zu erstellen.

Warum sollten Sie HTML in einer nativen App verwenden?

Bevor wir fortfahren, wollen wir zunächst diskutieren, ob dies überhaupt eine gute Idee ist und wann Sie diesen Ansatz wählen möchten. Hier sind einige mögliche Anwendungsfälle:

1. Verwenden Sie Web Native-Funktionen

Einige Teile Ihrer App lassen sich möglicherweise besser mit der Web-Engine implementieren. Beispielsweise ist Websocket eine web-native Funktion, die für die Webumgebung entwickelt wurde. In diesem Fall ist es sinnvoll, die integrierte Web-Engine (WKWebView für iOS und WebView für Android) zu verwenden, anstatt eine Drittanbieter-Bibliothek zu installieren, die Websocket im Wesentlichen "emuliert".

Es ist nicht erforderlich, zusätzlichen Code zu installieren, um etwas zu tun, das Sie kostenlos tun können, wodurch wir zum nächsten Punkt gelangen.

2. Vermeiden Sie große Binärformate

Möglicherweise möchten Sie schnell Funktionen integrieren, für die andernfalls eine umfangreiche Bibliothek von Drittanbietern erforderlich ist.

Um beispielsweise einen QR-Code-Image-Generator nativ einzubinden, müssen Sie eine Drittanbieter-Bibliothek installieren, die die Binärgröße erhöht. Wenn Sie jedoch die Web-View-Engine und eine JavaScript-Bibliothek über ein einfaches