Building faster exciting web apps with PWA and AMP

Okay. Today we are going to talk about building faster and exciting web apps with a not so new, but some very interesting technology such as pwa and a m p. So I'm a man Sharma. I am working at CDO at them bit and also am, I am Global contributor. You can follow me for any updates headed to the maps. If you want to ask anything about p w, a s r. A m p. M. Always happy to help my favorite film. Look so far. And also, in machine learning aspects. For example, recommender system in tensorflow, I would like to

give you a little bit of time to actually go through this. Me and this is something that happens to our developers everyday. So I found this on Pinterest, it says designing a software application is like a designing, a boat to spend countless hours, locating the idea of materials testing the Indians to the customers exact specification. You are done the customer tells you. Great job will love it. Just one little thing. We needed to fly. So we know that our customers don't understand our self and others have to go through a lot of pain and get things clear and finally

light requirements change. So this is a main reason why we should not actually go for Native apps and that's what my today's agenda is centered around. So just to get to know a little bit of facts, 0 downloads that are happening every month on an average on a user's phone. The reason being that people don't install native apps. I would be hardly a case that there is a new trending app, like a new Tik Tok or maybe a new feature on Instagram that you would like to update a

downloaded. It is no chance for a new beginning to actually get into someone smart phone. So that brings us to a zero downloads per month on an average per user device. And this is that every step of app, download we use around, 20% of all users sometime, it's bothering updates related to the operating system or the person hasn't signed card bill does not too much as I am right now, in India, and the internet speed sometime is not as important as we expect to be. So the things don't work out. And

it would be surprising to know that fifteen to twenty percent of our cost of total. A block minutes, just spend on maintaining the Apple. Releasing the update's release in the security badges complying with the latest laws and compliance created by the Google Play store or Apple App Store in Ambridge to make a feature of from your discussion board or drinks on board to the actual phone. That's the facts that we are talking about. The answer to all these problems is definitely Progressive

web apps. So what it is nothing, but your website being converted into a progressive app. That means it works on all swallowed, a Teensy networks fast because most of the files are cashed on your device so it can work on those networks as smooth as possible. And engaging it offers a lot of features that today you need to have Conifer. You can also access them in Progressive web apps, and that's how beautiful you are becoming more and more native than the person has

just found a link from going bad submit and it pops in solid on his phone. And what does it converts that whole website in to install laminated, a full-screen engaging thing inside the phone and you are ready to go? So some people ask me what are the difference between a native apps in the bath capital D? I tell them to see the street and you can see right now in the street that most of the present capabilities that native app offers are also offered by gws. By the time we were watching this, there have been more development on the PWS and the

NFC all things, like NFC and the SMS and contact list is also being provided to the meter for browser capabilities of it of Lewis Capaldi such as Bluetooth USB network speed. You can also go for Tess gestures as you can see here. You can go for Jewel locations and other things like that. So if you if you your next project involves any of these capabilities, I think we don't do it is a sure thing to go for No, I will tell you now, that's how you can actually create your own pwn for easy steps.

So adamant that you already have your side, anything like that, which has a domain, I meant, it's being sold on internet. That's the only requirement need. The first thing you need to do, which will enable GPS. Like that's the farmers requirement for having a pwa to the file so that they can be installed on a user's smartphone. So HTTP is a Mustang to go most of the hosting providers and the domain providers offer SSL Service as complementary and free service these days. So it's not hard to get SSL

certificate to set up. Emanifest file, this file exists into the root folder of your app or the website directory and it goes like this. If some of you are clear when the natives Manifest file as a file, that gives an identity to your app without the logos. What are the team and what is the home URL? What kind of need to be 150, W ways. As you can see, we have a short name for the app. We have the icons that you want to set, you have set us, start you out at the background color. It's

pops up in the navigation, bar on top. And also, you have said, the display will not display more than interesting. You can make you a behave in different display mode. You can have it with address bar in Havard without address bar. So stand alone is a thing that has the address for On Top. Green is empty building but you don't need a Adopt you out of the box. So, this, this is something that you, you need to Define allure to get your apps. I need to feel, and I can that Nick needs to show in the a browser. The next thing we need to do is the most

important thing that is setting up a service worker home is that it doesn't need to check for the server files. Every time a person request something, even if he's on there should be able to serve the request and that's what I actually said the smoker. Does it act as an intermediary between the user and the actual website? And it catches all the content from your website to the user. So that whenever the next time, the user is making a request, he doesn't need to go to the actual site

