Introducing the Modern WebKit API

Transcription

1 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 permission from Apple.

2 WebKit Overview

3

4

5

6

7

8

9

10

11

12 WebKit in Your App

13 WebKit in Your App UIWebView UIKit.framework

14 WebKit in Your App UIWebView UIKit.framework WebView WebKit.framework

15 What You Will Learn

16 What You Will Learn Embedding web content in your app

17 What You Will Learn Embedding web content in your app Taking advantage of new features of the WebKit API

18 What You Will Learn Embedding web content in your app Taking advantage of new features of the WebKit API Customizing how your app interacts with web content

19 The Modern WebKit API

20 The Modern WebKit API

21 The Modern WebKit API Same on ios and OS X

22 The Modern WebKit API Same on ios and OS X Modern

23 The Modern WebKit API Same on ios and OS X Modern Streamlined

24 The Modern WebKit API Same on ios and OS X Modern Streamlined Multi-process architecture

25 The Modern WebKit API Features

26 The Modern WebKit API Features Responsive scrolling

27 The Modern WebKit API Features Responsive scrolling Fast JavaScript

28 The Modern WebKit API Features Responsive scrolling Fast JavaScript Built-in gestures

29 The Modern WebKit API Features Responsive scrolling Fast JavaScript Built-in gestures Easy app-webpage communication

30 Multi-process Architecture

31 Multi-process Architecture Web content runs in its own process

32 Multi-process Architecture Web content runs in its own process WKWebView Web Content Process WebKit

33 Multi-process Architecture Consistently responsive

34 Multi-process Architecture Consistently responsive Energy efficient

35 Multi-process Architecture

36 Multi-process Architecture WKWebView

37 Multi-process Architecture WKWebView Web Content Process WebKit

38 Multi-process Architecture WKWebView WKWebView Web Content Process WebKit

39 Multi-process Architecture WKWebView WKWebView Web Content Process Web Content Process WebKit WebKit

40 Multi-process Architecture WKWebView WKWebView WKWebView Web Content Process Web Content Process WebKit WebKit

41 Multi-process Architecture WKWebView WKWebView WKWebView Web Content Process Web Content Process WebKit WebKit

42 Multi-process Architecture WKWebView WKWebView WKWebView Web Content Process Web Content Process WebKit WebKit

43 Multi-process Architecture WKWebView WKWebView Web Content Process WebKit

44 Multi-process Architecture WKWebView Web Content Process WebKit

45 Multi-process Architecture

46 Adopting the Modern WebKit API

47 Adopting the Modern WebKit API WKPedia a Wikipedia browsing app

48 Adopting the Modern WebKit API Creating a WKWebView

49 Adopting the Modern WebKit API Creating a WKWebView WKWebView *webview = [[WKWebView alloc] initwithframe:myframe];

50 Adopting the Modern WebKit API Loading a webpage

