Pendekatan Baru untuk Menggabungkan Web Engine ke dalam Aplikasi Asli
Bagaimana jika saya memberitahu anda 7 baris JSON di atas, berwarna oren adalah apa yang anda perlukan untuk menjadikan laman web menjadi aplikasi mudah alih? Tidak perlu menulis semula laman web anda menggunakan beberapa API kerangka hanya untuk membuatnya berperilaku seperti aplikasi mudah alih. Cukup bawa laman web anda yang sedia ada, dan gabungkan ke dalam aplikasi asli dengan rujukan URL ringkas.
Dan bagaimana jika, hanya dengan sedikit mengubah markup JSON, anda dapat mengakses semua API asli, komponen UI asli, serta peralihan pandangan asli di luar kotak?
Inilah contoh minimum dalam tindakan:
Perhatikan bagaimana saya menyematkan laman web github.com tetapi susun atur yang lain adalah semua komponen UI asli, seperti tajuk navigasi dan bar tab bawah. Dan peralihan itu secara automatik tanpa anda perlu menulis semula laman web menggunakan API apa pun.
Sebelum saya menerangkan caranya, anda mungkin bertanya: "Bagus, tetapi bolehkah anda melakukan sesuatu yang bermakna selain hanya memaparkan laman web dalam bingkai aplikasi asli?"
Soalan hebat, kerana itulah topik utama siaran ini. Yang perlu anda buat hanyalah membuat saluran komunikasi 2 arah yang lancar antara paparan web dan aplikasi , sehingga aplikasi induk dapat memicu fungsi JavaScript di dalam paparan web dan pandangan web dapat menjangkau ke luar untuk memanggil API asli.
Inilah salah satu contohnya:
Perhatikan bahawa paparan ini mengandungi:
- Header navigasi asli, lengkap dengan fungsi peralihan terbina dalam
- A Web view, which embeds a QR code generator web app
- 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