again, and again. And that's how you can set up your service worker and you can Define it what you want to do. If you have wot app site on WordPress, you can use the plug-in. Super pwa, pwa from original developers WordPress site on. Otherwise, if you are working on your own custom project on a flame. Look like you can use the pwa libraries offered by react and a universal solution is the workbox. You can visit web. Desk that is Google's official website for ewh and web development things. And you can learn more about

your box, which offers different Aviator app location for you so that you don't need to write your own a service worker. So far, this chrome offers a plug-in gabardi cordless light house. If you have the latest Chrome browser, this exists under the audit app and this helps you track how well your PWS performing. Know, you would see that people are so I have created our own bwa and this, Go to Lidl in cochranton elementary and what you need to do, you just need to click on the plus button and play concentrate report what does will do? This will render your app and we'll check for different functions

and will actually give you the final score of your app. How are you? Can see, we have a performance. Go to 39 Bridges, not pretty bad, but all good. We can see different scores, which shows how well our app is loading and things like that and other capabilities pwi lighthouses, just you how you can improve your feet of the school. You can follow these tips and tricks in order to increase your credit score. No, I would like to also show you there is another tab called his application job, and if you want to check if your manifest file is working as well as intended, you can go

inside your application, you can see inside the Manifest folder, if everything is done correctly, has all the states. Over here going to tell and check if your PWC is working fine and also you can check it over here. Okay? So the last thing that was remaining that give you still want to place your b w in to Google Play Store. Just to increase the visibility and other package called known as trusted web activity. And it also provides you with a ready-made, Android adapter,

in which, you can put up your own normal and that app automatically converts into a native app, which you can then launched into a Play Store. That's amazing. Most of the time you would expect you to BWI to deter as fast as native us, because that's what we intend. Maybe low internet speed Aspire package or maybe around your flight in cannot access. A PW because of this thing. And that actually is a speed issue. Slow website station and problems to people.

Slowly websites are interstates, be caused by Design, on Seventy-First plants. And sometimes, the content of extra displaced by ads. And you accidentally, click on ads and start clicking on the actual content. So an ulcer. According to a Google report, 50% of users believe your website, if it doesn't load under 3 seconds, and that's the case. Most of the time, the website doesn't know that you did it and he's just which blows the top in movement the website. so, Today, I have an interesting thing for you, that actually

can help you increase the speed of your website and let's go and see it. What is s o? M stands for Accelerated mobile pages in books. For variety of features, the music for a some kind of capabilities. Like what we use DreamWorks to announce our capability. For example, be used with box for the PW nature, but when for Best Practices inside your web project, that ensures that your website always lots in winter time and accessibility of, most of the people

don't care about accessibility, but it's very important for your website work across all different Challenged scenarios and accessibility something that makes sure of that. Even your website on what you think of Edward mobile design architecture design, but Adventures that your website is responsive automatically by default on, on all the different devices. A very interesting framework is a small landing craft. You don't need to learn a lot of things before. You are actually jumping into

amp and we'll see how amateur does that. So, and has three components of HTML and JavaScript and, and cashier is an extended version of normal normal, like, we used a mind instead of IMG tag and other different things, and we'll see some of the examples in an upcoming flights. And what are the cheerleaders is it was noticed that most of the time the normal rendering functions that we include in our website, don't work as expected because somehow we don't Implement them rightly. So instead of using traditional HTML tags we extend them to amp SMS gamer tags and we replace those

texts because custom JavaScript turn on Single Bed sometimes and it is heavy, which you are not losing it all and it slows down the world performance of your website. And that's why is disabled by default. You can use an extended version in which you can enable your own custom JavaScript inside, the amp script tag and also functionality, which helps you track the performance and accessibility of the website that you have just created. And I'm guessing she's an interesting thing that

helps you to get your website on the Google servers on flight. So that whenever someone sees a bold icon next to your website in Google search results website, you go to website, will be automatically cast as Han cast website on Google server. A learning app for web development has a very small learning curve as we discussed earlier, is DML CSS and JavaScript it is compatible with mostly all modern browsers because it doesn't have any new about capability on its existing normal and school

ID, or any other interpreter to work on AMP. You just need to start working with your notepad and that's it. Everything is competent base. There is no boilerplate code, whatsoever, and whatever you need to use inside your website, you just need to include door components and that's it. You can best practices by example and that's what you can visit at 4. No app offers a lot of components in a different features and different sets so that it covers almost all of the web capabilities that exist in today. And we are going to talk about

