 So, I think it is, I've seen some people that have worn the last presentation, who was in the last year. There is some just at the beginning will be like the, some parts from the last presentation just for introduction, but that one, we're going to show more like cold stuff. And, yeah, that's me. The, I started like with WordPress 2008 was something that I had my blog and one day I got a job to do a blog and I didn't know how much work I was going to have with that because it was a famous blog in Brazil and was a huge audience and after that just start to work with WordPress. And for a while I just jumped for all the technology, but I still engaged with WordPress because I was also the what came, like during three years in Sao Paulo, I was a sponsor to organize there. And after that, I started like speaking and all the what came and when I came to Europe and I went to some what came across Europe. I think my first what came to Europe was what came to London was 2016 was the first one. The first event that I was a speaker was here in WordPress. Was a kind of like the last 12 or hours I discovered I'm going to speak here. That works because I'm here again. So, and for today, today we will see like about the concept behind the WA, the basic stuff that we need to do with WordPress for make the things worse and some as a worker and then we're going to show like some features we've just made. But the main thing that I'm going to show here is the integration with WordPress and the WA. There are some three things that we need to know how to make these things worse. And if you don't know like you're going to like spend a long time on how to fix because there are some concepts that about security and how do we organize the files inside the WordPress theme. So, how can we fix that? And so, and I will show you that. And Progressive Web Apps. It's something that's like, I think Google are like same days were like, oh, Progressive Web Apps is the best thing in the world. Then everybody likes to talk about that. And it is a language. It is something that we saw. But the main thing is that they use experience. There is nothing related about a mesh code that you're going to make your website Progressive Web Apps. The things behind it to user experience. Like you're going to give to the users user experience as an event. So it's a, and also it's something progressive. So we're going to implement something. You're going to like add features. It's not like something at all. I will implement that bunch of features in the lead for the clients now. It's something progressive. We're going to like style things and give to the users some features that they only have before in a native app. And now it's possible with the new APIs that the HTML5 are a gift to us. And the JavaScript are a gift to us. And there are some three, like three men was now they changed it. Like the last mobile early, they put a Chrome like fire and they're like, make more fans to this thing. But our app needs to be fast, reliable and engaging. Reliable. It's a, it's a simple description. Like we never saw the dinosaur. The leader of the dinosaur that appears in the Chrome. This is the name, the dinosaur. But that's really like, we always keep like delivering something to our users. So we need something behind to make this happen. And why, I think now everybody know, everybody knows why we need to make like some friendly or with a better performance to the user. Because everybody now is mobile. Like that's changed. Like they, we have like the biggest numbers use mobile phone and that kind of user is really hard to engage them because they are so distracted. And so if we create something that they like 10 seconds, nine seconds, they're just gone. It's different than the user are now desktop. They're like, they said that they have the patience for the things happening. The mobile users know they are like commuting or walking or like in the middle of the pub or whatever. But they are not full, like deep in that experience. So I, I create this, this, this gallery for me. The project, the project that I'm going to show today was someone inside the community of Wood Press Island. It was a guy, it's an English teacher. He asked for help. And I was kind of holiday. And I just met this guy. And this guy, the women like create our website and they had like the hard times. And I said, okay, I'm going to help you. I have this presentation. Pick my presentation and make your own website. And so that thing I will, we're going to finish after, but we already have something that I'm going to show. And so it's a real project. And the first step, like we created our website and we need to ask, need to know like, where are you going to start? So Google Chrome has this, before was an extension, now it's something native. It's a lighthouse. Lighthouse, it's a test inside Chrome that will pass checklists and give a score for you. Like say, oh, you have that score for this remake user. So you have that score for performance, progressive web apps, accessibility to press presses in CEO. And the gate was a serial of data that we can improve in our website. So the first, the first test that I did, I just like make the mark up and put the whole thing inside Wood Press. And we got that score was 27, my score in that application. And the first, the first like content that we saw was in six seconds. It's not cool. It's not so good. So we're going to start from here, our journey. The first thing, just like focus on our, like, the things that we need to do. Like what lighthouse shows to us. They show like eight things that I fail. So the first thing, my website doesn't have a HHPS. It's something really important for me. It's our requirement for a great progressive web app and I will show why. We are not respond when our application is offline. So there is some tricks that we can like deliver to the user something offline. And there is another thing that's made our app installable. It's a little bit so it's called like manifest. And with that it's so we make our application installable. So we're going to show a button for the user and they can add these things in their home screen. And after have access for that application. So that's the checklist that we have with PWA. So that information, there is a website that shows like why you should do that. Like explain why you should do that. So that whole information are inside that checklist. Inside the developer Google web progressive web app checklist. So there we are going to see everything that you need to make your application a progressive web app. And now let's go. We saw that the whole concept is behind and now I will show some code. The first thing make our app installable. So the last year we saw, there is a gift here. So we have this icon and we click on that icon. We got a home screen. So this is a normal website. It's a HTML website. We can do the same thing with our application. But the news about that, the new version like Chrome 67. That same schema will be available on the desktop. So we can also install our progressive web apps in our desktop. So these were available in the next version of Chrome. There are more things that Google are implementing on that. It's not just for Chrome, like Chrome are related about Google. Google is the main group like interested on that. But Microsoft also is interested on that. Now the Edge has support to PWA. So the desktop version. And they are making plans to put the progressive web apps inside their stores. So it's something that's arrived like happened. The main feature is... Everybody can see this? It's hard to see. It's okay. So it's a JSON. And that JSON we're going to have the name of our application. Each address we're going to open our application. And the whole structure for icons. And different size for icons. Icon with 48 pixels like K and width. 96 and 192. So that are the three, the four size that we need. The previous talk was... So we will show us how to add some features inside that custom screen. We have options to add the design. So in my example, it's something that the last year was a partnership. Between Automatic and Google. They showed Chrome some of that. They showed our WordPress progressive web apps. And I think that at the same time I made some changes over that. Because the guys that made was a developer. He told that I don't have so many experiences with WordPress. So I will make my way. And some not our... The best thing that we should do inside WordPress. That guy was focused on performance. And where they came might get the first experience. So they didn't care about the partners. And he didn't know so much of what we have inside WordPress. And one thing that's simple. We have that thing that's a site icon. So we can use that feature to write a JSON. Because that function that I created here creates... When we hit that address, we just give back to the user a JSON. With the features that we came back to inside the WordPress. So we are creating that file dynamically. So that file, that structure. Each different website will give a dynamic information. We don't need to create every project a static file every time. With that file we just do once. And we can reuse in different projects. So that function I added inside the functions PHP. So there we can reuse that function in different projects. So the icons I took from that. We need a color for this defined background color of our home screen. And also the color for the header for our application. So that color I took also from the QStone features inside our admin. So the previous talk also showed us how to change the color in the footer. We can take that color from the footer or the header. But in my case I took that color from the background. So I used the property that we are registering for the background. I just took that color and add in our manifesto.json. So after that we have the file but we need links. Our application with our manifesto. So that first line I just called this function. So with that function we were going to create our manifesto. We didn't return a json for the front end of our application. And after that we have our manifesto.json works okay. So this works in different applications. We just need to feel that information that came like that. So we don't add it every time. So where we can check that. Inside the Google Chrome we have that option application inside our inspect panel. There we can check. The semis water, the manifesto.json in the whole storage, offline storage. We can check that. So today who supports that feature? This is an important thing. Because Google will always say oh progress with web apps is so nice and you can use it. You change your life, hold on. The people are like steering implemented. So Microsoft already have inside the Microsoft Edge they have support for that. Firefox desktop. So when we show you that version live, the desktop version. So the desktop version for Firefox and Chrome doesn't have. But next version we are going to have support for that Safari. It doesn't have support yet. But the iOS Safari, the Chrome from Android. The Android browser works. So we are thinking about apps installable with mobile phones. So that's fine. Sometimes I am excited to hear that many people make jokes about that. Oh I will talk about progress web apps. Oh I will show you how Microsoft gets on and done. I finished my presentation. It's not true. It's not true. Because we just make our app installable. But we need greater reason for the user to go there and use. So it's not simple. It's just not add an icon and show a home screen. We need behind that as our experience. That makes the user go in and over and use it. So how we can create that experience. We have many libraries that we will give to us like many features. But we need to think about that. It's just not add offline things or installable things. We need to create some better people. We will have to think about it. You need to go back there and use that because it will be useful. That makes the things useful. You need to think about that. Okay. Service to Worker. So Service to Worker is a base for the other features. The main features are a requirement for that. It has a Service to Worker installed. And what is a Service to Worker? Everybody says oh, Service to Worker, Service to Worker. And Service to Worker is a script that runs in the background. I think someone saw it. I don't know how to say this presentation. I don't know what to say. Some people are laughing here. I think you might tear my accent. It's okay. You're awesome. Because I'm not better than our host. I'm just going to start. I think we can send a few more of these to the testing team. So Service to Worker. Service to Worker is one script that we don't install in our browser. And that script will run in the background. It will fetch the whole data. The whole data that runs between the web and the application. That Service to Worker will watch that. And with that, we can create our cache API, offline version, push notifications. So everything depends on that. And that's a simple graph. This one is my favorite episode of Gumball. It's about the web. It describes how the web works. It permits the best description about the web. And the Service to Worker will be here in the middle. Watch everything that passes between our application and the web. There are requirements for that. The first thing, browse support. Our browser needs to support that. Simple. And the second one is HTTPS. Why? It's our requirement because it's something that watches everything that passes between your browser and the web. They watch everything. So we need something that's like, okay, that's applications. It's safe. We can watch that because there is any, like with bad intentions between you and the web, okay? It's just, if the many, many hosts are gay for free, HTTPS, but if your host doesn't have that, there is less in other places that we can create a certificate and install a HTTPS in our application. So it can install that. The first thing, the first line here, I'm checked for support. So I'm checking if my navigator has a feature called Service Worker. So if my browser supports Service Worker, and after that I will access my Service Worker and register a JavaScript file, say, oh, that's the file that we're going to run in background. Okay. If everything works fine, we're going to get a message, okay, your Service Worker is registered. But here is we, we're going to spot our first problem. Why? Because the Service Worker works with a scope. What that means? The scope is where that file is installed. He will watch everything that's came after. So our JavaScript file is inside our theme. So our Service Worker just watch everything that's inside our theme. But our application, it's so much for our application, the root. And we are just like give access for a scope that are inside the theme. So the whole data that runs outside that, like the real application, it's, I said for the back for that. So we need to fix that. And how are we going to fix that? I saw, I saw two, two different solutions. One, the guy from, the guy from Google, they created a file, a PHP file that changed the header and gave access for the Service Worker to the whole path. And another solution, I saw a guy that wrote a HPPS, let's say that, that file SW.js has access for the root folder. So they have access for everything inside your page. So the solution that I use it was the first one, I just change that address for a PHP file and the PHP file inside my theme, change the headers at all. We can have access for the root folder after I write it for my Service Worker. So that's, it's my solution. It's not the solution that I choose. There is two, two important things here. It's a, it's a, that's been some JavaScript class. It's a, it's a JavaScript. Everything's JavaScript. I think some people wrote a mini class that's a JavaScript, no worries. And that's the trigger thing. I got that global property, that global property. I use it there. We have like anchor script to get our script and put it inside WordPress. And also we can create inside WordPress, like global variables. And I just create that variable that storage our template. So in different applications, we're going to have like different templates. So I changed this, that thing dynamic. So that information came from the WordPress. Later I can show you how, how we can do that. And our this, my, my folder inside my, my theme and I just put like a file fixes scope that we're going to change the header and I specify for that Service Worker, that's the scope, the root is the scope. And after that our Service Worker works fine and have access for the whole application. So Service Worker, now everybody was celebrating the main browsers as important now. So Edge, Firefox, Firefox last month implemented support for that from Safari and the mobile browser. Now we have our Service Worker now. After that we're going to install our cache API. We're going to like cache our files inside our browser. How that works. The first thing, we have our web application, that web application. There is different strategies. There are I think eight or nine strategies that check first the cache API or check first the web if it doesn't find that file or if you doesn't file that file the web look in the cache or we can do it the opposite way. The most popular is, go to the Service Worker and after go to the web get that file is stored in your cache API and keep going. And the next time when you access the same application the Service Worker will check, okay, URL have access for that file, you have some things catch it up. Check if you have that thing inside your cache API. So that cache API is stored in our browser. I think four years ago the Chrome, the last version for Chrome five years ago has a storage for 25 megabytes. That now is so much bigger. What is the good thing about that you can cache files inside the browser? The problem about that, especially Android if you use those cleaner Android apps and they try to clean up your Android device they will clean up also that cache API. So if you restore something like that and the user always keep cleaning that things will be done. But that things will help until the user clean up either inside the Android or inside the iOS that thing will keep that. But if you have something inside our cache API return to the user. We don't need to go to the web. Keep it going to the cache API and if you didn't find something here okay, go to the web and try to find that. And there are some steps inside the service work. The first thing we need to check when the service work is installed and when the service work is installed okay, now we can storage some files. And the second time our service work is already installed so keep watching the files that match with our cache API. If they are there just give back to the user. But that thing there are many, many problems there because the first thing our cache is based on one string. Every time that string change our cache will change but how are we going to make that? We need to make that in a way dynamically if not because if we don't change that dynamically every time we need that voice and string we need to change our version 2, version 3, version 4 that's not fun. One day we will forget about that and the other user will say why am I taking back the old style files or why am I taking the old JavaScript files? And for that one thing that I use it makes it simple there are two ways to work with that library Workbox, it's a library that Google makes for service workers and cache API so it makes the whole thing simple the whole strategy behind that a greater framework that you just define okay I want to check first the cache API or I want to check first the web before you start to look for files And the application that I create that it's available it will show in the end the last slide will be there the link you can check there I use Webpack with Workbox there is a library for Webpack that makes it more and more simple and who works with Webpack? No, so Webpack it's a we have those test managers for example Goop and Grunge who works with Goop and Grunge Cool So Webpack it's quite similar but quite different Webpack looks for the files think about modules so we can import everything as modules and they have like the one scope inside that scope we think about everything we think about everything as modules and we define rules how to read those files so inside that config file we need to do two things the first thing is how they Workbox Webpack plugin that's the first step and the last step is create our service work with that plugin so that whole structure that I showed before the two slides of like 40 lines we're gonna change for that three lines something like magic but there are some particular points here that magic that we are doing here it's simple and we just do like pre-cache for files and the first step we just do like pre-cache files okay we're gonna do like some different strategies or like for example oh the user is offline when they hit my root folder I wanna give back fallback file for example HTML just with the email address my location basic information that the user like talk with my client doing something inside our so we need to do something different like that we need to go to another plugin that's in Jack Manifest in that file we need to do more steps but that previous line that I showed like 40 lines with what we do with 3 or 5 lines it's more simple now we make our app style we create our Manifest tree song that's the dynamic Manifest tree song we create a caching structure offline structure also because I will show after when when we use Workbox and Workbox will read our files inside Webpack every file that Webpack reads inside them they create an offline question for that file okay it's been a long time looks good because we create like rules for say Webpack we will watch every image that reads so when they take that image okay put in the cache and give a hash for that guy that file again clean that hash for like the cache clean that file so we have that 3 options runs and why we can do more because I just put that color different because the things that we saw before here it's something specific for WordPress so we need to do that way for WordPress like service work and put in our root file but we'll be outside our theme if you want to like reuse that we need to remember that there is a service work with someone else that runs that or if you want to do that dynamically also that will be outside our theme and after that we can do everything we can use view we can use Angular we can use ECMAScript 6 for managing those things and show some native features and the examples that I use I just put like native social share card it's something that inside Google Chrome it's a new API when you shared something it's the native share when we click we call that card that shows us our option to share something inside our form it's something native it's not like jumps outside for the browser and call something inside our device so one example that I use it in that theme I just check when our app is offline and online and I just add a class in our body like the body for our application for a while I can do different things for example when our user goes for offline the user write a comment I can check if the user is offline take that comment and add the browser and wait until the user gets online again and send that comment like because if we don't do that what's going to happen the user will try to send the comment we'll try the test server and say oh this request doesn't work or use an item so we can't control that flow so when you check if the user is offline we just keep that information wait until the browser is online again and send that and the user think that the comment is just gone but still there and another thing we can show in some way for example I just add a class in our body and I show a different header when the user became offline so that's application just a local I have reinstalled it I will show but the things that happen when my application when my app goes offline here that flow has a change to black that's the thing that happened in that code so we can check that when the user is online and offline like here was simple just send the class native share with that API we can call our share card so here when I when I click it on when I click to share we just call the native share card that's key it's working one thing that it can do another thing that I use in the application something simple in our link like H E F we can use that tag in something new J U so that link when we click on on that link calls the Google app and we can send to our user the title for the tag in our map but this is one thing that just walks in with like a great phone and like in here I just made a fallback that checks if we are the users are iOS users if it's iOS users just open like a maps.apple.com and pass the information and we will open like a Google app so that's three things like this there are many things that we can do after that just think about like after this step is to work you can do everything after that so share API it's there calling maps integration with other apps something that works like in the desktop version it's another fallback that I made when we click share I just made a fallback for call a WhatsApp if my browser doesn't have support for share and make share I can share that same information on WhatsApp so that will happen on a phone and also on the desktop if I click it here we will open my WhatsApp so after that three changes our score went to 272.82 it's quite good but just remember the main thing is not just that number the main thing is the user experience just when you go to do something like go to improve your application think about the users think about how you can improve them and use those features to make those lives better so and that was the result of those three changes so also I used the HAPS that improved that number and the HAP2 that helps you increase that score and that's it thanks for watching