 My name is Aizad, currently working with LCO creation between offline travel app. Just a little bit history about me. I've been actively coding for the workflow since 2011. So some of my peak projects are BMW working with MediaCorp. So today I'm just going to show you guys a little demo on WebKit. Why WebKit is more powerful than the previous UI WebView. I think there's only one main difference. You can actually inject JavaScript into it and edit the HTML from there. So I find that to be very useful because a lot of my clients that I come across, they have this website, they want to put it into the web. But then there's a navigation bar which looks very ugly. And the navigation bar allows the website to move on to other pages which they don't want to make the app look as if it's part of the app. So today, so let's just go on with setting it up. So just setting it up will just be just a simple WebView. So small. I'm just feeling good. We'll just go to the navigation bar. At the same time, I don't see toolbars. But actually, I think a toolbar will be good. It polishes the view a little bit more. And we're not going to have a WebView here. Because if we're going to check in this library, there's no such thing as a WebKit View. So the WebView that they have is the old one. So we're not going to use this. So we're going to just leave it empty. Inside the toolbar, we're going to add buttons. Okay, there's a button there. Put one more here. And I'll fix face here. Push it all the way to the end. So this one early load. Okay. We're going to put this pattern so that within the WebKit, we are able to navigate between the different pages. Usually beginners, they forgot about this toolbar because it's not in most of the tutorials showing them that they can actually do this to navigate. Okay, so from there, we're going back to view controller. I'm just going to set up. I'm just going to copy and paste. Just to make things faster. So, okay. I'm going to set the delegate. Declare the delegate here. So that is form the difference. Besok of the normal WebView delegate, we have the navigation delegate now. So I set up the back to go back, to go forward, and to reload. Okay. So I'll go back to my storyboard and link all this up again. So to go back, forward, and reload, I don't have to do anything inside my view controller. I can just go to... Let me check. Okay, sorry. Since this is a WebKit, there's no WebView here. So there's actually nothing to link here. So we go back into the codes. Okay. So previously, with the WebView, you have the UI there inside the storyboard and you can straight away link it up. But because WebKit does not have a storyboard at this moment, we have to do it manually. So we go down. You can set the other configuration if you read the documents. You can set other properties inside it. But for today, I'm just going to use the default settings for this. Okay, for some of you guys who does not know what is new, new is actually a short form for allot init. So instead of doing something like something like this, okay, I can just use a new short form to do this. Okay. So after I initialize the config, the thing with WK WebView, the init function is to have a configuration. So we have to get this before we are able to initialize the WebKit WebView. Check the other init. We have the init with frame and init with configuration. But these two will not work as well as this one. So I have my init with frame configuration. And the thing that I want to set is my delegation delegate, which I really declare up there. WK delegation delegate. I just want to see more of this delegate as we go on. So here is where I set the back, the forward and the reload. So it's very easy. I just set the target to my WebKit WebView and I just select the selector. They already have the selector inside the WebKit itself. So you don't need to do anything extra. Just use the WebView and then just use the selector that they have provided and just set all this. We need to load the website. For this example, I'm actually using my previous company the website because they have a very good example of a navigation bar which needs to be removed. So instead of going to the front-end guys, the one doing the HTML and asking them like, for mobile, can you just remove just set the display to none. Okay, I forgot one more stop. So I set available for your string. Okay, I'm just going to delete this. Okay. Okay, so the way to load the request is similar to using the previous WebView. You need URL, then update to request, then update load the request. So with that, let me see if we can run this without doing any other stuff. I'm just going to put this thing here and this will somewhat do it like how you see it in Safari. So when you scroll down, the toolbar and the navigation bar will hide. So let me see there is actually just a little code for this. Just to reset everything all the buttons back. Okay, and I'm just going to paste everything here. So let's see if we can run this without having any problem. There's claims to win it plus. Okay. Okay, let's move this. Let's run this. Okay, I'm going to use it. Okay, it's taking some time to load simulator. It takes quite some time to load simulator. Let's let's go back to the code. So while we wait for it to load, just going to go into the delegate. Okay, so I'm going to go through one by one. So when the site, it will first call this. Start professional navigation. Followed by deep navigation and followed by a finished navigation. So usually for starting the professional navigation, that means nothing has been loaded at all. It's just about to load. Then when it commits, it already has the connection and it's going to load. That means it's committed already. So usually I put my progress indicator here, my activity indicator here and I stop here in the commit. That means once I commit, once the connection is committed, I can stop this activity indicator and then the rest of the view will just load into place. So some people put it at the deep finished navigation but I find that to be irritating because once it starts loading, it will finish the site to finish loading, then the indicator will disappear. But for this time now, I don't have MbProgress Hard so I'm just going to remove this and I'm just going to update the reload button to cross. I'm just going to remove these two and then finish navigation. That means I'm going to reset back the toolbar. So we have two fail delicate method here. Why fail professional and why fail navigation? So this will happen when this fail when they try to make the connection at first, it will go here. This is when it already starts loading, then something wrong happen like there's no internet connection or someone make a call or something that it will drop here. So with this, I just make it so that it will just fall back into this method. So here I'm just going to show an alert. So let me just see if it's working. Okay So so this looks like how to implement in Safari. When I start to scroll, it disappear. When I start to scroll back down it should appear but it was a fail. I miss something. Ah, there you go. So when it starts scrolling down, it should appear again. What's my tool So Okay, I know why. I can hear my screen got my navigation, I did set something. I have to toolbar there and my button is gone. It's there but the thin is not there. I'm just going to change the color but it should appear. Just run this. Okay, so now I'm running the simulator again. This time round it will have the delegate method inside it as well. So whenever it starts to load the button will change to across. Is it loaded? Is loaded but the color is still off. We're going to just proceed. That's strange. Problem is the button is not in the door. You need to disable navigation toolbar. That is a different toolbar. Navigation toolbar? Just disable. Just disable. Oh, so I disable this and it will appear there. Okay. Let's see when it works. Thank you. It's there. Oh. Oh, it's there but the color is not there. Okay, now it's supposed to be, there's a back button and a full button and there's supposed to be cross button. The toolbar is there, I think. Other two buttons are maybe you need to put constraints for them also. Okay. Just resize the window to iPhone 6 or 6 Plus. iPhone 6 Plus? iPhone 6 Plus. iPhone 6 Plus. Oh, this is preform. Oh, this is preform. For the back button, just put the constraint and just put it here. Put a pause train here? Okay. So, no, that is not just left. No, no, no. Left and bottom. Okay, now the main point is trying to show why WebKit is better than WebView. So, as you can see here, there's this navigation bar which will allow users to navigate to other page which I don't want that. And I have these two buttons here which I also do not want because I can just put this on my navigation bar. Okay, there's a like button and there's a back button which I already have it on my navigation bar. So, let's remove all this. So, first thing first, let's try to remove this navigation bar. Okay, so what we're going to do is we're going back to the code and this is where we're going to go into some JavaScript. So, from here, new file empty, we call it highfbar and I'm just going to this corner. Okay, here's the highfbar. So, before we go here, what we want to do is we actually want to check the website itself. Let me see if I'm online. So, it's going to be something like that. So, this is the website on the Chrome, my Google Chrome. So, what I want to do is I want to inspect this element ID. So, from here, I just go to inspect and I found out that the ID for this is my navbar dash header. Okay, so that's my navbar dash header. So, let's just do a bit of testing see whether it will grow and it disappears. There's no more, there's no button and whatever there is that was there previously. So, I'm going to do all this in the app itself. So, from here, I shift back here and this is what I'm going to do. So, for those of you who knows JS, you'll find this familiar. So, basically what it's doing is that it says putting this script either to the start or to the end of the DOM. Okay. So, I create an element called style and then the style tag I'm going to get the ID and then I'm going to pan it to the DOM. So, to save this let's go back to the Chrome itself just now. This is my JavaScript console. Let's see let me try to reload this. And so far, style tag goes to auto they're supposed to be auto-complete but it's not. So, what it does here is that it injects this in and at the end of it all I'm going to pan it. So, it create an element called style and it will put this in between these two tags, this style tag and it will add this either to the start or at the start or at the end that is up to you. So, let's go back to the code. So, we have that. I'm going to go back to my view control, my webkit and I'm going to do a little bit do something extra with the config. So, with the config what I'm going to do is I'm going to add this JavaScript into the configuration file. So, I'm going to do like this. So, you get the script you get the path for the script and you get the content and after that you get initialize WK user script and this is where you state whether you want to put it at the end or put it at the start there's a reason why you want to put it at the start and why you want to put it at the end I will show you an example so, you can make a difference. Ya, let me just check. For this time round, let's go at the start this is script start and we set everything so, I'm going just run this again. This time round the navigation bar should disappear. So, as you can see the navigation bar is disappear. So now I want to remove this too. Again, I'm going to go back here Just now I put it at the start I put it at the start because inside this.never 34 Okay, there wasn't any display line here so, I'm going to inspect this line menu holder button menu holder button okay also nothing here I'm going to inspect the heart ah, the heart I'm going to set this display to none but they have already put it here as a block so, let's see how this can affect where we put our javascript so, for this line so, that's the navigation bar ID that's the ID for the menu button and for the heart that's the ID got 12 indicator but take note that 12 indicator has already declared display is block so, let's see how this will affect our code so, I still stick to start the nav bar disappear the menu bar disappear but the heart is still lag okay but what happens if we put it at the end okay, disappears okay for those who do web development will know that the placement of the css file and the javascript file to play part so, what happen here is that they run this css file then after that you inject your css so, that's why the display dot none is being overridden but if you place it before that's why it will still remain there so, to do this you need a bit of css what's that knowledge so, other than that you can the things that I'm not going to cover today is that you are able to actually get data from the website itself so, for those who know css you can actually get the element that you get the data from yourself so, from there you can actually modify your table or modify your history file or, you know maybe you have a list of maybe you have a list of this and you want to redo it for the mobile so, you can actually grab all this make this display to none and then put in your own display so, yeah so, that's it for my webkit introduction I guess that's why using WK webkit is now more powerful than using the OUI webkit forget the moment you are using the injection of the JavaScript the JavaScript actually is adding to the page that you are loading meaning that whatever you are adding for example you are hiding the page is built up so, what if you turn off and turn on and element the runtime i mean, you want to give the option to say you want or you don't want the menu up there i think you can do that with javascript you mean to execute the javascript within the browser so that shift the status at runtime instead of leaving one option okay, i've done, i've looked into that i've not explored that but that's quite interesting javascript, you should be able to do it but i have not explored it yet so, i don't take my word for it but if you can inject javascript you can just do everything yeah, just i think it's possible i think it's the javascript injection done on every page load on every page so, you see here right the configuration i initialize it once into this configuration so, for this one so-called WebView item WQ WebView object itself this one object have this injection so, what the user is in that page and user place or something and it gets away so, will the javascript injected be reloaded or it's going to be purged now, if it's back then if you have a separate menu to render the navigation everything the same javascript would be part of a new page you're making natural, right? say you know that page will hide the menu bar and someone, the user place away and goes back so, you find out the back button so, basically you are rebuilding the page instead of going back into the history you have javascript versus in the crash on browser but if you go back from another link the page is rebuilt so, it doesn't have that may not have the javascript there but the javascript injection still no, because he's doing here and due to both, right? but due to both, it's only be executed for first time here i think if it comes back this might not take effect so, you might be cheating, right? so, in that case you need to if you need a particular behavior when it comes back then you have the working with him to render the navigation to check which page you want i mean, the second way to inject the script on another page but it modify the javascript file when the page reload it will use the same javascript file yeah, that's what i thought we use the same concrete file so, if it might use the same javascript file again, it will be kicked out let me see if there's a link here i can translate let me just see if it works let me see if i can go to another link you don't have a network what? okay, i can't navigate away from this page, i think let's just test what it was saying just now go back to my neighbor i will just give you display you missed the code i don't need to test it and see whether what i feel is because i think you're right as long as you're using the same concrete it should work so, let me just find it out i didn't talk about that i talk about just one page i'm not going to navigate away it makes sense so, is there a way for me to hijack the list if your user protect the link can you stop them it's inside the delegate so, before you jump to that link you stop it and then maybe you want to go to another link or display a UI alert control any more question? okay, if there isn't any more question thank you