Πώς να μετατρέψετε τον ιστότοπό σας σε εφαρμογή για κινητά με 7 γραμμές JSON

Μια νέα προσέγγιση για την ανάμειξη της μηχανής Web σε εγγενείς εφαρμογές

Τι γίνεται αν σας έλεγα τις 7 γραμμές JSON παραπάνω, με χρώμα πορτοκαλί , το μόνο που χρειάζεστε για να μετατρέψετε έναν ιστότοπο σε εφαρμογή για κινητά; Δεν χρειάζεται να ξαναγράψετε τον ιστότοπό σας χρησιμοποιώντας κάποιο API πλαισίου απλώς για να το κάνει να συμπεριφέρεται σαν μια εφαρμογή για κινητά. Απλώς φέρετε τον υπάρχοντα ιστότοπό σας ως έχει και συνδυάστε τον σε μια εγγενή εφαρμογή με μια απλή αναφορά διεύθυνσης URL.

Και τι γίνεται αν, με λίγο τροποποίηση της σήμανσης JSON, μπορείτε να έχετε πρόσβαση σε όλα τα εγγενή API, τα εγγενή στοιχεία διεπαφής χρήστη, καθώς και τις μεταβάσεις εγγενών προβολών έξω από το κουτί;

Δείτε πώς φαίνεται ένα ελάχιστο παράδειγμα στη δράση:

Παρατηρήστε πώς έχω ενσωματώσει μια ιστοσελίδα github.com, αλλά η υπόλοιπη διάταξη είναι όλα τα εγγενή στοιχεία διεπαφής χρήστη, όπως η κεφαλίδα πλοήγησης και η κάτω γραμμή καρτελών. Και η μετάβαση είναι αυτόματα εγγενής χωρίς να χρειάζεται να ξαναγράψετε τον ιστότοπο χρησιμοποιώντας οποιαδήποτε API.

Πριν εξηγήσω πώς, μπορείτε να ρωτήσετε: "Αυτό είναι ωραίο, αλλά μπορείτε να κάνετε κάτι σημαντικό εκτός από την απλή εμφάνιση της ιστοσελίδας σε ένα εγγενές πλαίσιο εφαρμογής;"

Μεγάλη ερώτηση, γιατί αυτό είναι το κύριο θέμα αυτής της ανάρτησης. Το μόνο που χρειάζεται να κάνετε είναι να δημιουργήσετε ένα απρόσκοπτο κανάλι αμφίδρομης επικοινωνίας μεταξύ της προβολής ιστού και της εφαρμογής , ώστε η γονική εφαρμογή να μπορεί να ενεργοποιήσει τυχόν λειτουργίες JavaScript εντός της προβολής ιστού και η προβολή ιστού να φτάσει έξω για να καλέσει εγγενή API.

Εδώ είναι ένα τέτοιο παράδειγμα:

Σημειώστε ότι αυτή η προβολή περιέχει:

  1. Εγγενής κεφαλίδα πλοήγησης, πλήρης με ενσωματωμένη λειτουργία μετάβασης
  2. A Web view, which embeds a QR code generator web app
  3. A native chat input component at the bottom

All this can be described by just tweaking some of the JSON markup attributes we saw above.

Finally, note that the QR code changes as you enter something from the chat input. The chat input triggers a JavaScript function inside the QR code web app that re-generates the image.

No app development framework has tried to fundamentally solve this problem of “seamless integration of web view into native apps” because they’re all focused on picking either 100% native or 100% HTML5 side.

Whenever you hear someone talk about the future of mobile apps, you would probably hear them talk about “Will it be the HTML5 approach that wins out? Or will it be native?”

None of them see native and html as something that could co-exist and furthermore, create synergy and achieve things that are not easily possible otherwise.

In this article I’m going to explain:

  • Why blending web engine and native components is often a good idea.
  • Why a seamless integration of HTML and Native is not easy, and how I implemented one.
  • Most importantly, how YOU can use it to build your own app instantly.

Why would you use HTML in a native app?

Before we go further, let’s first discuss whether this is even a good idea, and when you may want to take this approach. Here are some potential use cases:

1. Use Web Native Features

Some parts of your app may be better implemented using the web engine. For example, Websocket is a web-native feature that’s designed for the web environment. In this case it makes sense to use the built-in web engine (WKWebView for iOS and WebView for Android) instead of installing a 3rd party library that essentially “emulates” Websocket.

No need to install additional code just to do something that you can do for free, which brings us to the next point.

2. Avoid Large Binary Size

You may want to quickly incorporate features that will otherwise require a huge 3rd party library.

For example, to incorporate a QR code image generator natively, you will need to install some 3rd party library which will increase the binary size. But if you use the web view engine and a JavaScript library through a simple