51 Adopting the Modern WebKit API Loading a webpage NSURL *URL = [NSURL URLWithString:@"

52 Adopting the Modern WebKit API Loading a webpage NSURL *URL = [NSURL URLWithString:@" NSURLRequest *request = [NSURLRequest requestwithurl:url];

53 Adopting the Modern WebKit API Loading a webpage NSURL *URL = [NSURL URLWithString:@" NSURLRequest *request = [NSURLRequest requestwithurl:url]; [webview loadrequest:request];

54

55

56 Adopting the Modern WebKit API Configurations Configuration WKWebView WKWebView WKWebView

57 Adopting the Modern WebKit API Configurations WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];

58 Adopting the Modern WebKit API Configurations WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init]; WKWebView *webview = [[WKWebView alloc] initwithframe:myframe configuration:configuration];

59

60

61 Adding App UI

62 Adding App UI

63 WKWebView Actions

64 WKWebView Actions - goback: - goforward: - reload: - stoploading:

65 WKWebView Actions - goback: - goforward: - reload: - stoploading:

66 Adding App UI

67 WKWebView Properties

68 WKWebView Properties Name Type title NSString URL NSURL loading BOOL estimatedprogress double

69 WKWebView Properties Name Type title NSString URL NSURL loading BOOL estimatedprogress double

70 WKWebView Properties Name Type title NSString URL NSURL loading BOOL estimatedprogress double

71

72

73

74

75 Customizing Page Loading

76 Page Loading

77 Page Loading Action

78 Page Loading Action Link

79 Page Loading Action

80 Page Loading Action window.location = '

81 Page Loading Action

82 Page Loading Action -[WKWebView loadrequest:]

83 Page Loading Trigger Action Request

84 Page Loading Action Request Response

85 Page Loading Action Request Response

86 Page Loading Action Request Response

87 Page Loading Action Request Response Data

88 Page Loading Action Request Response Data

89 Page Loading Action Request Response Data

90 Page Loading Action Your App Request Response Your App Data

91 Customizing Page (nonatomic, weak) WKNavigationDelegate *navigationdelegate;

92 Customizing Page (nonatomic, weak) WKNavigationDelegate *navigationdelegate; - webview:decidepolicyfornavigationaction:decisionhandler:

93 Customizing Page (nonatomic, weak) WKNavigationDelegate *navigationdelegate; - webview:decidepolicyfornavigationaction:decisionhandler: - webview:decidepolicyfornavigationresponse:decisionhandler:

94 Customizing Page Loading WKNavigationAction

95 Customizing Page Loading WKNavigationAction Name Type navigationtype WKNavigationType sourceframe WKFrameInfo destinationframe WKFrameInfo request NSURLRequest modifierflags NSEventModifierFlags

96 Customizing Page Loading WKNavigationAction Name navigationtype Type WKNavigationType Link sourceframe WKFrameInfo destinationframe WKFrameInfo request NSURLRequest modifierflags NSEventModifierFlags -[WKWebView loadrequest:]

97 Customizing Page Loading WKNavigationAction Name Type navigationtype WKNavigationType sourceframe WKFrameInfo destinationframe WKFrameInfo request NSURLRequest modifierflags NSEventModifierFlags

98 Customizing Page Loading WKNavigationAction Name Type navigationtype WKNavigationType sourceframe WKFrameInfo Shift destinationframe WKFrameInfo request NSURLRequest modifierflags NSEventModifierFlags Option Control

99 Customizing Page Loading WKNavigationResponse

100 Customizing Page Loading WKNavigationResponse Name Type response NSURLResponse formainframe BOOL canshowmimetype BOOL

101 Customizing Page Loading WKNavigationResponse Name Type response NSURLResponse formainframe BOOL canshowmimetype BOOL

102 Customizing Page Loading Decision Handler

103 Customizing Page Loading Decision Handler You decide whether to cancel or allow

104 Customizing Page Loading Decision Handler You decide whether to cancel or allow Navigation action WKNavigationActionPolicyCancel WKNavigationActionPolicyAllow

105 Customizing Page Loading Decision Handler You decide whether to cancel or allow Navigation action WKNavigationActionPolicyCancel WKNavigationActionPolicyAllow Navigation response WKNavigationResponsePolicyCancel WKNavigationResponsePolicyAllow

106 Customizing Page Loading Decision Handler You decide whether to cancel or allow Navigation action WKNavigationActionPolicyCancel WKNavigationActionPolicyAllow Navigation response WKNavigationResponsePolicyCancel WKNavigationResponsePolicyAllow Asynchronous

107 Demo WKPedia Beth Dakin Safari and WebKit Engineer

108 Gestures Navigation Gestures

109 Gestures Navigation Gestures webview.allowsbackforwardnavigationgestures = YES;

110 Gestures Zoom Gestures

111 Gestures Zoom Gestures OS X webview.allowsmagnification = YES;

112

113

114

115

116

117

118

119

120

121

122 Customizing Webpage Content

123 Customizing Webpage Content User Scripts

124 Customizing Webpage Content User Scripts Script Messages

125 Customizing Webpage Content User Scripts Script Messages Managed by WKUserContentController

126 WKUserContentController

127 WKUserContentController Part of WKWebViewConfiguration

128 WKUserContentController Part of (nonatomic, strong) WKUserContentController *usercontentcontroller;

129 User Scripts

130 User Scripts

131 User Scripts

132 User Scripts When they run

133 User Scripts When they run Document start

134 User Scripts When they run Document start Document end

135 User Scripts When they run Document start Document end Where they run

136 User Scripts When they run Document start Document end Where they run All frames

137 User Scripts When they run Document start Document end Where they run All frames Main frame only

138 User Scripts

139 User Scripts NSString *myscriptsource World!')";

140 User Scripts NSString *myscriptsource World!')"; WKUserScript *myuserscript = [[WKUserScript alloc] initwithsource:myscriptsource injectiontime:wkuserscriptinjectiontimeatdocumentstart formainframeonly:yes];

141 User Scripts NSString *myscriptsource World!')"; WKUserScript *myuserscript = [[WKUserScript alloc] initwithsource:myscriptsource injectiontime:wkuserscriptinjectiontimeatdocumentstart formainframeonly:yes]; [usercontentcontroller adduserscript:myuserscript];

142 What Can User Scripts Do?

143 What Can User Scripts Do? Incredibly powerful

144 What Can User Scripts Do? Incredibly powerful Modify the document

145 What Can User Scripts Do? Incredibly powerful Modify the document Listen for events

146 What Can User Scripts Do? Incredibly powerful Modify the document Listen for events Load resources

147 What Can User Scripts Do? Incredibly powerful Modify the document Listen for events Load resources Communicate back to your application

148 Script Messages

149 Script Messages

150 Script Messages

151 Script Messages Sent as JSON

152 Script Messages Sent as JSON Converted to Objective-C types

153 Script Messages Registering a Script Message Handler

154 Script Messages Registering a Script Message Handler WKScriptMessageHandler protocol

155 Script Messages Registering a Script Message Handler WKScriptMessageHandler protocol - (void)usercontentcontroller:(wkusercontentcontroller *)usercontentcontroller didreceivescriptmessage:(wkscriptmessage *)message;

156 Script Messages Registering a Script Message Handler WKScriptMessageHandler protocol - (void)usercontentcontroller:(wkusercontentcontroller *)usercontentcontroller didreceivescriptmessage:(wkscriptmessage *)message; [usercontentcontroller addscriptmessagehandler:handler name:@"myname"];

157 Script Messages Posting messages

158 Script Messages Posting messages window.webkit.messagehandlers.<name>.postmessage();

159 Script Messages Posting messages window.webkit.messagehandlers.<name>.postmessage(); function postmymessage() { var message = { 'message' : 'Hello, World!', 'numbers' : [ 1, 2, 3 ] }; window.webkit.messagehandlers.myname.postmessage(message); }

160 Script Messages Receiving messages

161 Script Messages Receiving messages - (void)usercontentcontroller:(wkusercontentcontroller *)usercontentcontroller didreceivescriptmessage:(wkscriptmessage *)message { NSLog(@"Message: %@", message.body); }

162 Script Messages WKScriptMessage Name Type body id webview WKWebView name NSString

163 Script Messages

164 Script Messages The webpage can call postmessage

165 Script Messages The webpage can call postmessage Great for allowing webpages to interact with your app

166 Script Messages The webpage can call postmessage Great for allowing webpages to interact with your app Handle invalid messages

167 Demo WKPedia for ipad Beth Dakin Safari and WebKit Engineer

168 The Modern WebKit API

169 The Modern WebKit API

170 The Modern WebKit API WKWebView Web Content Process WebKit

171 The Modern WebKit API

172 The Modern WebKit API

173 The Modern WebKit API

174

175 WKScriptMessageHandler WKWebView WKNavigationDelegate WKBackForwardListItem WKFrameInfo WKUserContentController WKBackForwardList WKNavigation WKScriptMessage WKPreferences WKNavigationType WKUIDelegate WKUserScript WKProcessPool WKNavigationAction WKNavigationResponse WKWebViewConfiguration WKWindowFeatures

176 Next Steps

177 Next Steps Adopt the modern WebKit API

178 Next Steps Adopt the modern WebKit API Give us feedback

179 More Information Evangelism Safari Dev Center WebKit Open Source Project Apple Developer Forums

180 Related Sessions Your App, Your Website, and Safari Nob Hill Tuesday 4:30PM Web Inspector and Modern JavaScript Russian Hill Thursday 10:15AM Sharing Code Between ios and OS X Presidio Friday 9:00AM

181 Labs Safari and WebKit Lab Media Lab B Tuesday 4:30PM Safari and WebKit Lab Media Lab B Wednesday 4:30PM Safari and WebKit Lab Media Lab B Thursday 2:00PM

182