Advanced WKWebKitView with Eric Soto - Live Tutorial Session - RWDevCon 2018

we go up the cover so I'm gonna get right to it all right awesome so today we're going to talk about WebKit web views and I'm very passionate about WebKit because I've had to use it in a number of applications where actually saved our bacon so I hope to bring some of this excitement to you guys now we're gonna talk about WebKit so you're gonna need some kind of web resource to access and rather than depending on the conference Wi-Fi I've actually built you a little server that you're going to connect to that happens to be no js' we're not really gonna get into nodejs but it happens to be no js' and so if you don't have no js' installed you will want to in the materials for this talk there is a package for node 8 that you can install I just saw one person that had node 9 and he had issues running the server so if you have node 9 you might want to try installing node 8 real quick because it doesn't seem to run well on node 9 so sorry about that now this is a very typical scenario right this node.js server returns HTML CSS and JSON and the whole idea is that your app the app we're going to talk about is going to connect to the server to get its content so you know definitely get started now what is WebKit WK webview is the name of the framework but also known as WebKit web views and it actually replaces UI webview how many of you use UI webview in the past for something yeah how many of you liked UI webview because it really wasn't very good there was no one so thankfully WebKit web you renders HTML CSS and JavaScript just like you would expect it is much more efficient than UI WebKit was or you are webview sorry and it uses the same rendering engine that Safari does so the good news is that you're no longer writing something that performs poorly actually performs really really well now WebKit web views is not a web browser so there's no Chrome you don't have a you know an address bar back button forward button and so on and one last thing is don't confuse it with safari viewcontroller we're actually going to look at safari view controller also today but makes there are actually two different things for two different slightly different uses now finally in Xcode 9 WebKit is a first-class citizen prior to Xcode 9 you might recall that you have to use code to inject WebKit web views and as a matter of fact if you are targeting iOS 10 or prior you do still need to do it in code the link didn't make it into the slides but I'm happy to give you guys this link just tweet me later and I'll send it to you but there's actual bug on on WebKit org that explains exactly why it breaks but the bottom line is if you're targeting iOS 10 you're still going to have to bring in the WebKit webview in code and not an interface builder today though we are going to look at an interface builder by the way as I mentioned previously WebKit webviews uses the same engine that Safari uses so it's really high-performance and you'll definitely see that now let's take a quick moment to compare WebKit to Safari view controller because these two are confused quite a bit so WebKit on the left as I mentioned no Chrome no controls where it's in Safari view controller you do get that address bar at the top the user can't type anything in that area but they still see it so in WebKit we don't have that and we're gonna use that to our advantage because Safari view controller looks like a web browser WebKit doesn't and that's kind of the whole point of it you're of course have full control of the content in a WebKit which is what we want and you can make the WebKit as small or as large as you want can be full screen and you can used to be a tiny part of the screen which is what we're gonna do today and of course can be seamless with other content now I know you're asking yourselves why bother with WebKit web views right it's like we're you know mobile developers we have api's you know why bother with HTML well it would be great if every single piece of data you ever needed came to you through an API but oftentimes you might be working with a business team or thing API or even an existing website and you know all they're giving you is HTML so WebKit really comes to save the day in that case also how many of you have to support Android as well whether personally or maybe another team member so yeah so it helps if you don't have to reinvent the wheel for each platform right you can leverage some of the HTML layouts in a WebKit webview that you're using perhaps in an Android app as well and of course it now is the animation playing it doesn't look like it is but but the point of this slide was to show you how in the case of this particular project the the client wanted to change the list of employees often and so in this case you know you could use a webview that's coming HTML that's coming from the web to essentially change whatever that looks like to suit your needs so you could potentially avoid an app store review if you're able to pull a layout in HTML from the web you don't have to submit a review at Apple there's nothing for them to review it's essentially pulling content so things like terms and conditions product information pages where there's a lot of detail profile pages photo galleries and so on are good candidates for a WebKit webview now this talk is not about hybrid frameworks how many of you love hybrid frameworks yes ok I was expecting a few hands but that's ok anyway so we're not you could use a webview to build your entire application in there I suppose I'm not advocating that if that's what you're doing hey you know whatever floats your boat but the point is that it's not what we're talking about today there's certainly plenty of frameworks out there however we are going to talk about using web to save time reuse content and even do some cross-platform work now this no beta please if you have Xcode 9.3 beta some people still do don't use that user 9.2 only because some of the parts of the demo are not going to work real well some folks have 9.3 Xcode I believe that all works fine as long as it's your primary so again we're going to get that server running and and start you know coding against it so let me switch context here to Xcode you guys give me a second I'll make sure you still have and make sure you have your nodejs running and so on and we're gonna get started we go so first we're gonna find out if you have node and if you don't there's the package but just to confirm it once more all right in the in the files that you have for this session you should have a server folder and in there like I mentioned nodejs so go ahead and change open a terminal window and go into the folder wherever you saved it for your desk book server we need to be at this level if you happen to have some services installed like me you might be able to do copy file pass or some people don't have that installed but that's what I'm going to use to get the path of this folder and then I'm going to just in terminal change over into that and finally I'm going to verify that I have known I know I do but if you do know - - version that's gonna tell you what version of node you have running so if you have no nine I've seen some issues so I apologize try try see if you can get node 8 in there great if you look in that directory you'll see that there's a bunch of things we're not going to talk a whole lot about node at all I've basically prepared a script for you so if you do X start hopefully most of you have a server running that's what you should see kind of starting node bin w w you'll know that it's running because you can look in Safari and you should be able to see that if you bring up 127.0.0.1 on port 3000 once you have this running obviously we're gonna be able to connect meantime we're gonna start working with demo one starter now again for those who you have Xcode 93 you should be okay I'm going to run it on nine two which is why you'll see me those horde you know the right-click thing every so often so I'm just gonna go ahead and get that started and all that really desk book does it's it's just really an employee directory sort of typical use case that you might find so in this case it's running in my workstation and so if I click on anyone's particular card I'm able to see information about that person now obviously what you're not seeing is that there's you know sort of HTML going back and forth in these pages and there's some JSON and so on and it's not really all that important but let me show you what the app looks like and don't worry I won't get started with anything significant until a few of you have it so I've opened up my starter project and like I said I'll wait for you guys to catch up and I'm gonna go ahead and select the simulator so we'll go ahead and select iPhone X and I'm gonna go ahead and run it just to show you what it looks like on mobile so you saw what it looks like on on Safari and now let me show you what it looks like inside an app okay so what you expect to be seeing is is this on the mobile app once you've run it so go ahead and open demo one go ahead and open the Xcode project go ahead and change set to simulator any simulator of your choice doesn't matter which one it is and go ahead and build and run and what you should see is here all right so ideally here notice what's happening is that as I click on to any one staff member right I'm seeing a big textview with HTML and classic problem that you see a lot where the then being fed to you as HTML how many folks have had this happen to you when you build an app HTML from someone and how many of you were able to successfully ask IT to change it to JSON exactly so so that's pretty much what we're going to do now so let's get started in Xcode and we're gonna get started by first changing we're gonna edit the storyboard I don't scare you at a storyboard live but we're gonna do it anyways so go ahead and go into your main storyboard and go ahead and bring up the staff member scene very easy here just go staff member then staff member again then view then stock view and finally come over here to the bio label we're gonna change that label just just to be thorough once you're there we are gonna change that if you double click or slow click depending on on your settings here we're gonna just change that to two just a different a different you know we're gonna change it to more information this is just cosmetic but you know just kind of be thorough and after that you want to expand the bio row and there again you'll see that there's a view that you expand and finally you want to land in bio text so that's the text view that's already there okay and what we're gonna do scary as it sounds we're gonna hit the Delete key gone text you gone okay now we're gonna go ahead and find our WebKit and so over in our object library we're just gonna type WebKit and it should be the one that the only choice that you get and I'm gonna go ahead and drag that over into my view doesn't really matter where you put it we're gonna constraint it and constrain it in a minute how many folks are here editing the storyboard okay good good awesome with the WebKit view I selected or clicked on you can click on the little add constraints button here and just go ahead and make them all 0 so top bottom left and right you want them to be 0 and your button at the bottom should change to say add four constraints like mine does we're gonna go ahead and do that okay now there seems to be a bug in the interface builder and notice how the gray area is kind of smaller but yet the blue is larger so don't worry about it it seems to fix itself when you draw so let's not worry too much about that all right so we have a webview we have constraints in there so let's go ahead and add this to our class now so we're gonna go ahead and bring up the assistant editor and let me get some screens out of the way here to make it a little easier to read this okay perfect and so I have my web be on the left and my what should be the staff detailviewcontroller on the right and of course we just want to bring an outlet over so I personally like to click over on the controls I just find it easier to do and I'm gonna sir I'm gonna ctrl click and it's hard to do with the touchpad so there okay I'm gonna let go and I'm just gonna drop in an outlet now call it what I have in the PDF here just so that you don't have problems problems later but it's bio web view just so that my instructions later work on for you you can of course call this whatever you want but just call it by a web view for today no spaces so just by a web view like I did here and don't worry about the error that it's showing you here it's because we haven't imported the right framework yet so you're gonna get a little bit of an error there so now we're weird we're done with the assistant editor so let's go ahead and close that close out of that and now let's go ahead and switch over to our delegate or to our controller here so you want to be in staff detail view controller is where we're going to fix a couple of things and so the first thing you need to do if you're gonna use WebKit is you need to import the right framework so you should be able to do import and then w/e should bring it up and you should see WebKit just like that drop that in alright next we have the outlet that we had for that textview that we need to get rid of so I'm gonna go ahead and just delete out of that and just completely get you know get rid of it we don't need it anymore and next I want you to look for a method called update staff views the name is right there on your on your mark down and you can see how I'm calling it here and I'm gonna go ahead and find the spot where I'm using it there it is and that whole staff we're gonna get rid of that line and we're gonna replace it with something different cuz of course we need to now load the webview not the textview so let's just stop that and then you're gonna do self remember when I said call it bio webview this is why and then we're gonna do load HTML string now the the data is already being loaded for you so it's a staff member bio so that's already coming in the data class and from for now on base URL just put nil we'll just go with nil for now okay everybody at this line okay once you have it go ahead and again with a simulator selected build and run and so you have your list let's go ahead and click and HTML wait HTML so believe it or not where we're headed down a path and so this is this is working the fact that you load at HTML here is actually a good thing we're gonna fix this next but but this is already a good Passons everybody at this point have HTML running awesome alright now one of the cool things about working with WebKit webviews is that you can use Safari developer tools to actually look to see what's happening there so what I want you to do is switch over to Safari and in your Safari menu you want to click on develop now if you don't have developed in the menu look at the note in the markdown and it tells you how to turn it on but you basically want to go to develop develop there it is yay look at that okay so this is where you want to be obviously you go to about blank happens to be that web view you'll see in a minute how we're actually able to change that giving the HTML a title tag and this is where we want to be now you want to be in elements and elements shows you the HTML that's in that web view and of course as you kind of expand in here you'll notice that the head tag is empty right and this is one of the reasons why the HTML is not rendering properly or so tiny inside of that web view and so we're gonna fix that next so the way to fix that is let's go ahead and switch over to Xcode and there's a bunch of code but rather than have you type it if you Excel helper dot Swift you'll see a large block at the top there that's commented out rather than have you type all of that we're just going to uncomment it and all it's doing is it's creating just a little method called wrap that's going to wrap the HTML in something don't worry too much about the something because that's what I'm going to talk about in my next slide so for now just uncomment that go back to staff detailviewcontroller and we are going to go ahead and use it so we'll do HTML helper here there's a library anybody able to rap there's yet oh it's weird that it's Wow yeah it's weird that it didn't do that for me I'm telling you my Mac is just not helping today there it is okay so basically this takes a string so we'll just simply pass what we were passing before yeah and the idea here thank you for that by the way is how many folks have we're able to wrap their HTML yet okay so it's really just me okay I'm missing baseurl okay eyes app way too many things that's what happens when you don't look at your okay good let's see if it runs now and so the idea now is that the HTML at least is going to look better but we're not quite all the way there right we're not we're not quite there so let me switch over to the deck and try to get through that great so after that somewhat problematic demo one what we essentially did is we hooked up a WebKit webview we have some HTML content getting loaded as a string and what we did in this last part is we made HTML look normal HTML you're receiving is obviously not complete right it's just a snippet a part of HTML and so we actually added all of this that code that I had you uncomment essentially wrap your entire content see where it says enter HTML here that's where we're now injecting the content we're reading from the nodejs app and the rest of it is there now what is normal HTML HTML has a title tag usually it has a meta tag we're going to talk about that one in a minute you can have script tag style tags and so on and hopefully we'll get through all of that now what we added in the head tag that made it look normal size is viewport how many of you have heard of viewport before or have to deal with it yeah the viewport is a big topic so I'm not gonna get into it too much here which is why I'm giving you the two links but you can do a lot with the you port just suffice it to say that it allows you to control how HTML displays on a very small web browser okay so you definitely want to check those out but that's all we did we added viewport initial-scale one shrink to fit none devices device width we're basically telling the HTML look you have this little tiny area or the webview so be sure to constrain yourself with that now displaying HTML is great right and so there's a problem when you display HTML which is that there might be hyperlinks in that HTML and those hyperlinks are not always convenient for you to just expose to your to your particular user and so the next part we're going to get into is how to control both links as well as what the WebKit webview is going to load so I had a little bit more banter about that and there was another part of the demo that I skipped to kind of try to catch us up but in the current application if you noticed you might have seen there's a Twitter link at the bottom of the cards and when you click on it Twitter displays really small in the browser sort of displays in that bottom area it's a web view right we put the webview in that area we load we click on a link it loads its content in that area but that's not convenient that's you know bad UX so we're now going to get into how you can control those hyperlinks so that you can provide a better experience for the user now in this case we're gonna implement a protocol which is navigation protocol for the webview and it actually lets you do more than just control clicks it actually lets you control everything that the webview gets to do and it gets to load which is really what's powerful about it now there's one little piece of information here that the webview initially loads as this about blanket initially loads with nothing and then we're loading a string into it so that's why you'll see in a piece of code here how we are allowing about blank to be to be loaded and you'll see that in a minute now one important thing is that when you tell the webview that you are going to take on the responsibility of controlling links and navigation you have to allow or disallow you can't not do one or the other you have to do it otherwise you will get a crash and believe me you will get a crash at some point and when you're working with web fees and so what we're gonna do here real quick is we're going to analyze the target or the link that the user is about to click on and if that happens to be Twitter we're gonna launch that in a Safari view controller remember before where we talked about the differences of the two so we're gonna use that as a trick we're basically and say oh wait a minute this is so far view control let me show you something different and then we'll do some more things so again for demo two you probably have the note server running still so that awesome keep it running and and let's go ahead and and see how we add some of this stuff so let me switch context here again all right your servers to be running we've already used Safari developer tools and let's play a little bit with Safari developer tools and I'm actually yeah let's just let's play and see where that gets us all right so you should have the application running on your simulator like you did before and bring up Safari and once again go into the odd that this is this is kind of interesting and important remember before how we saw about blank and now it's actually named desk book web view and that's because the title tag that we passed in that HTML is actually what it's pulling here so it's kind of convenient to actually put a title tag even though it doesn't seem like you need it it's convenient just to help you debug later and so how many of you have used Safari developer tools before ok just a few so I'll talk about it a bit so all we're gonna do here is I want you to expand and find one of these DTS there's the titles here and all I want you to do is I want you to come over here on the Styles panel and I want you to go ahead and add a particular style actually you might have to do it in style attribute here there we go so I kind of double clicked on their style attribute and we're able to actually type in here and the only reason why I want to I asked who had used you know developer tools before is because if you've used developer tools you've seen this a million times but notice that I just made graduate school bold okay notice I'm gonna actually turn it on and off let me move the screen over here and so look at graduate school over here on the left okay and I'm actually able to kind of control what this looks like now of course I'm not persisting that to the application I'm just seeing it here live just for easier debugging so since we want to make this a better-looking what this tells me is it just helped me figure out that if I out of style to my DTS to my DT tag then I'm gonna make those titles look bold right so let's go ahead and figure out how we how we do that so all we really want to do is we will go back to Xcode and I want you to find the HTML folder and open up the style dot CSS file okay and just below bio style the comment that's there we're gonna add we're gonna add a style declaration okay so this if you've done HTML this this probably looks very familiar to you so all we're doing is we're basically just saying hey we want this particular piece of the HTML content to be bold alright and if you build and run the app again you'll see that those titles now all are bolded now I don't want to gloss over I was gonna jump over this section but it's kind of important so when you're working with WebKit web views you're going to use the developer tools quite a bit to sort things out because it is quicker to use the developer tools than it is for you to make change build and run make change build around make change build and run so I don't want to sort of gloss over it and of course mine okay now now let's implement that navigation delegate because that's really what that's really what we want to do so again back in staff detailviewcontroller we're gonna basically just add an extension or we're gonna extend this class so you can do it right at the very end right and you have you have this code in your in your markdown so staff detailviewcontroller and you're going to implement the WK navigation delegate so be sure to pick WK navigation delegate not one of the other sort of choices so bring that in there and really there are two methods that we could override but we are going to use specifically in this this gets weird because when you type it okay the easiest way is to type a tiny bit and then you'd see quite a bit actually there's there's better text to type so we'll do decide policy for yes if you type decide policy for it happens to give you the two possible ones straight at the top of the list you see these two and the one you want is really that that first one now the difference between the two and I kind of jumped over it a little bit but the difference between the two is in one of them you get to you get to look at the link and decide whether or not you allow that link to be loaded in the other one it loads the content of the link and then you get to decide if the content should be allowed okay so today we're gonna work with links here so basically what we have is the navigation action wk navigation action and then the policy okay just wanted to make sure I didn't screw it up on my side now we have to add some logic to this right so first we'll add a guard statement and we're just basically going to make sure that we actually received a URL target so what we want is the navigation action request and in the URL right that's what we're interested in looking like do we even have a URL if we don't have a URL right then there's nothing for us to do so remember when I said that you absolutely have to respond so if we don't have a URL then you know we can't really decide what's going on so we are going to deny it and of course every good guard statement has to have its return next let's go ahead and hold on to that URL string for later so that we can decide what to do with it and I'm just gonna put in an absolute string just just for total convenience and this is this is all in your markdown and remember when I said before that the the the webview loads with this about blank so we're gonna go ahead and and just allow that now if we don't allow the the about blank to load because it looks you know it's just it's it's a navigation action to write the webview is being loaded with nothing and it happens to be about blank so we're gonna go ahead and allow this one so this is your handler and we'll do allow and this just lets just be clean and return here and then finally if it's something else right we would say well gee it's something else we don't know what it is we want to control what our user is doing so let's go ahead and cancel all right so let me go ahead and run it all right now ah I forgot one thing very very very important which everybody that's ever implemented of protocol knows I did not set my delegate exactly because I was on the next page of my so I'm gonna go back to the code real quick here and basically we want to do it on on viewdidload see there we go alright everybody understand what I just did wrong I don't know if how many did it just like I did okay a few people so we just want to go back over here and and set bio web view right delegate sorry navigation delegate and we want to do self okay that's what that is alright I'm gonna build and run and now I should still see HTML content there it loaded right doesn't look any different but it loaded had I not allowed the about blank this would be empty right and it's a good thing you can try it on your own take out that take out that if statement where you're allowing the about blank and running I mean not right now but do it later and and you'll notice that it you'll get a blank web view okay so the next thing we want to do here is we want to do this whole trick about hey it's Twitter so let's go ahead and launch something else instead of letting the webview do its thing so let's go ahead and go back to our to our view controller and we're gonna go ahead and bring up the Safari and actually it's weird yeah it's affari services but it's SF something or other so it just import safari services then go ahead and find a method called start call there it is we're not touching it but if you go right under that method okay we're gonna add a new one here and we're gonna do file private cuz you know we're we brew that's how we roll and we're gonna call this one open with Safari VC you can of course call this whatever you want but you know remember whatever you call it we're gonna take a URL alright and finally we're going to set the Safari we're gonna set a reference to a safari view controller here's where here's where it's SF Safari so import safari services but down here it's FS the SF Safari controller of course that takes a URL and we will pass the same URL we're passing ourselves now you know we have to go for good UI so we're gonna make this modal right so you know this this is kind of like I mean it's important for UI but it's but code wise it will work even if you don't do this particular line so we'll just going to go ahead and do an overlay fullscreen and finally of course we would present our safari we've drawn so far ABC and we do want to animated and it so happens that we don't really need anything for completion lesion so we're go ahead and do Miller okay everybody at this point were you able to add the open with Safari cool alright now that we've done that is that clear but that's doing that's too we pass it a URL it opens a safari view controller that's really all it does now we have to use it right so let's go ahead and intercept Twitter so to do that we're gonna go back to our navigation delegate so come back to your extension and let me make some room here awesome and just before decision handle cancel because otherwise you're gonna get a crash and believe me it will happen to you we're gonna say okay wait a minute if it is a URL string that has prefix okay so in this case we're gonna say gee do you start with probably HTTP by the way thank you Apple so we're looking at that string and then we're basically going to cancel now that doesn't make sense it's cool I'll pause there in a minute let me just get my code down and we're gonna return here to okay so why am i canceling the navigation at this point right like we want to show content right why cancel the navigation right we don't want the Safari view controller to do the navigation we want to bring something else in okay so so that's that's essentially what we're doing here we're saying wait a minute we're not gonna allow this to happen and then we're gonna bring something else in so let's go ahead and build and run and see what we got so there we go and there's Twitter and voila we have a modal Safari view controller that takes the user to Twitter which is exactly what we wanted at this point cool everybody here at this point got Twitter coming up great cool I'm just gonna keep keep on going cool so we got through that one hooked up the webview got it to respond with some HTML content we were able to add some styles to it and control it a bit of course you know I'm gonna show you a little bit more now how you can style it even further and so on and we were able to intercept the navigation or a click in this case to Twitter and then from there we were able to show the Safari View controller instead of the WebKit webview so we're good so far now as much as HTML CSS and images are cool to display generally right you might read these from the web you might connect to an API you might pull them down and and display them sort of in real time but what if your users device has no internet connection or they're in an area where they have poor reception or you just don't want to read this from the web or you can't read it from the web case in point you have a web application that already works and the web team has done a great job making that look great on the web and you ask them for custom styles for your mobile app how many of you think you're gonna have any luck getting any custom styles for your mobile app right so so now what do you do about that well you are in control of that HTML just because that HTML from a web service from a website doesn't mean you have to use it as is as a matter of fact you can load whatever Styles you want and so I'm gonna show you how you can actually put a CSS file right in your bundle that you deliver over with your package of course if you'd go that route then you need to do an app review if you need to change it so there's a combination of the two don't worry about that yet I'll remind you at the end but what you can do is you can package files with your application deliver them in the app store but you can have a little loader so every time your app starts it can call home sort of speak on API you control and says hey do I have a new style yeah okay let me let me download it and save it locally if the answer is no or if the answer is no I don't have internet you use the style that you already have cached so that's what we're gonna get into now we're gonna get into how to load files into the bundle so that you can distribute it now earlier on I did not show you because of our little snafu at the at the beginning that we're making a call to this thing called get CSS and although I didn't show you during demo I'll show you again when we're in the code because we're actually injecting that CSS in the style tag in the head of the HTML does everybody know what that means well somebody nuttin understand what that means that I'm injecting the HTML into the head tag as opposed to linking to the file okay so what that really means is that I'm literally typing the CSS in that area of the HTML instead of referring to a style file outside I'm typing it there just imagine that I you know I went in and dropped it all in there that's not the best place for your CSS you get some blink it also makes debugging harder and it just makes run unruly page and if any of you have had to deal with marketing teams that are obsessed by PageSpeed you know exactly what I'm talking about when you put a lot of stuff in that head tag anybody relate then you're lucky so actually there's one trick we have to do to the webview so that it can find properly remember earlier when we said for baseurl we're just gonna put nil and it's not gonna put anything so the webview takes a parameter that tells the webview where it can find references or where it should find files or links or other items that it is trying to load if you any of you did HTML in good old days you might remember the base tag there's a tag in HTML called base and you could say the root of my website is WWE supercard on anything you tried to load in the HTML would be based on that WWE website com so the web view has the same thing and we're gonna use that to our advantage be wondering what do you mean by that how many of you realize that the bundle in your iOS device actually has a path right it's there it's a file right it's a program it's an app and the bundle path which is this convoluted very long and somewhat confusing string but it does have one and so you can refer to the files inside the bundle as long as you know the white the right path the white path so we're gonna we're gonna leverage that to where we're gonna use that to our advantage because what we really want to do is instead of loading the styles directly into the CSS the head tag we want to do a standard link href again for those of you have done HTML you've seen this a million times you link to a stylesheet in the top of the document and so that's really where we want to go as far as Styles is concerned that's how we're gonna thats what we're going to load now it so happens that iOS also supports custom fonts how many of you could use custom fonts in your apps anybody yeah so iOS supports both TrueType fonts and OpenType fonts and so we're also going to go ahead and package up a font into your bundle and then show you how we can refer to that but not just in the application but also inside the HTML so we can refer to those custom fonts as well which is an important trick we're gonna go ahead and do that by the way anybody use font face at font face you know it's a very common HTML thing but you'll see that the way we connect HTML in WebKit to a particular custom font file is using the syntax called @ font face and when we get there you're gonna get to add some of that yourself alright so let's get into this last demo also and and see how we can get it going it's the same thing you'll you'll have your your server running and and we'll get it going that way all right first things first so if you look in the folders here for demo 3 notice that you have a slots folder and notice that you have a font in there called neuro Paul now first thing we need to install that on your Mac ok so first thing is when you actually need to go ahead and get it on your Mac that's the easy part all you have to do is double click on the font it'll come up in boy that's there's a lot of stuff on that screen it'll come up in font book and you just need to click on install font okay let's go ahead and do that and race your hand once you have the font installed and ready to go awesome now once what once it installs and it did take a second for me funny enough I'm I think if I click on there we go once it installs if you click on it and then you click on the eye icon up here you can see the postscript name of the font now this one's easy because all the names are saying neuro Paul neuro Paul nor Paul notice the N is uppercase this is kind of important you'll waste lots of hours in WebKit web view when you forget to make that in uppercase the point is font names are case sensitive and you care about this first one the PostScript name ok so just remember that or make note of it and I'm telling you because I've wasted hours yes how many people relate to that yes exactly so very important so so remember that now next is we need to bring the font file into your project Xcode for me was funny about that so the way I'm gonna have you do is I'm gonna have you copy that fonts folder so you know click on the fonts folder itself there drill into your desk book you know my tutorial all the way in there and drop it in as a copy you would think that if you bring in an Xcode and you do the whole draggy droppy thing it would do it correctly but I'm telling you four of us tried and it just would not work so you just do it this way and you'll have no problem great next I'm actually going to switch to my demo 3 in this case it didn't matter so much between demo1 and demo2 was the same if you had followed along but in this case you do need to be on demo 3 because there's a graphic in there that we're going to need so just make sure that for this particular demo you are in demo 3 and again for me I have Xcode 92 and 93 so I'm opening it in 92 ok great with that I'm actually going to put finder right here to the side I'm going to find my folder that I just brought over with fonts and I'm gonna do the whole drag-and-drop thing ok so can this is hard to do with a touchpad okay and I'm just gonna it doesn't really matter where you drop them but you know you want you want to drag them over you get the usual you know and copy items if needed which is not needed because there's something weird and then finish so this is where you want to be you want to have the font in your project Navigator is everybody able to get the fonts in there okay no I only see a few hands okay good good good okay so now that it's in the project in order for you to use the font in things like interface builder and so on you do need to put it in your info.plist so let's go ahead and do a quick edit here now info.plist the easiest way to get this going smack at the top information property list do a plus and in here you want to type Fon TS and it should already go to fonts provided by application okay and then hit enter alright next use the disclosure triangle to you know bring that down or to open it up and expand and you'll see that there's already an item there item zero and so here's where we need to put the name of the font file now you might not have caught it but the font file is newer Paul dot t TF just like it is in your in your markdown in your in your tutorial there but it's all uppercase and in dot and in all lowercase okay so I purposely picked the font that had funny you know capitalization because to make to force myself and you guys to draw the point here alright now we know that it works because if we go to interface builder and we try to make some references to it we should now see it not just an interface vulnerable but when we run the application if you don't put it in your info.plist but it is installed on your Mac you do see in an interface builder and it will work beautifully in interface builder but then when you run your app it will not be there and again you will waste hours just like you did before with the thing I'm telling you fonts are a time sync so just to prove that it works we're gonna go ahead and go back to our staff men scene and I'm gonna go ahead and change it and the first one here I clicked on name for the label for the name and I'm gonna go ahead and click on fonts I'm gonna change from system to custom and once you do that you're able to see the fonts that are on your Mac and so there's my newer poll notice that is uppercase in and then the rest of it hey and I'm gonna go ahead and click on done notice how it's nice and perfect on the left now I'm gonna go ahead and and command click on a sorry shift click on a few of these it's kind of weird there we go so I'm gonna change it there I'm gonna show it not field label let's see mobile and I'm just gonna change it in a couple all right by multi selecting you're then able to select you know sort of change a bunch of them at a time without having to do it one at a time so that's what I'll do okay so I'm gonna go ahead and now again select if you switch projects your your simulator might not be set properly so make sure you select the simulator up here and then I'm gonna go ahead and build and run and it falls well and it's properly connected in your P list then we should actually see the custom font inside the app yep mine mine isn't up how many folks got it to come up in there out there okay cool I'm just gonna breeze right through it because mine did not come up I don't know why cool all right now let's play with the base path in the in the wk webview so for this we're gonna go back to the controller to a staff detail view controller and let me get rid of some extra things here that we don't really need and really what we the only thing we need to do if you find that line again the easiest way might be to just search for load HTML string right it takes you right to there and we need to just get rid of base URL and put in there the path to our bundle so again we want to load files from the bundle so we're gonna tell the WebKit the webview where it should find those so it's very simple change its just bundle dot main dot bundle URL okay that's really all we need to do in there then let's go ahead and wire up that custom font in the actual CSS also so again switch to the HTML folder here and open up the style.css and i'm gonna go ahead and add the font face in here doesn't really matter whether actually it does matter where the reference is so we're gonna go ahead and put it towards the top here and we'll do at font face now autocomplete in xcode does you know bring up at font face so you should shouldn't have to type too much so here the first thing we need to do is font family and here we're gonna use the true the postscript name so uppercase n and then you know newer paul and then we need to tell it where it will find that font now it happens that this is also going to be a URL but it needs to be quoted right because now we're telling it where the file itself is for the font and this is the one that's all all uppercase okay so except for the dot TTFN no need to use fonts because what happens is the the files so your project Navigator has this convenient structure to help you organize files but when these files get put into the bundle they all get put into the bundle together you're right you're right and that might be why mine didn't yeah that may be one mine didn't work how many of you ended up with the blue sort of folder in your navigator are supposed to yellow okay did the font work for you guys it didn't yeah so you are right so let's go ahead let's try it so because of the way it imported ah yeah yeah yeah I'm telling you hours hours you will waste hours with that so I'm gonna try it this way and see if it if it works for me now I still it's didn't work for me in the labels very possibly because I also need to put in the plist right so let's go ahead and do that that's a good catch thank you right and let's see so for those of you where the folder ended up is a little blue folder instead of yellow you might want to try what I just did go back to your info.plist file put that folder structure in there and same in your CSS okay all right now we need to apply this to our actual labels so we're gonna go back over here to the font-weight:bold yeah that was that was a good one thank you again and we're gonna do font family here and we're gonna make the reference to okay and now remember it's the PostScript name not the other one okay all right good to go and last is let's go ahead and change the way we're bringing our CSS so if you recall we're gonna go ahead and open our HTML helper again and remember the the slide here so again we're injecting the CSS into this longer string that's got a bunch of stuff and let's go ahead and actually get rid of that and we're gonna use a good old link href now because of where we're typing Xcode will give you no autocomplete in this part so I need to look at my notes and again another opportunity to waste lots of hours here because if you get any of it wrong it will not work and of course I want to refer to styled out CSS cool and now let's build and run and let's see if our fonts are back or if I get them at all hey there you go that was it that was it but no webview let me check another one custom fonts came up in the web you okay good enough right and actually that's my design so at this point we don't have the content in the webview because we're trying to load a style.css file that we actually have not quite allowed in we've not allowed the bundle string path at all so let's keep going here in Xcode and do that if you recall in our navigation in our extension or a controlling navigation we we were deciding on a bunch of things and specifically so far what we've said is that if we're going over to Twitter then we're gonna allow it if we're loading about blank then we're going to allow it but of course we just added at least one file that is coming from the bundle right so we need to also allow the path to the bundle in there so we're gonna change that if statement a tiny bit and we're gonna say that if it has we're gonna add a second part to the if statement really is what we're gonna do we're gonna say if the URL string has prefix and now we're gonna prefix the bundle that the prefix of the bundle right so we're gonna have put that in there Maine and in bundle URL Hey look at that that was um perfect or all right so does this make sense to everybody we're basically saying look if whatever I am loading comes from either the bundle or from about blank then we're gonna go ahead and allow it and yeah that's right I need to make it a string otherwise I'm comparing you know weird things to some other weird thing all right now by the way there's a note in the markdown about what is this whole bundle passing and you know it's it gets kind of convoluted and and and so I encourage you to have a peek there and to play with bundle pass and so on but I'm gonna go ahead and and build and run again and see if I now finally get my webview yeah there it is and now I'm getting the fonts in there too that was a great save I'm gonna have to get your number so I can have you at all talks that I know thank you okay so so so far right we were now able to hook up that cell sheet now interestingly enough it didn't allow the load of the stylesheet right and it didn't load the webview at all so that's actually a restriction that even I didn't realize was gonna happen at least I thought like okay so the CSS doesn't load but the webview still does but apparently it's connected so there you go you get you get locked out anyhow so so far so good now let's let's talk or let's try to get an actual bundle file in there so let's get there's there's an image file that I've provided in here that's a little badge and this this is a case say for example where hTML is coming to you from this API and you want to enhance it in some way so in this case we're going to actually add a graphic right above the the bio will say employee of the month or something like that right and so let's let's work to get that to get that to work so essentially notice that in the HTML folder I have a badge that PNG file that image that I provided for you so let's go ahead and change the CSS to use that and so I'm just gonna add a class here div show badge now it so happens that the HTML already has actually it doesn't we're gonna add that in a minute too and we just want to add all of that stuff so that's gonna be background it's a URL so I'm gonna refer to image I don't want to repeat that background so I'm gonna say none if you repeat it otherwise it would do a pattern you you could if it was interesting to you we're gonna go ahead and give it a size this case we're gonna make it square 100 500 and let's see we're gonna give it a position so we're gonna put it right on top okay is this is it this HTML you know recognizable baby but it's just gonna throw an image in this particular div and it's gonna put it on the top right and it's gonna be a hundred by a hundred now of course we have to somehow connect that over to to the HTML that we're rendering it so happens that the HTML we received if you were to look at it in your Safari View controller you won't actually see anything called show badge right it's just not there or my finger there it is so if you were to inspect this HTML here and sort of drill into it you won't see anything like show badge luckily though we can change the way the HTML loads and so that's what we're gonna do next so essentially if you notice in your HT NAR HTML helper one of the things we were able we were passing ourselves in the wrap method is a class a class to wrap this with so we're gonna pass a string into this method and we're gonna change it in a minute but I want to show you what we do with that all we do with that class is we essentially make a div and we're injecting the HTML we're getting from the API we're injecting it into this div and we're totally doing this for convenience and it sounds silly but I want to bring it up because often times you'll get HTML that has structure that is inconvenient to you or it'll have some structure that pulls some default CSS from the web server and that's not convenient to you either so the best way to break the web server CSS is to change the structure of the HTML and an easy way to do it is to wrap it in a div that it's convenient to you so that's already all wired up in there but let's go ahead and change it so all we really need to do is go back to our to our load HTML right and you'll notice that we're passing bio as the class right now and I'm gonna add another value there show badge let me check my capitalization because obviously it yeah it CSS is also case sensitive so show badge so what we're doing here is we're basically just loading the HTML putting it in a special div and giving that particular div a specific class everybody able to get to this part and make a change cool I'm gonna go ahead and run it and see where it ends up here's Carly Carly should have a badge hey I'm gonna save that again because somehow my echo doesn't autosave that's a new one cool awesome so mine didn't come up but I'm not gonna try to chase it down now since we lost so much time at the beginning cool so now let me let me ask which context here and then we'll actually going to be able to wrap it up and end on time after all cool so you you heard some arguments of why you might want to use web kid web views save some time reuse some layouts that are already out there on a web site or an API share some code with your Android development team avoid an app store review not have to you know you can load some of this content and cache and save it right so that you don't have to read it from the web each and every time you saw the how important that your HTML have the proper structure okay make sure you have a head tag make sure you have a title tag it'll help you in debugging make sure that when you insert CSS you have the proper link href as you saw that's you know it can cause problems now don't be afraid to load HTML that has links in it it's okay you can control it you can decide if those links are allowed or not it's important and you can control that completely also you can decide what loads and what doesn't now one of the things I didn't show you is that as you as you have something coming in to be loaded you can swap it you can load something different remember how I said that you can control the links not just where the link is going to but what is coming back to you and you can change what comes back to you and load it that way as well okay don't be afraid to use styles in the bundle you can include style sheets you can include font files images and so on why would you want to do that save the bandwidth if your application is relatively bandwidth constrained you can include a bunch of files in the package that you know are going to be there or include a mobile specific CSS that's already conveniently set up to do what you need it to do okay there are some links that help tremendously with WebKit specifically the Apple wk webview documentation it's dry reading but you always need to know like what that one little property does okay it's just okay who knows so you always need it there was a great talk at WWDC 2017 on customizing the webview beyond what we did things like managing cookies we didn't even get into things like authentication but the WebKit webview does support it 100% so as you establish a connection with a remote server you can hold on to the cookies safely and securely and then you can send those cookies back to make authenticated requests so for those of you that have internal applications where the your your user is logged in you can definitely pull it off and do it securely now you can implement content rules which is kind of like almost like ad blocking sort of concept where you can decide exactly what happens in the web kid webview we didn't get into JavaScript today because there was just no way to get all of that into three demos however the WebKit webview does support JavaScript fully and I've written several applications where we have an analysis engine that was just easier for the customer to deliver to us as JSON rules and we simply just load it into the webview and pass it data from Swift and then sort of interact with it that way it's really powerful stuff very very useful in some cases finally I am on twitter at Eric was taken sorry for the glitches with the files that were missing I do appreciate that you all came and I hope that you enjoyed the talk and that's WebKit but Buse [Applause] you

Channel: raywenderlich.com

Views: 5,343

Keywords: wkwebview, ios webview, embedding webview, swift webview, wkwebview tutorial, wkwebview swift 4, swift 4 webview, uiwebview tutorial, wkwebview 101, wkwebview for total beginners, learning wkwebview, how to use wkwebview in swift, how to use wkwebview in swift 4, how to use wkwebview, wkwebview live tutorial, live tutorial, live swift coding, swift 4, swift 4 conference talkm, using wkwebview with swift4, rwdevcon, rwdevcon 2018

Id: SgDH3d_-N-c

Length: 68min 32sec (4112 seconds)

Published: Wed Jan 23 2019