 And so I work, I'm a giant coach, a technical coach. I work with Singapore Airlines. I have been a team developer and I still do a lot of coding and I have my special in the sweet corner for JavaScript. In my heart, I sort of can continue to do a bit of a development on and off with a lot of coding. And I am here just to sort of meet, learn, and try to share a few things that I have. Maybe do you want to share before you? Okay. Good afternoon everybody. So I'm Nurul Amin. I work as a front-end development lead in Credit Sways. And I am a conference speaker also. I used to talk about micro front-ends, progressive web applications. And we are the co-organizer of one of the meet-up group called Tech Talk Singapore. So yeah, please join and then you come to our talk. See if you're interested. How many of you are native to Singapore who are traveling to Singapore? Amazing. Wow. This is great. Awesome. So yeah, this is sort of going to be good for us, you know. So we run a small meet-up here within Singapore. And it's all about technology. So we do this for all the different enthusiast, different topics every month. So whatever it is, I think this to different people, be it JavaScript or G, blockchain, be it microservices, micro front-ends, and so on. We try to do these events on a monthly basis. So next time while you're here, you're accordingly watching the meet-up. Yeah, that's us. So yeah, what are you going to do? Okay, Ajanta, since it's a workshop, you don't want to talk much on the slides. But we understand that it's good to have a basic understanding of what is PWA and why do we need PWA and the building blocks which enables building progressive web applications. And then we will straight away dive into developing an app or I would say converting an existing app into a progressive web app. And then we will be deploying it and testing it across Android, iOS, Mac and Windows. Okay, just to get an idea, how many are already familiar with progressive web application? What's all about? Okay, so how many of you kind of developed something? And so on experience? No, that's good. So what we are going to do is we are going to start from the basics so that everybody gets familiar and then they can try on their own. What is PWA? There are so many definitions of progressive web applications. So one of my favorite is this one. It's combining best of web and best of native apps. So we all know like the best of web. Web is like, you can just click a link and access an application and then you can do whatever you want. And it's like, works across all devices, all operating systems. So you don't need to kind of specifically download iOS app or develop iOS app or native apps. And also web is inclusive. Everybody in the world can access to the web. So irrespective of whether what device they have. Okay, and the best of native apps. The native apps are really good. I think all of us have used apps. And then we have smart ones, tons of apps on the home screen. And the best part about native apps are like, they give very good user experience. So they also engage the users like push notification and all those things which are not available in web before. And, okay, sure, once again. So we have just seen what is PWA and some of the features of PWA. First of all, why do we need PWA? So this is the statistics, you see. The left-hand side is average monthly unique visitors. You see app has a score of 7 and the web has 15.7. The reach of the web is way higher than the app. On the other side, average monthly minutes per visitor. How much time they spend in the web or app. You see app, they spend more time compared to the web. So why is it, why the engagement is lower in the web? Constraints on the mobile web. It has a greater reach but lacks on the richness. The usability, the richness and the engagement is lacking. Unlimited access. Let's see the constraints on the app side, the native apps. The problem with the native apps are, let's say if you want to use an application, in the web you just click a link and then you see and then you decide whether you want to use it or not. In apps, first you have to know the name. You have to go to the app store or Android store and then you have to search for the application and then you have to see it and then you have to download it and then you have to install it and then you have to launch it and then if you don't like it, delete it. So the distribution problem is there in the native apps. And another problem is it's not all like Singapore or other developed countries, we have a good network conditions. In some of the countries the network is not reliable. So if you want to download an app before you can use it, I think for example the 60 MB app in one of the countries we visited took 7 minutes just to download. The user has to be patient for 7 minutes to just download and then launch it and then try to see if it's useful. The storage. Some of the users might have low end devices which may not have lots of storage. There will be problem for them also and the cost of the network bandwidth, the data. So that's also we just want to cover what is PWA and what we are trying to do in one line. We are trying to make the web application closer to the native application and why there is a need for progressive web application even though we have a native mobile apps. So now let's see the building blocks. The last few years lots of good development happened on the progressive web application side which enables us to provide features which are close enough to native apps. So I will give it to Ritesh to talk about the building blocks which enabled progressive web applications. Sure. Quick question might be really stupid one. Anyone who is not a web developer? Everyone is a web developer. Okay. How many of you are also mobile apps? And where do you think web app is different from a mobile app? What do you like about a mobile app? That probably that does not have any thoughts. It's fast. Yes. What more? Yeah. Notifications? Mobile apps are interactive. They talk to you. What else? Offline creativity. Offline creativity. So you could work on your mobile app even if you are not connected to internet. You could play games. You could do whatever things that you do on your app. You could interact with it. Yes. Anything else? Hardware features. They are native. So it has support from the operating systems. Whatever the operating system of your mobile is. You can write data. You can see your support. So that means essentially the performance is good. Things are there. And mobile apps are rather the first class citizens in the mobile world, right? If you have to access a web app, okay. Find the browser first out of all your apps. And in that app, sort of, you can go and open the browser. And then a web app, if it is not responsive, it would look really ugly. You would also sort of see the web app that will normally sort of end up also maximization of creativity. You would have so many controls here and there. A lot of things that you could do. A lot of data that you could see and interact with. My mobile apps are rather on minimization sort of a thing. So your experience is minimal. I know just exactly this one action that I take. It takes you somewhere else. I have to search for more actions, right? So it gives you sort of a workflow while web apps gives you a lot of features and then you can sort of do a lot of things here and there. But then there are a few other challenges as well. If you look at native apps, right? If you do native app development, you would see you would have Android developers, you would have iOS developers. You have different apps that you might be using some hybrid software technologies like the app native or so to develop, but you still are going to sort of have those hybrid wrappers on the top deployed as native app. So your teams could be different and the technology choices are sort of even broader. Secondly, as you look at after the popular touch point, I think that's pretty crucial. Anyways, also you can look at sort of web apps, right? Web apps are rather very lighter in size. Whatever information that you need is on the server. You request, you fetch it, your work is done. But when you access a mobile app, it's all on your sort of a mobile, right? So if it's a 50 MPR, it has to last there. If there are 20 MPR, everything has to last there. And how much capacity do you have on your mobile? You would realize that sometimes you are just keeping selected as your mobile. You're adding, deleting, so on. It takes too much of a space. I need more space for images and so on. You cannot keep up. And your re-engagement, though the app provides you the feature, you might not be able to utilize or you won't even see out of 100 apps that you have. And because it's probably too heavy. And that's where web app is very good, because if you have the ability to download it, use it like a native app. You would realize probably a few KPs or MPs. And then whatever information that you need, just know that's from the server. Pretty easy. So can web app have all the features that mobile provides? Can that stay on your mobile? Can you interact with a web app just like you do with the native app? Can it give you push notifications? Can it give you operative capabilities? That essentially is the question of what progressive web apps try to answer. And the few building blocks that you see here, apart from your own community, how does it simply download the app so that it gives the few links of the native app? This is what the language framework provides you. One, web app manifest. And the second is the service workup. Web app manifest is more of a JSON client. Think of it, a progressive web app in a nutshell is nothing more than HTML, CSS, and JavaScript. Okay. And then you have this JSON file that essentially lets you start to see how you want your look and feel of your app to be. How it should appear on a mobile, what will be the icons like, how the name would appear. And app manifest is something that gives you the ability to save it on your mobile screen just like an app. So it appears nothing different from a native app. These are the settings, these are the images, these are the orientations and the display of the app and then you see an icon which has a small name. The whole name might be Facebook but the small name might be a print. It has a little icon. When you click on that icon, you see a splash screen coming over and then it sort of displays certain messages. Some images pop up and the app opens up. It's really responsive. It would go around. So all those capabilities are something that comes with manifest, which is essentially a JSON file. Let's have a look at what it looks like. Pretty simple. What are the pages that have pages that you have? All you have to do is link the manifest through this tag link relation. Relation type is manifest and the link will be over the five states. It gives you short name, long name, icons that you want. If you're looking on a tablet, if you're looking on a mobile, if you're looking on a desktop, what are the different sizes of icons that you want? What icons would appear if you're looking on a splash screen? Display, do you want, if you have an address bar or not, if you put the standard out, there won't be an address bar, so it just gives an update. You can put the orientation, that sort of, you know, portrait or landscape, if you're developing a game, you could do like that. And simple key value pairs that you could define. This is what I want my app to be. They are serving 20-30 box properties. You just get through it and you just need to see this one thing. How does it provide the capability of service notifications of uncapability? It needs a head to yourself, right? Now, remember, mobile apps are something that, sorry, web apps are something that stay at the server. You request something, it delivers the JavaScript to you, execute it, if you need something from the API, you put it all back. Then how would it work offline? With the server, it needs something to sort of say that if I'm not offline, I will listen to what my user is saying, record it, and whenever I get back off online, I will send it to the server and it corresponds back. That is the role of service worker. It acts as a proxy between the browser and the web server. It just sits on your browser in the background, listens to all that you're talking to the server, if you're online, depending on how you configure it, it will send the request, get the response, pass it to the browser. If you're offline, it will say, okay, let me save it somewhere and as soon as I get back online, I will pass it to the server, it will respond to this. So this is the very basics of what service workers. Again, service worker is just a simple exception. It is not integrated to your web app. It is something that sits outside of your app, though it's something that's transferred with your app, but it's asynchronous, it runs in the background and it does not have access to your DOM objects. So it cannot interfere with what you're doing. But it will still sort of listen to the request, pass on, and it messes back. Enough talking. Let's start to see this in action. Let's go. The first thing we will be doing is adding the web app manifest so that your website can be added to the home screen like app and then you can verify that in Mac, Windows and iOS and Android. So recently, the PWA, the app manifest support has been added to Linux, Mac and Windows. So desktop also you can have an app and then you can launch it. So we are going to see that. So let's get rid of the slides. So what we are going to do now is we are going to take an existing app and add all the progressive features to it. So prerequisite, I hope everybody has gate, node version, greater than 10, Chrome latest version and maybe people can write the email address. Copy and paste some of the things. Email addresses, right? Yeah, email addresses, yeah. Whatever they used for Slack, yeah. So are you able to see this in the back? Okay, so if you satisfy all the prerequisites, try to follow the steps. Git clone, this one. Can you be able to see from the back? Yeah, sure. If you just go to the GitHub and go to the repository hyphen workshop hyphen 2019. Yeah, you can get the URL from there also. Clone URL. Just raise your hand if you need any help. So once you get the project install and start you need to have a Heroku account. So go to heroku.com and then you can sign up. Just allow you to deploy your progressive app and then you would be able to see it on your profile. Yeah, trying to deploy into the cloud so that we can access it. Once you install and start make sure that you can see the screen. Once you push to Heroku you would see that it gives you a URL and that URL you could use to view it on your mobile. Let me know once you are done with all these five steps and then we can take the next five and play it out. Let me know if anybody is still trying to finish the five steps. Anybody still trying to finish cool. If you have installed Heroku CLI then you can do Heroku login from your command prompt or terminal and then it will ask you for your credential again. You can type it. Then as a next step you go to the Heroku.com and then once you login you can see a new project new app option and then you can call it like sgclinics- and then you can put your name here. The short form. In the region you can put maybe United States or Europe anything. Once you have created the project in Heroku.com and then from the command line you can try this command Heroku git remote FNA and your name. Whatever name you have created you have to give the same name. The third step will attach your git project with Heroku When you do git remote you should see the Heroku as one of the origin. Heroku git remote sgclinics you have the same name. What's Heroku you are writing? It's in there. So here what are you trying to do? I have downloaded the folder folder git and then after that You are inside that folder? I think yes. It's in there. I think you are good. This is the folder. Can you do the last command? The next one is git remote hi-fi. Now it's all set. So now you can run the last command. git push Now this will push your project to cloud and then you can access it from there. The git remote hi-fi sgclinics This one. Okay. Yes, the app is created just name. It doesn't have any code, right? And then we are attaching this in the GUI in the GUI. It doesn't have any code. So we need to attach the code and upload it there. To link your git project with Heroku that's the first step. Git remote attach this project. Then it attaches your project to the Heroku and then now you are pushing the code. Now the code will go there. I think it will take time. It's still going on. Did you take the version one or the normal one? I think it should be a normal one. Can you go here? You should get this. You can repeat the step. This is the completed code. You can refer back. Now you create a new project in the GUI name. So let me know once everyone is done with all the steps and then you can try to access your Heroku app from your browser. It will be like don't forget to put HTTPS because all the features we are going to put needs HTTPS. And then you should be able to see the same app whatever you have seen locally. You are able to access it in your mobile. Nice. Can you try to add to home screen? It doesn't look too good at the moment. At the moment it will just go open up. You can remove it and that's what we are going to do next. So you can also access this URL from your mobile and then see how it looks. And then from your mobile try to add to home screen and see what happens. Are you done with the steps? Are you done? Are you done? Are you done? Are you done with the steps? Are you guys done with the steps? Are you guys done? Try to access the URL from your mobile. I will verify it. This is the one correct? The next step is you created the second step. The first step is Heroku gate remote. Are you done? Can you go to the private step? Heroku before Heroku gate remote Just a name. Enter. So you have installed Heroku command line. This is the browser. You need to download this and install this. You just need to download this. This is Windows right? We are downloading. To write that command. So he is now downloading the Heroku CLI. Once he is done you can help him with the steps. Once he is done you can install it. Are you done? I hope everyone is done with the steps? We can move on and do our first PWA feature which is adding an app manifest and which will help us to add this website web app into a home screen so that you can launch it like mobile app. So it is covered some part of it. So let's look at it again. First go here. Public index.html and then you just need to uncomment this line. Then we need to add this manifest.json file which we do not have at the moment. For that you can get the file from here. Once again. Go to GitHub. There is a second project which is SGClinic just take this file from there. Do not download the whole project. That has the completed code. So do not download it. Just take this file and then put it in the public folder. So I am just going to do these steps. Just follow me and then you can do it yourself. This is the file. Just copy it. Go to public folder manifest.json and then paste it here. And the next step is let's walk through this file. The first one is short name. This is the name which will appear in your home screen. So normally if your app has a bigger name you should provide a short name so that the name it will be displayed in the home screen of your mobile or your desktop and name is the actual name. Icons. Icons with various sizes so that the operating system the browser will decide which icon to pick and then it will use it in the home screen. So we have mobile, iPad, desktop so it's good to provide multiple icons. So if you want these icons you can get it from here the same project version 1 images so it has 4 icons. You can download this and then put it under the same public images. You can copy the whole image folder and paste it there. I am going to do the same step public images going to copy it you just need to I think replace the images here just replace the whole folder here overwrite ok once you put all the images here so there is 3 changes index.html you uncomment the manifest.json and the second thing is add this file manifest.json here and then add the images that's it you can go here npm run build then npm run start server it's already used so let me put the steps here and then you can follow one by one step 1 uncomment these are the steps you can access it again and then now try to add to home screen and then see how it looks so on the desktop once you have done it sometimes you will see this option install sgclinics if you don't see this option don't worry you can go to more tools and create shortcut and then it shows this icon whatever we have added and then also it shows the name this is the short name which was given in the manifest.json open as window then it's coming in a different window than the browser window you can select book you can close in the desktop you will see this sgclinic you open it it opens here not in the browser window exit is it this app I want to open it okay open it so is it in desktop apps do it again more tools create shortcut click this open as window try to open it let's close all the things make sure your thing is running Heroku server starting using 4.1 you should access it from here local localhost 4.000 we haven't yet deployed to Heroku okay so access it from localhost 4.000 create shortcut open as window you are using Chrome? no I'm using Brave which is the core of the Chrome yeah yes it takes time okay let me come the push was successful okay so this is the second one deployed it's fine yeah it's just deployed you npm run build after that starts over can you close and try again after this you access the app from localhost 4.000 because we haven't yet deployed to Heroku so you can access from localhost run build okay those who have completed this you can do the next step so you can commit the changes git commit and then do a git push Heroku master this step will push our latest changes into Heroku so that you can try to access it from your mobile phone and then you can try to do the same add to home screen and then launch it from mobile you can commit and then push to Heroku git push Heroku master I think we started earlier here is has the mobile app you want to deploy it you can do certain magic that would make it appear just like a regular if you have an android phone you might also see you already deployed to Heroku it shows just like any other app which you would see its size its option for this one we haven't tried the orientation yes yes I think the manifesto's JSON file has so far it's really yes there's option actually you can quickly google and then you can try to change it if you want an iPhone you can try to access it from Safari and then add to home screen if you have an android phone try to use Chrome is it coming yeah it installs like outside the web browser but the icon isn't correct there yes it's not correct can you delete it and try again it should come you deploy to Heroku launch it wait normally it should change did you add the images can you try all correct close all the browser again Safari any tabs open can you check it doesn't matter you just need to close this tab for this one and then should be okay can you try HTTPS please make sure you try HTTPS when you access the Heroku hmm Quirk or something yeah I'm just seeing people using me as it was which version can you try add sometimes come straight let me try you or you or lane my phone can you do like this okay in the commit command itself you can give the message can you try again commit and then iPhone M you can give the message there yeah type QA type QA QA right commit just pull in my phone it will come over yes gate push Heroku master now it will push to Heroku once this is done you can try to access try to access your URL from the Heroku URL you can log in to Heroku and then you will have open yes what's your URL SG clinics okay Daniel let me delete mine something wrong with your deployment can you show the index.html okay I'm manifest is it under images folder oh that was correct how come it's okay for others yeah yeah bring in the IOS you need to add these icons oh yes okay for people using iPhones you need to do one more step so Apple doesn't respect their manifested JSON so you have to do they have their own way of doing it copy this and put it your index.html so I'll just put it here it is the same tag with different images you are able to see the icon in mobile is it coming I think we are just doing the last step because it should be okay manifest is okay can I just raise your hand if you are still doing it anybody else okay let's give 5 more minutes is it working now okay deploy is it deployed okay you have an iPhone here xx if you have not already tried to deploy it it is coming at home if you actually own the speed it should just appear as a native app if it doesn't 100 dollars is it deployed close and we can start again anyone got it working in their iPhone sorry okay we need to commit and deploy sorry yeah get add commit and then push heroku master anybody got the icon in iPhone it is there compiling okay they are still trying to deploy and get it by the way I have added most of you to the Slack channel please join so that I can paste this so that you can just copy and paste instead of typing no need what happened suddenly it works okay okay perfect nice cool you don't need to run build just commit and then push and heroku will do the build and then it will start it so you don't need to do npm run build here Slack have you given your email address did you receive an email no please join Slack so that I can post the code there no I haven't seen this tablet also maybe is it a new one or is it special for Huawei sorry Slack you should have received email to join I think Slack will send an email whoever not received Slack invite let me know okay so I will give the list one second I can see 1, 2, 3, 4, 5 please let me know if you haven't received Slack invite you can write or if you haven't written your email address you can also write now so that we can paste all the code there and then you can just copy and paste just one more two things okay everybody done just two sentence okay everyone is done iPhone, Android, desktop cool just few more things here so you see the theme color so this is the background color when the launch screen comes if you want to customize you can change the color and then you can see and the start URL this is the URL which will be used when you tap on the home screen icon and then it will open and the URL will be used here dot means it will use the home URL which is localhost 4000 or your herokuapp.com okay nothing much yeah so if you are done then we can move on to the next one okay all done cool okay the next feature we are going to cover is making the app offline maybe you can try now so if disconnect network and then try it will fail because there is no offline capability so you can make it offline capable yeah so your mobile app was already done so yeah as Nero said though it just looks like it is like a native app it has an icon you can install it you can install it it just looks like any other thing on your mobile phone but if you go on the airplane mode if you try to access it it will say internet not connected see if that so iOS it works yeah it is not there moving on to the next section it is called service worker so as we discussed a while back about service worker service worker is something that stays with the browser imagine it is to be a JavaScript file but which is independent of your application it just sits at the background so that nobody knows listens to what you are talking with the server just sort of facilitates your request sense and acts as an interceptor so what we are going to do next is add a small service worker and see how it behaves the main reasons to do service worker is to make your app work offline and to make your app save some information that in case you are offline whenever you go back online you do not have to redo it the app will do it for yourself so for that thing what we need to do is if you go to your webpack.config.js depending on the id if you search and go to this file webpack is a kind of library that allows you to modularize your code and make it more focused it resolves the dependencies make certain chunks of it and just organizes that information in smaller or rather minified files so it is a pre compiler and what we are going to use here you see a few commented lines in line 18 on your webpack.config.js uncomment this line which reads constant work box webpack plugin and if you search work box uncomment this block from 570 from 570 to 582 it is commented 570 to 582 and line here line number 18 and from 570 to 582 webpack.config.js uncomment line 18 uncomment line 570 to 585 and once you have done that go over and npm build and npm start lines to uncomment again line number 18 in webpack.config.js and line number 570 to 585 see there are no errors once you do that and launch your program what you would see is if you do npm start npm run build and npm start you could merge the commands and as you launch your browser on your given port go to developer tools if you are using chrome or i or mozilla and go into the application sections you would see manifest that shows all the information that is what you have already added in the manifest different icons the names and everything like that and you will see a file here name service worker .js within the application manifest and service worker see if you have that in your application look through developer tools now not that yeah just this okay you have already built and run let's see npm start npm start and build is no it's generating it's auto generation yes let's see npm run service start okay let's go back can you close the browser and reopen yeah still not there can you see the manifest is that fine yeah okay let's go to your webpack config once more and go up do you have the work line number 18 do you have that do you have to index.js not as yet okay alright so I think that is so in case you don't see that's not a problem because we'll anyways do the very initial step to set it up if you see it's well and good but it doesn't hurt so what we are going to do next is service worker primarily just in JavaScript file that essentially would have certain events that would intercept what browser needs to communicate with the server and back it relies on certain whoops events named install that is the event to install the service worker activate to activate the service worker the lifecycle includes installation by activation followed by termination or in between waiting in case so let's go through this work cycle and it's about adding the load so while you have added that sure thanks go to your index.js window.add event listener have a load event while service worker is widely supported not necessarily all the browser supported so we need to check if the current navigator that you are using is supporting service worker or not so if service worker in navigator so if your navigator currently supports the service worker what happened if your navigator is supporting service worker navigator dot service worker dot register it needs an absolute path which we will give shortly this is a promise that would return a registration object to service worker sorry on this go to your source folder and create a new file call it service hyphen worker dot js under your source sg hyphen clinics under source create a new file name service hyphen worker and add an event listener install we will pass it the event object say console dot log installed service worker sorry you mean this arrow wait until here is a command wait until whatever follows is executed so the event won't until whatever are the list of commands that you pass under it are executed this is kind of the construct within which all that you want to execute and E stands for the event the event of installation and wait until it is in no yeah so it does not need to be under any other function once you have done it you could go back to your webpack.config js there are quite a few things there which you could get rid of like the new regular expression trim your work box configuration down to smatch sorry the generate sg as w method that you see change it with inject manifest so we are not asking this very library to generate service worker for a service worker that we are creating and this would need the path where to pick a service worker from so it will be swsrc source folder service hyphen worker.js and remove this line of client's claim okay so you have your service worker in place we have the webpack.config setup and then we have also added an event listener for load okay I will also add a console here to sort of and see if the event is being fired in window load event and let us see what happens so I will just build it and rerun npm run build and npm start server try it in the load event I forgot to give the path for service worker so just add the service worker name okay okay yeah sure so I will just put everything on Slack so that is easier for you to review I first change the index.js file in source adding the windows load event after that add service worker service hyphen worker .js in source directory and under service worker in service hyphen worker .js write this line of encode which is the install event and we are just writing on the console and lastly in your webpack.config from lines 5.70 to 5.73 ensure they look like this webpack.config.js so it is all on the general channel of Slack now and once you have done these things and when you do rebuild npm run build npm run start server see in your console if you see messages like this in the window load event I am ready to register as a service worker and install the service worker and along with it you would see a service worker available with a number if you go to application tab in your Chrome developer tools and go to the service worker you should see a service worker with a particular number probably 0 or 1 this last one is the change to webpack.config 5 so on line 5.70 to 5.82 just replace that in the webpack.config this workbox 5.70 to this whole object right just replace that object that should be it because you have done actually my box one just be careful sure thank you can you refresh it you have received this is something else local host you see this one is fine service what does not control let's go back to the code inject manifest this is fine index service worker navigate register then registration service oh R this could be tricky lovely everyone can see those three messages or at least your service worker in place your service worker will look like this it will probably have a number 0, 1, 2 activated and is running just confirm that you have a message like some number is activated all right cool once you have done with that go back to your service worker and will add one more event activate e activated service I'll put this on slack once you do that and you go back to your browser and refresh it you would see something like this you would see old service worker and new service worker that is waiting see if that happens you have probably 0 service worker which would be activated and running and another service worker 2 or 3 waiting to activate once you add the activate event there is something very interesting about web applications now when you work on web application and when you probably deploy it into the production environment someone would be consuming this application what do you usually take care of you would probably ensure that while you really deploy it no one is online because they are online they would be impacted in certain ways right somebody is working on this application and here is the new production release that comes in and everything has changed they look and feel has changed that functionality probably no longer exists or probably whatever work they were doing is lost because there was a bounce right and that's a common problem that we have with web applications because we have to plan a release of a web application because everything is related to server whatever request comes needs to go to the server and the response comes from there so if there is down time on the server the application is impacted and the users are impacted the way service worker handle says that whatever information you think that is important to the users is you cache it use it from within the service worker and while suppose you are working on your mobile and then there is a new app update usually what happens in native apps is that you would receive a notification you would see it in your play store or app store that new update is available for your app but it does not update automatically you could of course choose it to but while you are working at least it does not it's not like you are surfing through an instagram or facebook there is an update restart that does not happen with native apps so how do we control that in the web app is through service worker to say that as in when there is a new release that happens for the web application it has new update service worker that would wait in the background till the time a browser is open that means a client is working on an application the new service worker which comes with certain changes like we added the activate event it would not replace the existing one it would wait until all the browsers are closed on that all the clients on this particular browser are closed so if you just do that if you have this open and you see something like this where one browser is active and second one is currently waiting try to close your browser see no clients are active and launch it again I have to open see that all the clients are closed oops open the app try to see it automatically updates when you close all your Chrome instances and when you close it and you reload it it should ideally auto update the service worker to the newer version that means that whenever a user closes the app in the background and when it opens it again the service worker will be reinstalled and a new version will be updated whatever changes have been made so that's the difference between what installation is every time you request and there are certain changes those would be available to service worker those would be installed but they would not be active unless the current application is closed and relaunched see if you are able to do that one thing heading back once you have done that also try this if you now go offline you could do certain or go in the airplane mode and try to refresh see if this works just close the application and refresh it see if it works no right yeah it will still complain about there is no internet or the app is not running yes because we still need to write the code of how does it fetch service worker is not caching anything as yet it is just installed but it is a dummy it does not do anything what you see here in your application I want you to examine that you would see certain ways of storage you see local storage session storage index db, web sql, cookies cache and application cache primarily what is being used as the storage mechanism with service worker cache storage and index db these are all asynchronous storage mechanisms while cache storage is an key value pair that could store the information small information like files that you need to be readily or be often available and index db for certain operation which are more structure and more data intensive other kind of storage are rather synchronous in nature and they do not work with service worker ideally because service worker in itself is a synchronous worker so ideally what you would largely be using for storage mechanism are cache storage and index db so now that we know that if you refresh it it says the site cannot be reached so let us try to fix this so we go back and we will say cache and give it a name mypwa cache then go ahead and say what files do you want to cache files to cache have the default have index.html this is currently what I want to I just want the index.html to be cached and that is all and when will I do it when I install service worker I would say wait I will do it after this caches is an api dot open use the cache name from here cache name it is a promise so it will return you a cache so when that cache opens cache dot add all files to cache and once you have done that try to build and run I will put this on slack service worker cache once you have done that go back refresh and I think you would have normal service worker try to update it in case there is something that is missing and then try to go offline probably bring down the app sorry what did I do and see what it does run again sorry remove the console I think that is creating a problem refresh update the cache manually or you could always choose update on reload so that your service worker is always updated see that the version number of service worker is updated from whatever your last one was and after that take the boldest step of bringing down the server and refresh it oops let's see what is going on just see once you refresh the service worker you would see under the cache storage an object created from my pwcache if it is not created probably it is not refreshed and it will have these two values and then try to bring down your app and then refresh some weird problem it requires one additional step because currently it does not know what to do while we have cached it but it does not know that if I receive such a request what should I do I tell it that whenever you go to fetch how do I respond how should service worker respond it needs to know so e.respond with say if in the caches if you could find something that matches this request that I make then whatever is the response return the response or try to go and fetch from the server and once you have done this refresh update your service worker if you have already checked it would be auto updated just ensure it is you could also verify that you have the latest by looking at the sources and the service worker if it has whatever updates that you have made try to bring down the server and refresh you would see a blank page but at least you won't see that the site is down see if that happens to you I will show the code again add the fetch we are saying that whatever request comes our way we will try to return it from the cache see if it exists in the cache if it does not exist we will try and go and fetch it run it update the service worker and see if you see a blank page instead of the site cannot be reached yes yes do you all see a blank page instead of the site cannot be reached do you all see a blank page instead of the site cannot be reached no service worker is pending let us look at the service worker what does it show you have the fetch event index the site cannot be reached oh I think for you I think you are missing something here so let's go to application we need to see something here cache storage is somehow not updated so you don't even see service worker updates updated in 1525 which is fine cache storage so you already have you have added everything no but this stuff was here before when the webpack was generating yes yes yes so I think what we need to do is let's go back to the service worker you already updated the webpack config we do this in the build folder let us see how the service worker looks ah ok can you delete the build folder and rebuild yes let's go and see ah right number 8 cache what did I do remove this console log try this I need to restart yes ah the thing is that if you go offline from here service worker still has access to the server because it nodes is there so you have to bring down the application itself ah and also do this one more thing because I think whatever is in the history is not cleared so if you could ah clear this ah it's cleared now ok ok so once you launch the application clear the storage and then try it again so what you can get see now wait until you are missing n until so if you already see blank page it's of no use right ah you would notice that ah lots of things are missing because we are building this whole work package through webpack and it chunks down all your JavaScript files and your css and everything so ah when the service worker goes and look out for a file it doesn't get the whole file it just because these are rather auto generated so one way to sort of and do it is to sort of and you have a plugin for service worker in your webpack config and say that you know in the runtime try to identify the dependencies and add all those list in your own self that itself is a tedious task or you could sort of and go ahead and if you just want to try you could copy one go back ah sorry you could keep on adding that to your list of files to cache and you see that it will eventually get resolved but we don't need to do that because there is much easier way ah ah some of you might already be aware of work box which is a google product which simplifies the implementation of service worker the reason why I showed you this service worker is because this is what how it actually is work box look makes it look much more simpler and much more easy to implement ah but what work box actually hides all the complexity so you don't know what happens on install and activate and fetch and sync and so on so that's why was this demo to just understand what service worker and how it actually functions but actually don't need to write any of this code if you are using bug box so I'll quickly show you that how by just one line of code could replace all of this ah you already have work box installed through the web config so ah I'll just copy this one line if you have these things working rather you could just comment this out and go ahead and say work box dot pre-cache and route self underscore pre-cache manifest or an empty array just write this one line and comment everything else in service worker posting this on the slatcher and after this and then run start we have already installed the plugin for work box in our web config and then we are already passing it the necessary parameter to pick from the pre-cache list so ideally when you run it you probably would see that it is encapsulating the install activate fetch and all the files that it deems necessary for caching which essentially means everything that is in the public folder of your application be it your images be it your generic js files or your index html and if you go back to your browser you refresh it ensure that your service worker is updated pre-caching pre-cache and route one type of there if you are copying from Slack use this instead note the double underscores here once you update your service worker you will see messages like this once you do that if work box is installed and you bring down your application refresh it you are still missing a few things but you will see most of things are auto drawn without you writing a single line of code so we have not we have commented install we have commented activate but yeah everything is inbound within the work box so it makes life much more easier when you have to deal with these things the next thing is different strategies of dealing with offline content and online content synchronization and push notifications but I guess we all need a little bit of rake so let's give it 5 minutes alright thank you welcome back so before the break we saw that how you could use work box or service worker to get the offline capability by caching certain request there are different strategies to that you could sort of use while caching say what specific things you want to cache when to cache there could be things like your stride sheets and images that you might always prefer to pick from caches and rather certain transaction request that you send to the server you never want to cache them work box offers you and service worker in turn offers you different strategies that you could essentially use which you could define whether you want to just always look up for a certain request from cache only or certain request from always on network or first if it is not available on the network pick from the cache or first just go to the cache and while you refresh in the background return from the cache and then update it and keep the copies updated I'll show you a very quick example of what it is I realize that we are very short of time but I want to demo of how you could really just do one strategy of cache works up dot routing dot register route it takes two to three parameters one you could give it a regular expression of the path that you are looking for and it takes the strategy so work box dot strategies dot dot cache first network first cache only these kind of things that you could use to define the different strategies are available in cache first strategy what your service worker would do is is to first try to pick from the cache itself if it is not available in the cache then go to the network for this particular endpoint source that we are requesting quick view if you just go to work box strategies you would find a quick documentation here that list about the different strategies that are available the syntax is pretty simple regular expression whether you are looking for images you are looking for specific resources just name it by strategy and that's the only little code that we need to write for this we will see one of the strategies as we move on to see the background synchronization background synchronization is something that while you are on your device and you are working on something and suppose you go offline you may lose your work so how to essentially avoid that and how not to redo it a classic example is your subchats so you are talking to somebody and you are sending messages and everything but if you get into an MRT and you lose your network your message does not go through but do you have to rewrite it no you just probably write it you post it it shows that yes it has gone out from your window but it has not yet been delivered probably it would get delivered once you come back so you would see a wait sign in there but you don't have to really repost it and how do you bring that kind of in capability on the web app is what background synchronization is all about so let's see an example of that one for that I would request you to go to server.js let us add end point here and call it with another version go here this is what they have go to server.js I was in server perfect so everything is here ask them to put one line wait I will just comment and give something else it's fine even for me I need the subscription then do this let me not use this I will just see but I will just comment it out so you already have this in v1 it's already on the server sorry in your server you would already see this one end point you could comment out the things and let's sort of just see that if we could send object back and say call it booking status as booked and for the timing I will just make it get instead of post once you do this run the app let's see if this works okay go on localhost 4000 our end point is book see if you are able to access this for the timing also comment the app use sttps it's from line 16 to 23 on server.js just comment it for the time being and in the book just have a dummy sample value return restart see if you see a response coming back from the server in service worker there is ignore this code that was just a sample this is not related to that so yeah you don't need to do this as of now so just in the book have this one object return and comment over the sttps part okay see if you are able to see this response coming from the server alright lovely just see everything is updated clear your storage and everything so that we could have a fresh view at the data that would come in here and then go back to the service worker let us have a strategy where we will say this very end point book new work box strategy now suppose this is something that we really want to get delivered to the server and get a response from the server so in this case where we want the message to be delivered for instance we are doing a bank transaction a cash won't do there right we really want the network to reply over so the strategy that we would use for this booking is network only in the strategy itself you could use certain parameters and plugin what we are going to use is a plugin which is work box dot background sync and give it a name say sync booking ensure this is object strategies network only so what it will do in turn is it will call the sync event for service worker and for every request that is routed to book it intends to go to the network so nothing should be picked from the cash itself so this request will not be cash but service worker will always try to hit the network in case it is not able to hit the network it will store that request in cash and the next time the network is available it will try to post that request so let's see if we can make this work and build and start so we have already seen that we get a response from the booking status we have cleared our data let us go back once it's ready and we'll just see everything is clear notice that index db is currently null it does not have anything and the service worker just updated for me it's installing just give it a while here register some typo sorry the delivery name is different change the regex to reg exp here on take it back on slack rebuild it feel free to use nodemon if you have not installed it refresh it see the time it was last updated it needs updating I just updated mine it has precast six files now what I'll do is I will try to go offline in the airplane mode but since I'm running this locally it will still hit my server so I will also bring my app down and call the book endpoint see if it doesn't go back you'll see that in the index db there is an entry now which reads like this the request data in the certain queue sync queue name and to this URL and whatever information we are sending ideally it would be a post request sending a whole body a lot of information but we just did a simple request which does not have a lot of information but yes it is something that is automatically added to a queue but it has not service work is not returning your result it is storing that so that whenever the server is back online it could be sent to the server now if you go back if I go back and restart the server and also switch off my airplane mode let's see if we see something in the console and if ideally whenever the service worker detects that it's back online it would fire event background sync for tag request added to the sync request failed to replay because it was still offline and then it will replay it a certain point in time it will retry and this would eventually get cleared try it if you could replicate this in your machines and then we have server which is just simply setting this yes and I am running so I just rewrite so it shouldn't be but yeah you can just build and run the server yeah so I think it should so thank you thank you thank you very much you will see this okay yes you see the two requests coming yes so then I turn this off so this is already sort of when you are off it has already added it and now as are you on airplane mode yeah so what you could sort of try to do is is to sort of enter this index TV and then you go to airplane mode run it see it will get added here and then as soon as you turn that off and you come back online this queue will automatically be cleared this is local local force yeah it will still it detects that you are not connected to internet as far as service worker is concerned okay yes you are currently connected to are you on offline or are you not on okay also also switch since you are posted in local post you also need to turn the server off yes okay sure that's the number one yes yeah yeah yeah okay yeah yeah okay okay yeah okay yeah okay okay The server has information and whenever it needs to send a message, let's say the apartment has been booked, the server wants to send a message using the subscription object. The server cannot directly output one, the server cannot directly send the push notification for security purpose. The server has to go to the push service for Chrome, so they have a push service for Safari they will have, so maybe it's the same with the native apps also. So the web server contacts the correct push service and then sends a message, this is the message I want to deliver to client and then the push service delivers the message to the client. So the push service, first let's clean up this class appointment review.js under booking, so few changes you need to make, just uncomment this first if it is commented and also you have to make sure this method exists, book appointment that's it, okay all good. The next thing you need to do is go to server.js, just whatever we have done, just revert this change, uncomment those lines, make it post back, okay. So if you want I can post this, I am just going to make small change, this line will not be here in your code, I am going to make it subscription object, okay. I will just put this in Slack, you can just copy and paste, I think it is all okay, let me run it. So just few changes, appointment review.js, you are just putting back the methods, notification book appointment and enabling this method and then server.js, you are reverting the previous changes and making it post and this one, I have pasted this in Slack, you can just copy and paste, okay, let's see. Maybe you can watch first and then I will send all the code through Slack and then you can try it on your end, okay, so let's go back 4000, so just for make it everything clean, so update, maybe unregister, go to clear storage, clear site data, kstar, okay, all good. So the scenario we are going to replicate is, let's say you are trying to book appointment, you are an MRT train and then suddenly the network goes off, you want the appointment still go through when you are back online and then you want to receive a notification that the appointment has been booked or not. So let's see, book, so this is a normal case, so let's go with this, this is a normal case confirmed, the appointment status will be confirmed, let's switch off the network, make it offline, okay, if you are offline you will see this additional text, it seems you are offline, don't worry, we can book the appointment automatically when you are back online, due is to proceed, we are asking the users permission whether they are okay to go ahead, so they have to choose this, yes, at this point in time, when you are doing first time, it will ask you whether do you want to allow this website to send notification, the client has to say yes, then you go next, the appointment status will be pending, but it's okay, but once you are back online, you should be receiving a notification that appointment has been booked, that's what we are going to try now, okay, for that let's go to the code, the first step, I prepared a cheat sheet, let me paste this, don't worry, I will paste the steps in Slack so that you can follow one by one, so first is, there is a library called web push, which will help us to, the server to communicate with the push service, so you have seen in the diagram, there is a push service for Safari, Chrome and everything, we don't need to write code, there is a library which will help us to communicate to the right push service and then deliver the message, and also since we are communicating with the push service, so everything has to be encrypted, so the message has to be encrypted, so we have to use private and public key, so the first step here is NPM install global web push, so let's do it one by one, NPM install global, we are going to create a pair of public key and private key, so this is the second command, web push generate vapid keys, so you get a pair of private and public key, just need to copy this public key, so here I have a file called vapid keys, everything commented out, let's uncomment, since I generated a new set of key, let me replace it, this is public, let me copy the private, that's it, so we have created a private and public key using the web push tool and then it is there, so we just updated the vapid keys, we will be using it, the server has to have both the keys, but the server has to give the public key to the client, so that the client has the public key, but the server has both the keys, so we have updated, we have done with the step 3, so now we need to go to step 4, when the user clicks the toggle button, notify me when the appointment is booked, so we have to put some code, so this is the code, in the interest of time I will just copy and paste, so appointment review, so you have this part, push notification code here, so what happens when the user clicks the toggle button, send me notification, copy and paste it here, I will walk through this code, what it does, so we need to see if the service worker is there, because for push notification, service worker has to be there and if it is ready and also we are checking if the push manager is supported, the service worker supports push notification, if not you return it, if it supports that's fine, this if checked means user clicked yes, if no means this will be no, false, you go here, registration.push manager, so this is the one of, when this code executes, user will get a pop-up, this website wants you to send notification, do you allow, if the user says allow, then it will come inside, if the user says don't allow, it will not come inside, so then after this you have this, the browser will have the subscription object, so the client authorized, so that's browser will have the subscription object, I am just storing the subscription object into a state here, so in this webpage, I have the subscription object, if the user clicks allow then I have this object and the next thing I need to do is, when the user clicks proceed, so the user is ok to get the notification, so when they proceed on click, they store book appointment, so this is book appointment, so this method what it does is, it calls apibook.json and it passes the subscription object, the object which user allowed as to send the notification and the actual appointment details, so along with the actual appointment details, I am also sending the subscription object to the server, so the next thing is, server has to receive this book appointment request and then send the notification once it's booked, we are going to server, so I think we need to change it to api slash book or we can remove it from here, we can change it to book, the end point will come here, so there are two information, one is subscription object and the appointment details, the subscription object is the permission which client gave, so that the server can communicate the right client and send the notification, so what I am doing is, in the normal case I am returning this and if the subscription object is present, that means client allowed us to send the notification, then I am calling send notification method, I am just providing as message, your appointment is booked successfully, that will be the message inside the notification and I am passing the subscription object. What this method does, send notification, let us go here, this is the important part for sending the push notification, so just simple, just two or three lines of code, let us look at this first, web push, this is the library which we installed, npm install web push, so you can go up and see, so this is the library we used, this library will help us to send the notification to the client, so you just need to call web push dot send notification, you have to pass the exact subscription object you received from the client, so whatever you received from the client, you are going to send it to the push service, what message you want to send and the additional option, what are the additional options, time to live, maybe 60 seconds, so it will wait, if the user is not available it will retry, so that time and rapid details, this is where you are giving the public key and private key for the encryption, so all the encryption you do not need to do, this library will take care of it, you just need to provide private key and public key, so this library will do all the work for you, it will encrypt and then it will communicate with the right push service and it will send the notification, good, there is one missing part here, what is missing, so the client gives the permission, we send to the server the subscription object and the appointment details and the server trying to send the notification through push service, so there is one missing part, the client part, client has to receive the notification and then trigger a prompt, so the last part of the code, you need to go to service worker, here I will also quickly copy and paste, I will explain this code, so push notification, will it, any idea will it come, if you close the browser, you close the app, will you receive the push notification, app it works, in web also it will happen, so you can close the browser, you can close the app, still the server will send the push notification and the client will receive it, that is how, that is why, that is a good thing about the service worker, even though the app is closed, the server can wake up the service worker and execute the code for that app, so self.add event listener, similar to fetch, we have something called push, when the serve, the push service sends that notification, this code will get executed and it will have an event, then message will be part of event.data.text, so this is the actual message, the push service is sending to the client and then you are just doing self.registration.show notification and the message and the title, so let us see what is the body option, I think the title is repeated, you can remove this, so you can provide the icon for the notification and also the message, I am passing it here, so that is it, so the main part of the code is this one, the client has to receive the notification and show it and the server has to send the notification using this library, that is it, so let us try to run it and then see if you are receiving the notification and then you can try it on yourself and then I will put all the code and steps there, one another thing for testing the push notification, we have to deploy it to Heroku, local host will not work because when the server tries to communicate with the push service, it checks whether it is HTTPS, so local host is just HTTP, so we have to deploy to Heroku and then test this push notification, so let us double check, we have done all the things, so client side, we are receiving the notification and then we are showing it, perfect, on the server side, we are sending the notification using web push and then we are providing the option, private key and public key and then whenever this book is called, we are going to send the notification if the user allows us, so and then appointment review, when the user gives us the permission, we are doing all these things, yeah, notify click and book appointment, okay, let us try to build it, sorry, for this, we do not need to build, get status, these are all the changes I am going to commit and deploy to Heroku, let me quickly double check, this is fine, this is fine, this is fine, money first, load, this is fine, okay, cool, okay, I have committed, now I am going to deploy to Heroku, get push Heroku muster, meanwhile let me put the steps in Slack, we just need to do this, appointment review, the client should have a public key and we need this, so meanwhile you can follow the steps, I posted in Slack one, two, three, four, G clinics Heroku, okay, so this is the demo, so I just click the button, receive notification once the appointment is booked and this is the pop-up it will show, so the user has to click allow or block, so let us say I am allowing, so then the client browser has the subscription object, which it can send it to the client, okay, the appointment is pending and let us see the Heroku logs also, okay, appointment details and push subscription object, this is the subscription object and we are sending using the library, so you see notification received, your appointment is booked successfully, did you see the notification, so let us try again, okay, the second time when you check this button, you will not have that pop-up coming again, because once you are given the permission, so it will take it, so notification received, so maybe in the interest of time, so I think we got the message, but the notification prompt did not work, maybe if you want to stay, we can stay, otherwise in the interest of time, I will push the code and you can try it on your end, okay, in the GitHub, the second project, version 1 has all the completed code, so you can always refer to version 1 and then you can try it on your end, thank you all.