them. One by one website is the biggest of them and and upset help you to create a user first website that load nearly instantly and there are very smooth and compelling. So what is the average site? It's nothing but a modified version of your normal HDL website into amps and tax website. As you can see, in this example, we have converted or not, but I'm you tagged in to AM PM, see that which has made our image automatically lazy loading, and responsible different screens. We don't need to also worried about different aspects and things like that. Can take

care of himself. Also think that we were discussing before the amp cache is automatically provided. If you're at that website is 100% converted as you can see. In this example, this website couldn't be is fully Comcast and it loads directly inside Google search results without wasting time on actually loading the website. And did a couple of other features. Also that makes Ambassador unique world of am most of our websites use packing more analytics tools which process because it's a huge liability included and also it is

raining persistently back in the background of the website. The website load with slow down 35 speed and also contains a lot of battery power. So what time do tags are on politics that does is it actually a convert the normal working and functionality into a smooth and low power-consuming app and it only sends the data and the page is loaded. So even on the low latency networks, the website wouldn't work as much as possible. Another next components being offered by amp is called after. These stories are compelling way to generate

your own visual stories. If you're familiar with Instagram or SnapChat WhatsApp, they offer us to recap ability building their app but the problem with these is you can order these. He's outside the scope of that and it's also gets deleted after 24 hours. So there is no way that you can use them to share but it has proven to be the most engaging way of viewing the content and am stories is actually a HDML, send a letter, you can make your own a pitbull stories. What makes them interesting is that they are fast loading Call it offer the all all the

capabilities of amp and also you can use them in full screen mode. It works exactly like how our native story featured box their top table and need to create and they have some in build, cool animation features that you can use to create engaging experiences. I would like to show you that how he has changed the Order of the Phoenix. So, this is my Community College mobile, good previously, using a traditional website. But now we're using, Am story as the landing page of a website. And you can see how interesting it is that all the things that we

want to shoot what audience is in at a pitbull format, and the user doesn't need to scroll down and find a thing. It's just a pitbull or the salsa Sideburn in which they can find other things and navigation options. They want if they want to share Let's go inside the Cordon. Let's see, how complicated our simplest thing is. So you can see that this is the main component, which defines the overall view of the time story, then you have a campsite bar that is disgusting.

And then you have two different apps to read pages. You just need to Define your Lansbury pages in this format and the grapes are actually the division content leaders that were having inside your amp story. As you can see, in this one, then you can drive your custom CSS, which is on, in the head. To add some more customization and things like that. I'm also Emperor has also offers a lot of benefit hugely. We need us another interesting feature that I like the most. Usually you need a very high and lytic to win her back. If what section of your

website I use it is actually going but by default and stories of Africa built in which you can track down until which tappable screen. The user is reaching. Or are you getting a drag? What is the reach of your story? Different Flight of the damn story and also it is very easy to sario. No empires in a Doug is another Gap ability. Being offered from app and ads are really not interesting thing for us. And the problem is that adds usually load slower because it has high resolution images and it actually

adults instantly and you can just include you in order to show your Google ads inside your website. No app email is most important can be so damn important feature. Nadia Hernandez days, this animal picture is being exercised in, almost all the Google services. And one of the person said that it is the biggest thing that has happened to email since the creation of email. And that's if any user that is open. Your email came directly in interact with the content inside your email without actually jumping out of that scope. And like, for

example reading your I'm giving a feedback or eating your content or feeling or the phone, they can do it inside the email only if you have noticed recently, if you share a Google doc with anyone, there is a board icon and that choose life changes of the document directly inside your email. That is a capital T that has offered by a female and it's it's obviously but most of the email providers such as Gmail mail are you are outlook.com that was all that amethyst and now it's your turn to actually turn your website super fast

by using app and how you can do that is by learning, am-2am border wall, first grade variety of starting material, lighting tutorial, different components of an example, different courses, and you can go to all of them and become so You can go to Android Dev and all this things that I just said in the whole thing is actually being documented and will present it on Android. Contributing is the way that keeps us happy or developers and also expand the reach of any plane book. If it's good, it should be good for everyone

and you can help in contributing to Amber and pinion documentation reading, learning material and testing and finding books. That is new release. Almost every week. You can say and you can help us to reach more and more by the features and capabilities. So what did we learn? Today was a lethal combination of a pw80, reed. Valves and amp accelerated mobile Pages high-speed web experience which is intolerable like a native app and also fast like a native app. That brings us to a conclusion that every app that is past and consumes less

internet. Let's load on the server's. Make making a dry cleaner. Thanks a lot in being my lovely Guardians and all you can check out my blog. I mentioned my daughter for more content that I create and more things you can ask me over there. Thank you guys.