Hybrid App Gotchas
Notes from a stretch of hybrid-app work — WebView interop, layout, packaging.
~/posts/hybrid-app-notes $ cat post.md
Been working on an app for a while.
A hybrid app is a native app that hosts web pages through a WebView — Android and iOS both support it. The upsides are real: faster updates, easier layout, less code. JS is also a lot more flexible than Java, Objective-C, or Swift; parsing odd-shaped JSON from a server is easy. Gson is powerful but doesn’t give you the same room to improvise. The downsides exist but they’re livable.
A few small notes I want to keep around for later:
- On iOS, WKWebView lets the page push event-like messages to the native side through a WebKit global.
- On Android the equivalent trick is intercepting
alert()from the page and treating it as an event channel.- I’ve heard of an older approach where the page changes the URL and the native side reads the URL — kind of wild.
- On Android you can also call a global JS function from the
native side via the WebView class. But once Browserify wraps
your code into a
build.js, exposing functions towindowisn’t obvious. There’s certainly a proper way; the cheap workaround is to drop a hidden element into the DOM, give it anid, wire it to a Vue handler, and have the native side trigger a click on it. Not pretty.
- Meta tags can disable phone gestures like pinch-zoom and drag. On Android there’s also a WebSettings switch that adapts pages uniformly.
- A Meta dpi setting is necessary too — without it, text comes out microscopic.
- Browserify feels solid in use.
- Virtual routes inside a WebView lead to odd behavior. In a hybrid app you usually don’t want to expose back/forward to the user anyway, so just turn it off.