Android and the WebView @ErikHellman speakerdeck.com/erikhellman/android-and-the-webview 

If all you have is a hammer, everything looks like a nail! 

What else would you really need?!? val webView = findViewById(R.id.webView) webView.loadUrl("https://dailykitten.com") 

No content

Don't use the WebView! 

Use Chrome Custom Tabs instead! 

Chrome Custom Tabs Gradle: implementation 'androidx.browser:browser:x.y.z' Kotlin: val url = Uri.parse("https://dailykitten.com") CustomTabsIntent.Builder().build().launchUrl(this, url) 

Customizing toolbar color val url = Uri.parse("https://dailykitten.com") CustomTabsIntent.Builder() .setToolbarColor(R.color.mainCoonGrey) .build().launchUrl(this, url) 

Custom action button val icon = R.drawable.cat val description = R.string.send_to_cat val pendingIntent = PendingIntent.getActivity(...) val tint = true CustomTabsIntent.Builder() .setActionButton(icon, description, pendingIntent, tint) .build().launchUrl(this, url) 

Customizing transitions CustomTabsIntent.Builder() .setStartAnimations(this, R.anim.fancy_in_anim, R.anim.fancy_out_anim) .setExitAnimations(this, R.anim.fancy_out_anim, R.anim.fancy_in_anim) .build().launchUrl(this, url) 

Launch pages faster val connection = object : CustomTabsServiceConnection() { override fun onCustomTabsServiceConnected(name: ComponentName, client: CustomTabsClient) { client.warmup(0) client.newSession(CustomTabsCallback()) .mayLaunchUrl(Uri.parse("https://dailykitten.com"), Bundle.EMPTY, emptyList()) } override fun onServiceDisconnected(name: ComponentName) { } } CustomTabsClient.bindCustomTabsService(this, "com.android.chrome", connection) 

android.webkit.WebView 

Avoid WebView if possible! 

When NOT to use WebView1 — Displaying SVG images — Login dialogs (Except when you must) — Wrapping your mobile website in an APK 1 Not a complete list... 

When to use WebView2 — Displaying local HTML formatted content — Web-only authentication 2 Mostly complete list. 

No content

No content

Getting Started 1. Enable Chrome Dev tools // Enable Chrome Dev Tools with chrome://inspect WebView.setWebContentsDebuggingEnabled(BuildConfig.DEBUG) 

