Discovering WKWebView

Size: px

Start display at page:

Download "Discovering WKWebView"

Marianna May
5 years ago
Views:

2 Discovering WKWebView

4 Designed to replace UIWebView on ios and WebView on macos.

5 Both ios and macos have the same API

6 Harder to use than UIWebView

7 Multi-process Architecture

11 Multi-process Architecture Full WebKit Responsive Energy Efficient

12 Other Benefits Fast Javascript Built in Gestures Easy Web Page Communication

14 if let url = URL(string: " { webview.load(urlrequest(url:url ))

15 let html = """ <html> <head> <title>hello MODS 2017</title> </head> <body> <h1>hello MODS 2017</h1> </body> </html> """ webview.loadhtmlstring(html, baseurl: nil)

16 WKWebView Properties title url isloading estimatedprogress

17 Customized Page Loading

20 WKNavigationDelegate

21 webview.navigationdelegate = self

22 import UIKit import WebKit extension ViewController: WKNavigationDelegate {

23 An Example

25 <tr class="townrow" > <td class="town"> <a href=" title="achhnera"> Achhnera </a> </td> <td class="state"> <a href=" title="uttar Pradesh"> Uttar Pradesh </a> </td> <td class="population"> 22,781 </td> </tr>

27 import UIKit import WebKit extension ViewController: WKNavigationDelegate { func webview(_: WKWebView, decidepolicyfor: WKNavigationAction, (WKNavigationActionPolicy) -> Void) {

29 WKNavigationAction request sourceframe targetframe buttonnumber modifierflags navigationtype

30 WKNavigationType linkactivated formsubmitted backforward reload formresubmitted other

31 Our Example We want to interrupt the flow when a link is clicked (linkactivated) for a wikipedia url (request)

32 func webview(_: WKWebView, decidepolicyfor: WKNavigationAction, (WKNavigationActionPolicy) -> Void) { // If we are loading for any reason other than a link activated // then just process it. guard decidepolicyfor.navigationtype ==.linkactivated else { decisionhandler(.allow) return

33 func webview(_: WKWebView, decidepolicyfor: WKNavigationAction, (WKNavigationActionPolicy) -> Void) { // If we are loading for any reason other than a link activated // then just process it. guard decidepolicyfor.navigationtype ==.linkactivated else { decisionhandler(.allow) return // Reroute any request for wikipedia out to the default browser // then cancel the request. let request = decidepolicyfor.request if let url = request.url, let host = url.host, host == "en.m.wikipedia.org" { UIApplication.shared.open(url, options: [:], completionhandler: nil) decisionhandler(.cancel) return // By default allow the other requests to continue decisionhandler(.allow)

34 // Reroute any request for wikipedia out to the default browser // then cancel the request. let request = decidepolicyfor.request if let url = request.url, let host = url.host, host == "en.m.wikipedia.org" { UIApplication.shared.open(url, options: [:], completionhandler: nil) decisionhandler(.cancel) return

35 func webview(_: WKWebView, decidepolicyfor: WKNavigationAction, (WKNavigationActionPolicy) -> Void) { // If we are loading for any reason other than a link activated // then just process it. guard decidepolicyfor.navigationtype ==.linkactivated else { decisionhandler(.allow) return // Reroute any request for wikipedia out to the default browser // then cancel the request. let request = decidepolicyfor.request if let url = request.url, let host = url.host, host == "en.m.wikipedia.org" { UIApplication.shared.open(url, options: [:], completionhandler: nil) decisionhandler(.cancel) return // By default allow the other requests to continue decisionhandler(.allow)

37 func webview(_ webview: WKWebView, decidepolicyfor navigationresponse: WKNavigationResponse, (WKNavigationResponsePolicy) -> Void)

39 WKNavigationReponse canshowmimetype isformainframe reponse

40 Handling Javascript UI <script> function showdetails() { alert(" The entire work of this article is based on the Census of India, 2011, conducted by the Office of the Registrar General and Census Commissioner, under Ministry of Home Affairs (India), Government of India.") </script> <p style="intro"> <button onclick="showdetails()">details</button> </p>

43 WKUIDelegate webview.uidelegate = self

44 WKUIDelegate // // ViewController+WKUIDelegate.swift // WKWebKitExample // // Created by Scotty on 01/10/2017. // Copyright 2017 Diligent Robot. All rights reserved. // import UIKit import WebKit extension ViewController: WKUIDelegate {

45 func webview(_ webview: WKWebView, runjavascriptalertpanelwithmessage message: String, initiatedbyframe frame: WKFrameInfo, () -> Void) { let alert = UIAlertController(title: "Message", message: message, preferredstyle: UIAlertControllerStyle.alert) alert.addaction(uialertaction(title: "OK", style: UIAlertActionStyle.default, handler: nil)) self.present(alert, animated: true, completion: nil) completionhandler()

47 Configuration

49 Configuration let config = WKWebViewConfiguration() webview = WKWebView(frame: self.webviewcontainter.frame, configuration: config) webview.navigationdelegate = self webview.uidelegate = self webview.translatesautoresizingmaskintoconstraints = false webviewcontainter.addsubview(webview) webviewcontainter.addconstraints(nslayoutconstraint.constraints(withvisualformat: " [webview] ", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: ["webview": webview])) webviewcontainter.addconstraints(nslayoutconstraint.constraints(withvisualformat: "V: [webview] ", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: ["webview": webview]))

50 Multiple WKWebView instances can share a single WKWebViewConfiguration instance.

51 Customizing Webpage Content User Scripts Script Messages

53 WKUserContentController property usercontentcontroller on WKWebViewConfiguration

54 User Scripts User scripts are JavaScript (files) that get injected into the page loaded in a WKWebView When: They can run either at "Document Start" or "Document End" Where: All Frames or Main Frame Only

57 // Change colors. var style = document.createelement('style'); style.type = 'text/css'; style.innerhtml = '.town a { color: #FF9933;.state a { color: # population { color: # '; document.getelementsbytagname('head')[0].appendchild(style);

58 // Change colors. var style = document.createelement('style'); style.type = 'text/css';

59 style.innerhtml = '.town a { color: #FF9933;.state a { color: # population { color: # ';

60 .town a { color: #FF9933;.state a { color: #000080;.population { color: #138808;

61 document.getelementsbytagname('head')[0].appendchild(style);

62 private func loadscripts(config: WKWebViewConfiguration) { guard let filepath = Bundle.main.path(forResource: "change-css", oftype: "js") else { return do { let javascript = try String(contentsOfFile: filepath) let userscript = WKUserScript(source: javascript, injectiontime:.atdocumentend, formainframeonly: true) config.usercontentcontroller.adduserscript(userscript) catch { fatalerror("something went wrong: \(error)")

63 let javascript = try String(contentsOfFile: filepath) let userscript = WKUserScript(source: javascript, injectiontime:.atdocumentend, formainframeonly: true) config.usercontentcontroller.adduserscript(userscript)

66 // Called by App to get the WKWebView to filter towns function filter(searchtext) { var table = document.getelementbyid("towntable") filtertowns(table, searchtext); // Called by App to clear all town filtering function clearfilter() { unfiltertowns(); var lastcontainer; // Find all town entries. // If they do not match the current filter add the //.notfound class to the element function filtertowns(container,what) { unfiltertowns(); var townrows = container.getelementsbyclassname('townrow'); var searchexp = new RegExp('^' + what,'i'); for (var i = 0; i < townrows.length; ++i) { var towns = townrows[i].getelementsbyclassname('town') if (towns.length > 0) { var town = towns[0] var links = town.getelementsbytagname('a'); if (links.length > 0 ) { var text = links[0].innerhtml; if (!text.match(searchexp)) { townrows[i].classlist.add('notfound') lastcontainer = container // Remove all.notfound css entries. function unfiltertowns() { if (lastcontainer == null) { return; var hiddentowns = lastcontainer.getelementsbyclassname('notfound'); for (var i = 0; i < hiddentowns.length; ++i) { hiddentowns[i].classlist.remove('notfound'); // Add the.notfound CSS Style. var style = document.createelement('style'); style.type = 'text/css'; style.innerhtml = '.notfound { display: none; '; document.getelementsbytagname('head')[0].appendchild(style);

67 // Add the.notfound CSS Style. var style = document.createelement('style'); style.type = 'text/css'; style.innerhtml = '.notfound { display: none; '; document.getelementsbytagname('head')[0].appendchild(style);

68 <tr class="townrow" > <td class="town"> <a href=" title="achhnera"> Achhnera </a> </td> <td class="state"> <a href=" title="uttar Pradesh"> Uttar Pradesh </a> </td> <td class="population"> 22,781 </td> </tr>

69 function filtertowns(container,what) { unfiltertowns(); var townrows = container.getelementsbyclassname('townrow'); var searchexp = new RegExp('^' + what,'i'); for (var i = 0; i < townrows.length; ++i) { var towns = townrows[i].getelementsbyclassname('town') if (towns.length > 0) { var town = towns[0] var links = town.getelementsbytagname('a'); if (links.length > 0 ) { var text = links[0].innerhtml; if (!text.match(searchexp)) { townrows[i].classlist.add('notfound') lastcontainer = container

70 // Remove all.notfound css entries. function unfiltertowns() { if (lastcontainer == null) { return; var hiddentowns = lastcontainer.getelementsbyclassname('notfound'); for (var i = 0; i < hiddentowns.length; ++i) { hiddentowns[i].classlist.remove('notfound');

71 // Called by App to get the WKWebView to filter towns function filter(searchtext) { var table = document.getelementbyid("towntable") filtertowns(table, searchtext); // Called by App to clear all town filtering function clearfilter() { unfiltertowns();

72 private func loadscripts(config: WKWebViewConfiguration) { guard let changecssfilepath = Bundle.main.path(forResource: "changecss", oftype: "js"), let filtertownsfilepath = Bundle.main.path(forResource: "filtertowns", oftype: "js")else { fatalerror("scripts Not Found") do { let changecssjs = try String(contentsOfFile: changecssfilepath) let changecssuserscript = WKUserScript(source: changecssjs, injectiontime:.atdocumentend, formainframeonly: true) config.usercontentcontroller.adduserscript(changecssuserscript) let filtertownsjs = try String(contentsOfFile: filtertownsfilepath) let filtertownsuserscript = WKUserScript(source: filtertownsjs, injectiontime:.atdocumentend, formainframeonly: true) config.usercontentcontroller.adduserscript(filtertownsuserscript) catch { fatalerror("something went wrong: \(error)")

73 extension ViewController: UISearchBarDelegate { func searchbar(_ searchbar: UISearchBar, textdidchange searchtext: String) { filtertowns(filter: searchtext) func filtertowns(filter: String) { let js = "filter(\"\(filter)\");" webview.evaluatejavascript(js) { (_, error) in if let error = error { self.processjserror(error) return

74 private func processjserror(_ error: Error) { DispatchQueue.main.async { let alert = UIAlertController(title: "Error", message: error.localizeddescription, preferredstyle:.alert) alert.addaction(uialertaction(title: "OK", style:.default, handler: nil)) self.present(alert, animated: true, completion: nil)

77 // Called by App to get the WKWebView to filter towns function filter(searchtext) { var table = document.getelementbyid("towntable") return filtertowns(table, searchtext);

78 function filtertowns(container,what) { unfiltertowns(); var count = 0; var townrows = container.getelementsbyclassname('townrow'); var searchexp = new RegExp('^' + what,'i'); for (var i = 0; i < townrows.length; ++i) { var towns = townrows[i].getelementsbyclassname('town') if (towns.length > 0) { var town = towns[0] var links = town.getelementsbytagname('a'); if (links.length > 0 ) { var text = links[0].innerhtml; if (!text.match(searchexp)) { townrows[i].classlist.add('notfound') else { count ++ lastcontainer = container return count;

79 func filtertowns(filter: String) { let js = "filter(\"\(filter)\");" webview.evaluatejavascript(js) { (count, error) in if let error = error { self.processjserror(error) return DispatchQueue.main.async { if let count = count as? Int { self.countlabel.text = "\(count) town(s)" else { self.countlabel.text = ""

81 var initialloadaction: WKNavigation? initialloadaction = webview.load(urlrequest(url:url)) func webview(_: WKWebView, didfinish: WKNavigation!) { guard didfinish == initialloadaction else { return self.filtertowns(filter: searchfield.text?? "")

82 Having the page let us know something is happening.

83 Script Messages

85 Register to receive a message config.usercontentcontroller.add(self, name: "populationhaschanged")

87 import UIKit import WebKit extension ViewController: WKScriptMessageHandler { func usercontentcontroller(_ usercontentcontroller: WKUserContentController, didreceive message: WKScriptMessage) {

90 function filtertowns(container,what) { unfiltertowns(); var count = 0; var populationcount = 0; var townrows = container.getelementsbyclassname('townrow'); var searchexp = new RegExp('^' + what,'i'); for (var i = 0; i < townrows.length; ++i) { var towns = townrows[i].getelementsbyclassname('town') if (towns.length > 0) { var town = towns[0] var links = town.getelementsbytagname('a'); if (links.length > 0 ) { var text = links[0].innerhtml; if (!text.match(searchexp)) { townrows[i].classlist.add('notfound') else { var populations = townrows[i].getelementsbyclassname('population'); if (populations.length > 0) { var population = populations[0]; var populationtext = population.innerhtml.replace(',',''); var populationint = parseint(populationtext); if (isnan(populationint) == false) { populationcount += populationint; count ++ lastcontainer = container if (populationcount!= lastpopulationcount) { var message = { "population": populationcount webkit.messagehandlers.populationhaschanged.postmessage(message) lastpopulationcount = populationcount; return count;

91 var populationcount = 0;

92 var populations = townrows[i].getelementsbyclassname('population'); if (populations.length > 0) { var population = populations[0]; var populationtext = population.innerhtml.replace(',',''); var populationint = parseint(populationtext); if (isnan(populationint) == false) { populationcount += populationint;

93 if (populationcount!= lastpopulationcount) { var message = { "population": populationcount webkit.messagehandlers.populationhaschanged.postmessage(message) lastpopulationcount = populationcount;

94 import UIKit import WebKit extension ViewController: WKScriptMessageHandler { func usercontentcontroller(_ usercontentcontroller: WKUserContentController, didreceive message: WKScriptMessage) { guard message.name == "populationhaschanged", let body = message.body as? [String: Any], let population = body["population"] as? Int else { return DispatchQueue.main.async { self.populationlabel.text = "Population: \(population)"

96 <img src="dr-bundle-file://india-map.png" width="100%"/>

98 let config = WKWebViewConfiguration() loadscripts(config: config) setupschemes(config: config) private func setupschemes(config: WKWebViewConfiguration) { config.seturlschemehandler(self, forurlscheme: "dr-bundle-file")

99 import UIKit import WebKit extension ViewController: WKURLSchemeHandler { func webview(_ webview: WKWebView, start urlschemetask: WKURLSchemeTask) { func webview(_ webview: WKWebView, stop urlschemetask: WKURLSchemeTask) {

100

101

102

103 enum CustomSchemeHandlerError: Error { case noideawhattodowiththis case filenotfound(filename: String) extension ViewController: WKURLSchemeHandler { func webview(_ webview: WKWebView, start urlschemetask: WKURLSchemeTask) { guard let url = urlschemetask.request.url, let scheme = url.scheme, scheme == "dr-bundle-file" else { urlschemetask.didfailwitherror(customschemehandlererror.noideawhattodowiththis) return let urlstring = url.absolutestring let index = urlstring.index(urlstring.startindex, offsetby: 16) let file = String(urlString[index..<urlString.endIndex]) let path = (file as NSString).deletingPathExtension let ext = (file as NSString).pathExtension guard let filebundleurl = Bundle.main.url(forResource: path, withextension: ext) else { let error = CustomSchemeHandlerError.fileNotFound(fileName: "\(file)") urlschemetask.didfailwitherror(error) return do { let data = try Data(contentsOf: filebundleurl) let response = URLResponse(url: url, mimetype: ext == "png"? "image/png" : "text/html", expectedcontentlength: data.count, textencodingname: nil) urlschemetask.didreceive(response) urlschemetask.didreceive(data) urlschemetask.didfinish() catch { urlschemetask.didfailwitherror(error) func webview(_ webview: WKWebView, stop urlschemetask: WKURLSchemeTask) {

104 enum CustomSchemeHandlerError: Error { case noideawhattodowiththis case filenotfound(filename: String)

105 guard let url = urlschemetask.request.url, let scheme = url.scheme, scheme == "dr-bundle-file" else { let error = CustomSchemeHandlerError.noIdeaWhatToDoWithThis urlschemetask.didfailwitherror(error) return

106 let urlstring = url.absolutestring let index = urlstring.index(urlstring.startindex, offsetby: 16) let file = String(urlString[index..<urlString.endIndex]) let path = (file as NSString).deletingPathExtension let ext = (file as NSString).pathExtension guard let filebundleurl = Bundle.main.url(forResource: path, withextension: ext) else { let error = CustomSchemeHandlerError.fileNotFound(fileName: "\(file)") urlschemetask.didfailwitherror(error) return

107 do { let data = try Data(contentsOf: filebundleurl) let response = URLResponse(url: url, mimetype: ext == "png"? "image/png" : "text/html", expectedcontentlength: data.count, textencodingname: nil) urlschemetask.didreceive(response) urlschemetask.didreceive(data) urlschemetask.didfinish() catch { urlschemetask.didfailwitherror(error)

108

109 // if let url = Bundle.main.url(forResource: "cities", // withextension: "html") { // initialloadaction = webview.load(urlrequest(url:url)) // let url = URL(string: "dr-bundle-file:///cities.html")! initialloadaction = webview.load(urlrequest(url:url)

110 Things we have not looked at Cookie Handling Authentication Content Filtering

111

112 Code WKWebViewExample

113

114 TM 2018 Conference and Deep Dive Sessions April 24-28, IISc Bangalore Register early and get the best bit.ly/gidslinkedin

Introducing the Modern WebKit API

Frameworks #WWDC14 Introducing the Modern WebKit API Session 206 Anders Carlsson Safari and WebKit Engineer 2014 Apple Inc. All rights reserved. Redistribution or public display not permitted without written