Hogyan alakíthatja webhelyét mobilalkalmazássá, 7 sor JSON-tal

Új megközelítés a webes motor beépítéséhez a natív alkalmazásokhoz

Mi lenne, ha elmondanám neked a fenti JSON 7 sorát, amely narancssárga színű, mindössze annyit kell, hogy egy webhely mobilalkalmazássá váljon? Nem kell átírnia webhelyét valamilyen keret API segítségével, csak azért, hogy egy mobilalkalmazásként viselkedjen. Csak hozza meg a meglévő webhelyét a jelenlegi formájában, és keverje össze egy natív alkalmazásba egy egyszerű URL-referenciával.

És mi van, ha csak a JSON-jelölés kissé finomítása révén hozzáférhet az összes natív API-hoz, a natív felhasználói felület összetevőihez, valamint a natív nézet átmenetekhez a dobozból?

Így néz ki egy minimális példa a cselekvés során:

Figyelem, hogyan ágyaztam be a github.com weboldalt, de az elrendezés többi része az összes natív felhasználói felület összetevő, például a navigációs fejléc és az alsó lapsor. Az átmenet automatikusan natív, anélkül, hogy a weboldalt bármilyen API-val kellene átírnia.

Mielőtt elmagyaráznám, hogyan teheti fel a kérdést: „Ez remek, de megtehet-e valami értelmes dolgot, kivéve a weboldal megjelenítését egy natív alkalmazáskeretben?”

Nagyszerű kérdés, mert ez a téma fő témája. Csak annyit kell tennie, hogy zökkenőmentes kétirányú kommunikációs csatornát hozzon létre a webes nézet és az alkalmazás között, így a szülő alkalmazás bármilyen JavaScript funkciót aktiválhat a webes nézetben, és a webes nézet kívülre is elérhető, hogy natív API-kat hívjon meg.

Íme egy ilyen példa:

Vegye figyelembe, hogy ez a nézet a következőket tartalmazza:

  1. Natív navigációs fejléc, beépített átmeneti funkcióval
  2. Webes nézet, amely beágyaz egy QR-kód-generátor webes alkalmazást
  3. A natív csevegési bemeneti elem alján

Mindezt úgy lehet leírni, hogy csak a fent látott JSON-jelölési attribútumokat megcsípjük.

Végül, vegye figyelembe, hogy a QR-kód megváltozik, amikor valamit beír a csevegőbemenetből. A csevegési bemenet aktiválja a JavaScript funkciót a képet újra létrehozó QR-kódú webalkalmazásban.

Egyik alkalmazásfejlesztési keret sem próbálta alapvetően megoldani ezt a „webes nézet zökkenőmentes integrációja a natív alkalmazásokba” problémát, mivel mind a 100% natív, mind a 100% HTML5 oldal kiválasztására összpontosítanak.

Amikor hallja, hogy valaki a mobilalkalmazások jövőjéről beszél, valószínűleg hallani fogja őket a következőkről: “Vajon a HTML5 megközelítés nyeri meg? Vagy natív lesz? ”

Egyikük sem látja az anyanyelvi és a html-t olyanként, amely együtt létezhet és emellett szinergiát teremthet, és olyan dolgokat érhet el, amelyek egyébként nem könnyűek.

Ebben a cikkben meg fogom magyarázni:

  • Miért gyakran jó ötlet a webmotor és a natív komponensek keverése.
  • Miért nem könnyű a HTML és a natív integrációja, és hogyan implementáltam.
  • A legfontosabb, hogy hogyan tudod felhasználni azonnali saját alkalmazásának elkészítésére.

Miért használna HTML-t egy natív alkalmazásban?

Mielőtt továbbmennénk, először vitassuk meg, vajon ez jó ötlet-e, és mikor érdemes ezt a megközelítést alkalmazni. Íme néhány lehetséges felhasználási eset:

1. Használja a webes natív szolgáltatásokat

Lehet, hogy alkalmazásának egyes részeit jobban megvalósíthatja az internetes motor használatával. A Websocket például egy olyan webes natív szolgáltatás, amelyet a webes környezethez terveztek. Ebben az esetben érdemes a beépített webes motort (WKWebView iOS-hez és WebView for Android) használni ahelyett, hogy egy harmadik fél könyvtárat telepítne, amely lényegében “utánozza” a Websocket-ot.

Nem kell kiegészítő kódot telepítenie, hogy csak valamit szabadon megtehessen, ami a következő ponthoz vezet.

2. Kerülje a nagy bináris méretet

Érdemes lehet gyorsan beépíteni olyan funkciókat, amelyek egyébként hatalmas harmadik fél könyvtárat igényelnek.

Például egy QR-kód képgenerátor natív beépítéséhez telepítenie kell egy harmadik fél könyvtárat, amely növeli a bináris méretet. De ha a webes nézet motorját és a JavaScript könyvtárat egy egyszerű