Getting Started 1.2 Chrome Dev Tools (chrome://inspect) 

Getting Started 1.3 Chrome Dev Tools 

Getting Started 2. Add compat library dependencies { ... implementation 'androidx.webkit:webkit:x.y.z' ... } 

Getting Started 3. Configure your WebView val webView = findViewById(R.id.webView) webView.settings.apply { ... } 

Getting Started 3.1 Basic settings // Enable if your content uses JavaScript javaScriptEnabled = true // For localStorage or sessionStorage domStorageEnabled = true // Web Database API support (IndexedDB) databaseEnabled = true // true if the WebView supports the viewport meta tag useWideViewPort = true // Support zooming displayZoomControls = false builtInZoomControls = false 

Getting Started 3.2 Caching // Overrides the way the cache is used cacheMode = WebSettings.LOAD_NO_CACHE 

Getting Started 3.3 File and content URLs // How to support file:/// URLs (Don't!) allowFileAccess = false allowFileAccessFromFileURLs = false allowUniversalAccessFromFileURLs = false // Allow access to ContentProvider URLs allowContentAccess = false 

Getting Started 4.1 Load your remote content3 val webView = findViewById(R.id.webView) val url = "https://api.catz.com/news/content/12345" webView.loadUrl(url) 3 Don't do this - see later slides. 

Getting Started 4.2 Load generated content val html = """ Cats!

Cats are awesome!

""" val htmlBytes = html.toByteArray(charset("UTF-8")) val encodedHtml = Base64.encodeToString(htmlBytes, Base64.NO_WRAP) webView.loadData(encodedHtml, "text/html", "base64") 

Getting Started 4.3 Loading local content (the right way!) val url = "https://catz.androidplatform.net/index.html" val webView = findViewById(R.id.webView) webView.loadUrl(url) 

WebViewClient 

WebViewClient 

WebViewClient 

WebViewClient usage — Intercept WebView requests — Override network response with custom content — Always use WebViewClientCompat! 

shouldOverrideUrlLoading() — Only for GET requests — Don't call WebView.loadUrl() or WebView.loadData() here — Useful for capturing auth tokens 

Capturing OAuth 2 auth code val webView = findViewById(R.id.webView) webView.webViewClient = object : WebViewClientCompat() { override fun shouldOverrideUrlLoading(view: WebView, request: WebResourceRequest): Boolean { if (request.url.toString().startsWith(REDIRECT_URL)) { return handleLoginSuccess(request) } return false } } val loginUrl = ... // Login URL with redirect URL webView.loadUrl(loginUrl) 

androidplatform.net One potential problem of hosting local resources on a http(s):// URL is that doing so may conflict with a real website... The androidplatform.net domain has been specifically reserved for this purpose and you are free to use it. — https://github.com/google/webview-local-server 

Loading local content safely webView.webViewClient = object : WebViewClientCompat() { override fun shouldInterceptRequest(view: WebView?, request: WebResourceRequest?): WebResourceResponse? { // Read local content and return a WebResourceResponse return createResponse(request) } } webView.loadUrl("https://catz.androidplatform.net/index.html) 

Loading local content safely fun createResponse(request: WebResourceRequest): WebResourceResponse { val path = request.url.path val file = fileFromUrlPath(path) if (!file.exists()) { return WebResourceResponse("text/plain", "utf-8", 404, "Not Found", emptyMap(), ByteArrayInputStream(ByteArray(0))) } val (mimeType, encoding) = mimeTypeAndEncodingForFile(file) return WebResourceResponse(mimeType, encoding, 200, "OK", emptyMap(), FileInputStream(file)) } 

WebViewServer.kt - http://bit.ly/2xkYMGD open class FileRequestHandler(file: File, private val requestPath: String, private val mimeType: String, private val encoding: String) : RequestHandler { private val bytes = FileInputStream(file).use { it.readBytes() } override fun shouldHandleRequest(request: Request): Boolean { val uri = Uri.parse(requestPath) return uri.path == request.path } override fun handleRequest(request: Request): Response { return Response(200, "OK", emptyMap(), mimeType, encoding, ByteArrayInputStream(bytes)) } } 

Bridging Android and JavaScript 

Bridging Android and JavaScript (old version) class MyJavaScriptInterface(private val handler: Handler) { fun onEvent(data: String) { val json = JSONObject(data) Message.obtain(handler, JS_MSG, json).sendToTarget() } companion object { const val JS_MSG = 10 } } 

Bridging Android and JavaScript (old version) val webView = findViewById(R.id.webView) val jsInterface = MyJavaScriptInterface(jsHandler) webView.addJavascriptInterface(jsInterface, "android") 

Bridging Android and JavaScript (old version) function emitEventToAndroid(data) { if (android && typeof android.onEvent === 'function') { android.onEvent(JSON.stringify(data)); } } 

Bridging Android and JavaScript (old version) // JavaScript function we will call from Android function performAction(name, age) { return `${name} is ${age} years old!` } val name = Erik val age = 42 webView.evaluateJavascript("performAction($name, $age)") { value -> // value will be "Erik is 42 years old!" } 

Bridging Android and JavaScript (old version) — Threading — Binding native objects — Calling function by strings 

Better solution: MessageChannel! 

Bridging Android and JavaScript (new version) // Creates two MessageChannel ports val (port1, port2) = WebViewCompat.createWebMessageChannel(webView) port1.setWebMessageCallback(object: WebMessagePortCompat.WebMessageCallbackCompat() { override fun onMessage(port: WebMessagePortCompat, message: WebMessageCompat?) { message?.data?.also{ val data = JSONObject(it) handleWebEvent(data); } } }) // Send init message to JS side val initMsg = WebMessageCompat("""{type: "init"}""", arrayOf(port2)) WebViewCompat.postWebMessage(webView, initMsg, Uri.parse("*")) 

Bridging Android and JavaScript (new version) let nativePort = null; window.addEventListener('message', message => { if (e.data) { val msg = JSON.parse(e.data); if (msg.type === 'init') { nativePort = e.ports[0]; } else { onNativeMessage(msg); } } }); function sendMessageToNative(data) { nativePort.postMessage(JSON.stringify(data)); } 

Customizing local web content 

ePub standard 

ePub in 1 slide — W3C standards (2.0, 3.x) — ZIP file (or directory) structure — Self-contained web content — Requires custom JS and CSS for rendering 

ePub structure 

ePub structure 

Package document The Dark World ... ... ... ... 

ePub scrolling 

Wrapping web content (HTML) 

Wrapping web content (HTML) ePub Reader 

Injecting CSS fun loadEpub(spineItems) { const resourceRoot = document.querySelector('#resourceRoot'); spineItems.forEach(item => { const iframe = document.createElement('iframe'); iframe.addEventListener('load', () => { const cssLink = document.createElement('link'); cssLink.rel = 'stylesheet'; cssLink.type = 'text/css'; cssLink.addEventListener('load', () => { console.log('Chapter loaded with custom CSS!'); }); cssLink.href = '/chapter.css' // Add custom CSS to this chapter const head = iframe.contentDocument.querySelector('head') head.appendChild(cssLink); }); resourceRoot.appendChild(iframe); // Start loading chapter in iframe iframe.src = item.href; }); } 

Injected CSS :root { column-gap: 20px; column-width: 45em; column-count: 1; column-fill: auto; will-change: transform; } body { overflow: hidden !important; column-span: none !important; box-sizing: border-box !important; break-inside: avoid !important; } 

Demo! 

Dos and Donts 1. Don't run a local web server for local web content 2. Don't scroll web content from native 3. Avoid multiple WebViews 4. Use MessageChannel for bridging 5. Use WebViewClientCompat for loading local content 6. WebView is auto-updated with Chrome (except on Android 5!) 

WebView resources - Native Bridge Android A lightweight and efficient bridge between webview and native apps (Android & iOS). github.com/nrkno/nativebridge-android - WebViewServer.kt A customizable "server" for Android WebView: http://bit.ly/2xkYMGD - WebView Local Server from Google A simple implementation for loading local content. 

Thank you for listening! @ErikHellman speakerdeck.com/erikhellman/android-and-the-webview