 Hello everyone, my name is Amran, I work for RT-Camp, RT-Camp provides WordPress solutions to enterprises and today we are here to talk about why progressive apps for WordPress. So let me check with you, how many of you guys are developers? Awesome, big crowd for developers, going to make my job a lot easier because I know I am not speaking to people who probably don't know about this, so that's really nice, thank you. Okay, what do you think of this? What is this? Net connection is not there, but is there some kind of a game I believe? What is that game called? The dinosaur game, what happens in the end? No one knows, right? You never played till the end, we are just waiting for the internet to come back. How is the feeling when you get this? Pathetic, right? You don't feel good? The internet is gone, you are doing something, you are probably chatting with someone or using Facebook and just goes off. So hold on to that feeling, we are going to come back to that very soon. Okay, so let's talk about softwares. Now the hardest problem with the software is actually the distribution. So let's figure out about the history of the software distribution. Who knows what this is? Who said another engineer? Can you raise your hand? It's written here, correct? Okay, okay, good. So it's a difference engine basically. It's the first known computer algorithm which was written by Charles Babich. So you must be wondering why are we talking about this? This is about progressive web apps. So the idea is that this is how the computers were earlier. And then later on you have the spread of cartridges and cassette tapes for distribution of commercial softwares. So these came in, right? You remember the old days when you used to use these cassettes? And then came the CD, DVDs, floppies. You remember old days when we had to, in order for us to boot the software, we had to put the floppy. So we had to actually purchase all of this. So when the programs started to become large, we started using floppy as CDs and DVDs were used. So with that, for some of you, you might have this kind of trouble with DVDs. Sometimes our system won't work, you click on it and it goes out in and things like that, yeah. Okay, but today we have web application and software distribution has become so simple and so easy that we don't have to be dependent on floppies and DVDs, etc. So now in today's world when we have all the modern technologies, what do you think you will do when you get the DVD? So some of the guys who have mustache would probably do something like this. You just take the CD and just... Okay, so let's talk about the trends of the mobile web versus mobile app. So when I talk about mobile web, which means opening your links on the mobile browser and mobile apps are just like your Facebook, Twitter and all other apps like... So how many, what are the favorite apps you guys use? Maybe Flipkart or Amazon for shopping? Which one? Sorry, I didn't get that. PUBG. Okay, alright. Okay, so according to ComScore, only 13% of the users use mobile web and 87% of the users use mobile apps. So why do you think there's a difference? Why more people are using the mobile apps and not the web? Can anyone tell me? Easy to access. Easy to access? Absolutely. You just go onto your home screen and you have the app, you also have shortcut, just click onto it straight into the app. So first, like you said, easy to access on home screen. They work offline, yes. At least many of the features do. You have push notifications which bring the user back even if your application is closed and you get a notification, you get that back, right? So for example, when I order food on Swiggy and even if I've closed the application, I get a notification, okay, the driver is on the way or the food is being prepared. You click on the notification, you can track as to how it's going to be. Access to mobile features and sensors like camera, etc. Now you must be wondering, 80% of the time is spent on users' top three apps. Which means that we don't really use many apps. Now I'm going to ask you a question that how many apps do you think on an average user downloads on their mobile? So I'm going to give you some options. So let's say an average user downloads around three apps in a month and then I'll give second option as five apps and third one is ten apps. So how many say user downloads three apps? Just a wild guess. Raise your hand. Okay, five apps? Wow, we have five apps for more people, okay? Ten apps? Okay, so we have like a mixed ground. Okay, let me tell you, all of the answers are incorrect because I gave you the wrong options. The answer is zero apps. So an average user downloads zero apps on their mobile. Now the reason for this is because generally when do we download apps? When probably we'll get a new phone and we want to download all of our previous apps or probably some of your friends share those apps with you saying that, okay, this app is brilliant. So like a camera app. Who all like taking selfies? Come on guys, I'm expecting more hands for selfies. You don't want to tell everyone? We all like taking selfies, right? So your friend tells you, okay, this is a cool app for taking selfies. Let's go ahead and do that. It'll beautify you. Sometimes it makes our faces so wide that we can't even recognize who that person is. Okay. So mobile apps, so we are referring to mobile apps basically, has more capability because they work offline, they have access to your sensors, mobile sensors, etc. However, the web app have got better reach. So if I had to give you some figures, you'll be amazed to know that approximately 100 visits per month for an average user. And that's according to ComScore. So mobile apps have better capability while mobile web has better reach. So now they're going in different tangents if you see, right? So I have better capability for mobile apps and I have better reach for the mobile web. If we can combine both of those, then probably we can come up with some better solutions. So let's say I combine both of these. So what do we get? We get PWA. Okay. So we get the best of both of the world by combining mobile app as well as mobile web. So what is the full form of PWA? Progressive web apps. I know some people call it, I'm going to be building PWA apps. Well, it's already a progressive web app. Okay. So what are they? Can someone tell me? Okay. You must have read that. So who can tell me what is progressive web app? Come on. Anyone can try. Okay. Can someone give him a mic? Do we have another mic? Yes. Okay. So you can say your name and then you can tell me about it. Go ahead. Surendra here. Hi, Surendra. For progressive web app, you don't have to install it. Okay. Just like a web page, you can go and access it having the feature of the app. So you mean to say you don't have to install it from the app store? App store. Okay. Awesome. Great. So yes, you're very close. Progressive web app are basically nothing but just web applications that have like native app features. Okay. And you progressively enhance your web applications with those features. So who knows about Flipkart Lite? You do? Okay. Awesome. One, two, three, four. I'll stop counting because I can see there are many people who know about it. Awesome. So what does it do? Flipkart Lite? It works offline, right? You can browse through different products. So in 2015, they come up with this PWA implementation. They're one of the early adopters of PWA and it definitely revolutionized things because they work offline even if you're at the airport or if you are inside of an airplane and if you want to browse through products, you can do that. So this is one of the examples for PWA. You can add to the home screen. You can install it just like every other app. So the first requirement of PWA is it needs to be reliable, which means it needs to work offline. It needs to be fast. Okay. So I'm sure at many places, not only just in India, we have poor network connectivity. So it should work. So probably we can have some caching strategy where we can cache the data and then we can show the data from the cache. And it needs to be engaging, which means that even if the user has closed the applications, he should be able to open the application when he gets the notification. You click on the notification, you start in the app. So how do you use your app? Like one of you guys said, you just have to click on that app icon and then your app opens. So if we can have our PWA on the place on user's mobile home screen, I think we have done our job. So what's the need of PWA? So in order for us to understand, why do we build PWA? Let's understand the difference between native apps versus progressive web apps. So the first thing is that in native apps, which are your mobile apps, you need to develop and maintain three separate code base. What are those three separate code base will be for? Can anyone tell me? Android? Yes. iOS? And? Web app. Okay. Absolutely. So you have to create a web application. Create one for iOS. Then you have to create for Android as well. Could this also mean I may have to hire three separate developers? Correct? However, you'll be amazed to know that in PWA, it's just one code base. So one app does it for all. So probably you don't have to hire a separate developer and, you know, pay extortion amount of money because if you want to publish your app into Play Store, I'm sure many of you must have already done that. You have to pay for it. It takes certain amount if you are going to go ahead and make your app, you know, chargeable, etc. So they take some amount from that. High friction of distribution. However, in PWA, it's accessible on Android, iOS, Web, wide variety of browsers. Native apps are less discoverable. What does that mean? Well, it means that it won't be possible to get it indexed by Google because they're on your Play Store. So probably you'll have to search that app from the Play Store that's when you get it, but not on the web. However, because PWA are web apps, the content is discoverable and indexed by Search Engine, which is going to be good for your client, isn't it? Yes? Awesome. Only the app download can link, can be shared. However, in progressive web app, you have direct link of the paid screen that can be shared. How many times have your friends, you know, send you a link for Play Store? It really happens, right? Generally they send you a link for web applications and you just open it and it opens up in the web browser. Then again, they are not bookmarkable. However, progressive web apps are. They update the app through Play Store. So I'm sure think of a situation. A lot of times what happens, you get a notification saying that there are 10 apps that need to be updated. They eat up your mobile data, right? Slows things down, you can see. I mean, I don't like it personally that I see that there are 10 apps being updated. So with progressive apps, you don't have to worry about it. They're always fresh, which means the developer who's building that, he just need to push the code on the server and automatically gets updated. Isn't that easy, guys? Yes? Awesome. Native apps, again, high data usage. And progressive apps saves your data. Now in native apps, many of the features require the permission from the user. I'm sure you all have experience when you try to download an application and ask you for different permissions. Like, do you want to give permission to make voice calls? Do you want to give permission to make, you know, to access camera and things like that? Sometimes I feel a little, you know, disturbed and annoyed that, you know, what is it, what this app is going to do with all of that access? Am I going to be hacked or something? So with progressive apps, you don't have to worry about that the only couple of permissions you take care of that. So what are different features of progressive web apps? First of all, they need to be progressive. Progressive means that we could be converting our existing applications into progressive web apps also. It doesn't have to be like you have to start from scratch. So you might be thinking that I have my old project. Can I convert that into PWA? Well, yes, you can. You don't actually have to implement everything. If you want to just implement caching, you go ahead and do that. And later on, as the time proceeds, you can implement other features as well. Second one is responsive. So they should work across the mobile tablet as well as web. They should work offline in poor connectivity as well. And of course, they should work offline in mobile as well as desktop. They need to be fresh. So we discussed this. And save. So one of the key requirement of progressive web apps are that they need to be secure. So they would only work on stdps. So if your site is on stdps, brilliant. Good job. Otherwise, many of the features won't work. They are discoverable, which means they can be easily indexed by Google. They are re-engageable. So you get push notifications. You click on push notification, and you're straight back into the app. They are durable. And they are linkable as well. So you can share the links, and it directly takes you to that particular link. Now, how do we build progressive web apps? So how many of you guys have already built progressive web apps? Okay, quite a few. Okay. So how's your experience? Can any of you tell me how's your experience been with building progressive web apps? Yes, anyone? Hello. Hi. Hi, my name is Ajit. Hi. So I have built a couple of PWS for clients. Okay. So it has been quite a good experience because it kind of improves the overall user experience. Because this day we talk a lot about giving a user a better experience in terms of if it's a website or a web app. So when you create ordinary websites, they work when they are online. You know, if internet is fluctuating or if you want to give them some options, where if internet is not there, entirely not there. So by going on a PWA, kind of removes all those bottlenecks and give them a better experience. Awesome. Thank you. Let's clap for Ajit Bora. Great. So let's go into a little bit of technical side of it. So I know we all talked about, it gives me so many features. It does this. It does that. But how do we actually build it? So the question revolves around that. I know there are so many tutorials available on the internet that you can learn from. But if I had to just stick to basics, what are the bare minimum things that I need to take care of in order for me to build the progressive web apps? Well, I give you that confidence that the moment you walk away from this room, you will have enough knowledge that you can go back and tell your clients, you know what, I'm going to give you a feature. And they're going to be super happy. Okay. Does that really work? Yes, it will. So let's see how we do that. Step one, create a web app manifest. Anyone knows what that is? Web app manifest. Everyone is thinking that they will have to speak when they reach the top of their hands. Correct? It's okay. I'm not going to ask you questions. You can raise your hand if you know about it. Okay. We have a few. Awesome. So web app manifest is nothing but just a JSON file that contains some meta information about your website. So it just tells you, browser, about how your web application should behave when it's installed on the user's mobile. So in order for you to have a valid manifest, there are different compatibility. So for Chrome, it will be called manifest.json. For Opera, you have manifest. Again, same thing. For Mozilla, you have manifest.webmanifest. And this one is for Microsoft. So if I have to show you how that looks like, because it's a JSON file, you just have key value pairs. So you have short name, which could be used on the home screen and the launcher when your app gets installed. So wherever there's less space, it'll be using the short name. And for long name, it's going to be put that in the name. When you install your app, that's when that name will be used. Then there are different icons. So what icons do you want to use when the user installs your app onto the mobile? And this is used for home screen, app launcher, task switcher, splash screen, et cetera. I'm not going to go into detail of the code bit because that can definitely be explored later. Then you have the start URL. Well, this means that when the user opens the application from the mobile, what page should it land to? Theme color, what would be the theme color of your app and the background color as well. And display standalone means that whether you want to show a web bar on top or not. So this would mean that it will be on a standalone mode. Okay, you have scope. You also need to tell your browser about the manifest. You just need to link it. If I have to check about the browser support for this web manifest, you can see Chrome is always on the top because of course it's built by Google. And then you have Edge that's supported in the latest version. iOS Safari has some support for it. Not all. We'll come back to iOS because I'm sure many of you must be wondering that will it work for my iOS or not. We'll come back to that. Next thing is service workers. Who knows what a service worker is? Okay, many of you. Okay, yes, you can tell me. Mike, please. Okay, awesome. You can say your name and then you can tell us about it. Hi, I'm Ashwin. And what I know about service workers are actually these are the files or code which will make your website into a PWN at its features. Okay. So this is where our coding will take place. Awesome, awesome. Thank you very much. Let's clap for him, guys. Awesome. Okay. Everyone is saying that I'm doing a lot of work. After coming here, I just wanted to relax and chill out in the air condition. He's asking me to talk and clap and things like that. So guys, for my talks, it's going to be like a two-way thing, right? Because you spend your time coming over here listening to me and putting all of the efforts. So it's better it needs to be two-way things so that when you leave this room, you have something to take away. Is that good? Yes, awesome. So what are service workers? Like he said, service worker is just a script that your browser runs in the background separate from your web page. So let's say you have web browser. Okay. So web browser, what does it do? It makes an HTTP request to the server. So what service worker will do is it will act as a middleware and it will intercept that HTTP request. And then over there, it will check if some data is there in the cache. It will go ahead and serve that from the cache or it will make a network request to the server. We'll get into detail of that in some time. So there's a life cycle for service workers. There are three different phases of service worker life cycle. First is register. It shows the time when we register a service worker. Then you have the install event. So there are different events that take place and we just attach our function at this point whatever we want to do. So we add files to cache at the time when it's installed. And then when it's activated, then we delete the previous cache because there could be some data that will be stale. For example, if you publish a new post or update a post, then I don't want my user to get the old data, the stale data. He needs to get the new one. That's why we need to delete the previous cache. Step two, we register a service worker. So there's some code. You first check if the service worker is a navigator. If it is, you just register it. So that's your sw.js is a service worker file URL. Then if it is registered, you get a message that yes, it is registered. Otherwise, you get an error. So you just need to register it basically. That's all that's happening over here. Step three, add files to cache. So you create a cache version. The reason why we are creating a version so that when we update something, we can change the version of the cache and then it will automatically delete the old cache and put the new one. And then we just put the URLs of different cache inside of it. So you have index.html. That's my root one. You have manifest.json and your images, your CSS file. So you will put all of that here. Later on, we're going to loop through all of this and just put all of these into the cache. So on the install event, if you remember from the previous picture, once the service worker is installed, we go ahead and add all of those files that we just saw into the cache. Step four, we delete the previous cache like we discussed. So we listen to the activate event. We loop through each item in the array and we go ahead and delete the previous cache if we find that the cache version has changed. Okay. So if I had to see that on the browser and if I do a console, you can see that there are different events that are triggered. So service worker installed caching files. Then service worker got registered, activated. We are checking if there's a new cache version. And in this case, there were no new version were found. Now, if we go back and check into applications tab when we do inspect element, you can see this is a service worker. There's a source, status. All of the information is available for the service worker over here. And if I go to manifest, it tells me the theme color, the background, all of this information that we had put into the manifest.json file. And you also have the icon that is being used over here. And you can see this is where the data is stored as cache. So once the service worker is activated, it has got full control over the pages. And it can now handle events such as fetch, push, and sync. So push is for push notifications. Sync is to sync the data in the background and fetch is to fetch the data. So let's say, this is my web browser. I showed you so many codes. I'm sure you won't understand many things. It's completely fine. It's just an overview of it. But I'm sure this diagram will help you understand how things work behind the scenes. So let's say this is your web browser. It makes an HTTP request, let's say for the home page or about page, for anything for that matter. What service worker will do is it will act as a middleware and then it will intercept that HTTP request. It's going to check if the request you are in cache, if it is, it's going to serve the data from the cache itself. If it isn't, then it's going to get the data from the server and it's going to feed the data back to the web browser with the data from the server. Is that clear enough? Yes. Awesome. Fetch data from the cache. This is how we do it programmatically with the code. So we listen to the fetch event, then we go ahead and send the response from the cache if it is available in the cache, otherwise we make a network request using the JavaScript fetch function. Okay, if I had to check that over here, you can see all of the fetch event occurred to our main.css, main.js, your images, all of that. So all of the fetch event is occurring over here when we load that in the browser. And now you can see over here, at this point, all of these data is coming from the service worker. So service worker is fetching all of that information from the cache when we go offline. Okay, now adding a custom add to home screen. So once you've done all of this stuff, of course, you've got all of the PWA done, but if you want to add a custom add to home screen button, you can do that by this. So this is basically a quote for that. I'm not going to go into the detail of it, but you just listen to before install prompt and you go ahead and grab hold of the custom element that you have created and you just go ahead and create this event. So this is the app that we have created. You can see there's an install app. You click on that. It is being added to the home screen. It's added to the home screen now. If you go back to a home screen, you can see there's an app QueryTech. You click on that, you straight into it. And once we go offline, so now we are offline in the flight mode, you can see the app still works. So we have built our first progressive web apps. Isn't that wonderful? Can we clap for us? Awesome. Was that simple, guys? No rocket science, right? Great. Lighthouse performance. If we do a lighthouse performance for the app we just built together, this is how it looks like. Yeah. Yay! We did it. Awesome. So different plugins available for WordPress. There's SuperPWA. There's WordPress Mobile Pack, PWA. All of these plugins are there. You can use SuperPWA plugin if you want to convert your WordPress website into a PWA. So just basic settings that you need to put in. Browser compatibility. So Google, Mozilla, Edge, Brave, Samsung Internet, these are compatible. For iOS, they just started supporting the PWA from version 11.3. Only some features are supported. Like background sync, web push notifications are currently not supported. And manual press share icon and then add to home screen is currently... You have to do that manually, basically. Popular PWA's. You have Flipkart Lite, Twitter Lite, Pin Interest, Tinder, OLX, Trivago. And at RT-CAM, we are also building a progressive web app which is actually a WooCommerce store in React. So we build a WooCommerce store in React which works offline. As you can see, you can add the products to the cart. You can increase, decrease. You don't have to actually update it manually. It's all happening in React. And you can also go offline and this app works there as well. So we're building that at RT-CAM. You can always check that. There's a good repository over there. You can see it's offline and it's being stored in the cache API. So references. Google.com, Web Fundamentals if you want to learn more about PWA. The code that I've just shown you, it's available on this particular URL. And the WPD couple that I showed you is actually available on this GitHub URL. I want to thank WordCAM Mumbai as organizers and volunteers for this WordCAM. I want to thank my sister, Mabash Fatma, because he presented this beautiful design of presentation. How many of you guys like this presentation design? All of you. I'm sure we can clap for them. Thank you. We also have learn.rtcam.com which is basically if you want to learn WordPress you can go on to that. And of course we are hiring at RT-CAM. Thank you very much guys.