Progressive Web Apps (PWA) Tutorial for Beginners - Getting Started

welcome to this video great to have you here in this video we'll have a look at progressive Web Apps a super important topic extremely hot these days and a topic on which I created a very comprehensive course on udemy link can be found in the video description of course now in this video though I want to share the first module of this course with you there we'll have a look at the most important question what are progressive web apps we'll build our first little progressive web app together and we will learn which topics make up a progressive web app which features now we'll probably use some of these features in future projects on this channel and therefore I'd be more than happy to welcome you on the course but first let's dive into the first course module and learn these basics I mentioned while I can't do this course it's great to have you on board in this course we're going to dive super deep into the topic of progressive web apps now progressive web apps that is a term which is pretty hot these days but it is a topic which is definitely here to stay progressive web apps in the end describe a set of features of technologies you can add to your existing web applications to turn them into native app like native mobile app like experiences using device features like the camera and providing offline access now in this course you will learn all about what progressive web apps are why you might want to use them and you will of course use them and learn all the core technologies that make up this term progressive web app you will of course all learn this by building a real course project and adding these features step by step will start simple but will soon add a way to install our application on the home screen of a real mobile device we'll find a way of making our app available even if internet connections lost and will do way more will access the device camera and location will be able to send push notifications and synchronize data in the background even if we are offline this is what we'll build and learn in this course now who is teaching you my name is max moon Schwarz Mullah and I'm a freelance web developer I worked a lot with progressive web apps and I can tell you there's never been a better place or time to learn it the features which make up progressive web apps are well supported already you can already reach a huge audience with all these features and the cool thing is you build progressive web apps in a way that your web apps still work on older browsers too now is the time to learn it to be prepared for a future where probably every web application will be a progressive web application since it offers significant advantages and makes your application much more enjoyable to your users so let's dive into progressive web apps by answering one important question first what are progressive web apps it's a term which you might have heard already but sometimes it's hard to really say what it means in the end progressive web apps is just a term referring to a couple of features you can add to any web application to any web page running in the browser therefore to enhance it this is what progressive web apps in the end are about you progressively enhance your existing web pages to feel and work more like native mobile apps I'm not just talking about responsive design so that it looks good on both devices we're doing this since a couple of years already or you should be at least I'm talking about other things you know from native mobile apps like your app working if you're offline it having an icon on the home screen things like accessing the device camera or the location synchronizing data in the background these are all features which were hard to do in web applications in the past nowadays we got browser support in a lot of browsers for that and we can therefore use that now in this course I will show you how to use all these technologies which make up a progressive web app and of course I'll also explain which technologies these are and I will show you how to implement them in a way that it also works on older browsers that your web page still works on older browsers because that's the core thing you progressively enhance a web application it's not at all or nothing move it's not like it doesn't work on older browsers anymore it just means if you have a modern browser on a mobile device you get an awesome experience otherwise you'll get the experience you've gotten anyways there are three main words I'd say by which you can summarize progressive web apps they should be reliable which means they should load fast and even work if you're offline at least a part of the application should work if you're offline now this is really a core thing of progressive web apps we're talking a lot about that initial load the first time you wizard an application you open it because if you consider application running on your mobile device most of them start up pretty fast so long loading times you don't want that additionally it should be fast not just during load up but also when sand runs it should react to user input it should provide animations it should be able to access native device features in an intuitive way and we also want to make sure that it's engaging we want to get our users back into the app we want to offer features like push notifications to inform them even if the application is closed yes you heard that correctly this is what you can do and what we will do in this course so that is what makes up a progressive web app now why would we want to build one obviously we have some good arguments here but couldn't we achieve the same by just building a normal mobile app with Java Android or with Swift objective-c well let's find out which arguments speak for a web app instead of a native mobile app let's compare native apps with mobile apps to find out if it makes sense to build a web app to begin with here's a number of which might discourage you but no worries I'll say more about this number over the next seconds if we have a look at the usage of our smart phone here's a report by comScore from 2015 made in the u.s. we see that the average smartphone user spends 87% of his time in native apps whereas only 13% of the time go into the mobile web so the user visiting a web page in the browser on the mobile phone now it is clearly discouraging because why would we build a mobile web app if a native app is so much better let's first of all find out why people spend so much time in native apps one important factor are push notifications they drive them back into the apps you get a push notification you tab on it you're back into the app push notifications communicate with you even if the application is closed even if the phone is tucked away into your pocket additionally we have home screen icons which make it easy to start yet you pull out your phone you have some time to spare just open one of the apps and that's it this is how you use it right that's harder for web apps web pages of course you can't add them to the home screen but it's not like you're prompting the user to do so you don't have the app store where people would go and search for you so getting on your home screen traditionally has been hard for a web apps it's a huge plus for native apps though additionally we have access to native device features like the camera geolocation and other things and of course many native apps also work offline at least a certain part of these apps were it's offline these are all good reasons why people are using native apps now as I already said the cool thing about progressive web apps is that we can basically bring all these things into the web too so maybe this can switch relations that's not the only argument for the mobile web though even though today a lot of the people are using native apps let's have a look at some arguments against native apps one argument is that you of course have to learn two languages if you want to support iOS and Android or you need multiple developers what be nicer if you could just write our application in the language you already know HTML CSS JavaScript and so on so if you could just use web application now the better argument is this number though even though the majority of users uses native apps 80 percent of the time goes into the top free apps which unfortunately probably isn't your app it's most likely Google Facebook whatsapp something like that so there's only very little time to spare for our apps and here's one our figure how many new apps do you guess does the average user install per month on his phone or her phone does you get something 1 5 10 its zero absolutely zero the average user doesn't install a new app you install new apps if you have a new phone but thereafter you rarely add new apps these are the statistics that makes clear that the web has something big to offer its reach let's compare the reach we have the top thousand native apps and web pages visited from mobile in the native apps we have 3.3 million users in the web apps we have 8.9 so even though less time goes towards the web more people are visiting it we can reach a broader audience there the reason of course is connected to the figure of the eighty percent being spent in the same app people do spend a lot of time in native apps but always in the same apps the average app doesn't get that many visitors now the web has a huge advantage you don't need to install anything from the App Store which takes time in which you have to do actively you search for something Google shows the result boom you're on your webpage you take a bookmark and you're back so this is how you the web it's so much easier to get onto these web pages and that's a huge advantage off the web now since we can get advantages of the native device offline access camera ends on to the web combined with that figure sounds like progressive web apps aren't that bad of an idea let's confirm this hypothesis by having a look at this comparation we have native apps and traditional web apps so no progressive whether a traditional web app which doesn't offer access to any native device features if we compare them by capability and reach the native app of course has awesome capabilities we can leverage the operating system and access a lot of native device features on the apprehend the reach isn't that good for the reasons we heard about a web app on the other hand a traditional one doesn't really have access to all these device features it probably doesn't run offline so that's not too good but the reach is really good you can find it while Google it's just one address in the URL bar away a progressive web app now combines the best of both worlds there we can access a lot of the native device features we can make it available offline and we do have good reach of course because it's still a web app still running in the browser this is well we will focus on progressive web apps in this course and while learning them really is a good idea you can get the best of both worlds and deliver awesome experiences to your users so over the last lectures we learned what progressive web apps are and why we might want to build our next web application as a progressive web app now let me show you an example for a progressive web app at F dot F T com you can wizard the application page of the Financial Times this runs in the browser but it is a progressive web app it feels a lot like a app if we navigate around there with the animations and the menu and if I open my chrome developer tools and I switch into device mode by pressing this icon here you see of course it also looks like a mobile app now a cool thing happens if I now do the following if I go to network in the chrome developer tools which as strongly recommend using I recommend using Chrome for this course because it supports all the features you're going to learn about and its developer tools are awesome more about this later so if you go to network and click on offline here you can simulate that you're offline now if I reload that page you still see some content the images are not there I give you that but you can still read that article here this is because it is a progressive web app offering you some nice features now Google even built a tool which you can use to judge how well a site performs as a progressive web app and it's built right into the developer tools if you're using the latest version of Chrome it's light to cows a day if you don't have the order tap here though you can simply search for lighthouse Chrome and then find the page where you get installation instructions about lighthouse you can add it as a Chrome extension dead now if you do have that audit tab let's perform an audit on the Financial Times page here and this will now do a couple of checks to find out how well this performs as a progressive web app let's wait for this to finish and analyze the results so the test is done and overall the page does okay a couple of features are missing which would make it a really good or awesome progressive web app and the performance isn't that great here but that might also be connected my performance here on the machine while some recording so this is a decent progressive web app implementing a lot of the features and I will also explain in one of the next lectures that it is okay to not reach 100 here you do have the choice between going all the way to it not at all or any step in between you can add features off that progressive web app world as you need them in your app so this is nice now I wanna show you a number page you can't open that because it's offline but this is the course project we'll build it say Instagram clone a simple one of course as a progressive web app it looks and feels nice in my opinion the cool thing is that this of course is a progressive web app now one thing we can do is we can take an image so let's allow camera access and hey Here I am so let me quickly take an image here you'll see I'm sitting in front of a green screen let's also get my location so I'll need to allow that to fetch it it'll be masked here I don't want to show my full location and then let me enter some title during my recordings and keep in mind this is in the browser it's just looking like on a real device throughout the course though I will also show how the app runs on a real device so for now let me click post here to post this now let's say for syncing and if we reload there it is already so this has been saved on some server now again you can't access this page here but you will build it on your own and we will also ship it to the web at the end of the course now thus far you might think it's nice that camera thing is nice but not super impressive now let me turn off my Wi-Fi here to really have no internet connection anymore if I reload the page you can ignore these errors because they are basically catched and I still see my page even my content here and I can still navigate around now there's one more thing I want to do for which I will need internet connection so let me quickly turn it on again I want to enable push notifications so let me click here and allow access and now I get day push notification here on my other stream so unfortunately this isn't recorded because push notifications were turned on now with dead let me now go offline by turning off the Wi-Fi and now I'll try to send another post let me take a picture and that sent us from offline mode I'm in Munich let me a post here and it's also saved for synchronization now clearly it can't send it I have no internet connection so let's say I now come back online because my Wi-Fi reestablishes connection now it's syncing this and if I reload the app here it is from offline this is what makes this a progressive web app a lot of the features you might know from your native apps but you haven't seen that often in a web app this works fully offline it caches everything at all accesses to device camera has pushed messages as you saw and much more so now let me conclude this by making an audit on this app too so that you can see what you're going to build in this course let's perform an audit here with lighthouse again and let's see how many features about progressive web apps I packed into this application and what you're going to learn in this course therefore I'll be back once this audit finished the audit finished and here you can see I got a 100 in progressive web app so this is a perfect progressive web app using all the features that make up a progressive web app you see the ever met ryx are also amazing and that means you're going to learn a lot of useful things in that course because we'll start from scratch we'll build this app together and add all these features that lead to this 100 together can't wait to get started with you now that we learned a lot about what progressive web apps are and why they are awesome let's build our first very simple one and for that as I already mentioned it please use Chrome I strongly recommend it because whilst we will build it in a way the course project I mean then it also works on older browsers you of course want to see all the new features you're using right and Chrome is one of the browsers which supports most of them work all of them actually we will use in this course so I recommend using it now throughout the course I will always highlight which browser supports what but again chrome is the one supporting everything additionally the developer tools are awesome I'm going to use it and it'll be easier for you to follow along if you're using Chrome of course you can go back to your favorite browser or author of this course again then besides Chrome will also need note j/s now we're not writing a server-side application here but no J's ships with NPM its package manager and it's the defective package manager for development projects for front-end JavaScript development projects and we will use a tool to install some dependencies mainly one dependency a development server to really simulate that our application runs on a server even though it runs on the local device so make sure to is it node.js org and simply download the latest version if your problem if you're having problems with that choose 6.11 instead or whatever the latest a low version is at the point of time you're viewing this so make sure to download and install node.js again we're just using it to bring up that development server and to manage our dependencies our libraries and so on once you got all of this setup attached to this lecture you can find a download download it and open it in your favorite IDE sublime atom webstorm Microsoft whistles to you code whatever that is this is the starting project we'll use here later this course will use a different project though now you're first of all with no chase installed you need to open up your terminal or command prompt on your operating system and this here is the normal terminal just integrated into my IDE and navigate into that project folder and in there simply npm install NPM refers to this node package manager we installed automatically together with node once you hit enter distance will install all dependencies which is only one in our case you can check it in the package the JSON file it's this HTTP server here now this simply is a development only server why don't we just double click on the HTML files because if we double click on them we use the file protocol and that's not HTTP and for that reason all the features I want to show you won't work because it's not really served like a web application we want to simulate it as such though and test it as such hence we need a web server and this is a super simple development only server where we don't need to write any code to get it to run our app once you did install it you can run NPM start in the same terminal and keep that running because the server needs to keep running and then here you see the URL under which you can see your application now let's out MIT by simply navigating back to the browser and entering your entering it here you could also open localhost 3000 by the way and you will see this is the application I want to start with it lays a nice little animation showcasing the advantages of progressive web apps and what you're going to learn in this course it's nice but it's a normal website let's turn it into a progressive web app together back into your project open the public folder and there you see that SW dot J's file that's going to become important I'll explain what it is a Service Worker later in this course now for now let's go to source j s and then the app dot J's followed here's a very simple code to run that animation by simply adding CSS classes every X seconds now before we execute that let's do something else let's run navigator dot serviceworker register and there has a string where you point to slash s wjs so basically to that file that's all for now just add this line now save it and thereafter load your page now let's open up the developer tools and go to the application tab should click on serviceworker you now see that this is populated we'll come back to what exactly happened here later in the course you also see I'm previewing this as a native device or as a mobile device you can always toggle between these displays I like this quite a lot because we're building something which should look good there so why don't we use it here and now with that let's take offline here or under network offline also make sure you disable the cache here under Network now if we reload the page you see it still works even though we have no internet connection anymore and you could say yeah makes sense it's running on my local machine right yeah but if we take the offline button your Chrome will basically simulate that this internet is is off that this browser can't connect to this server and keep in mind we have a real web server here because we did start one we didn't just double-click the HTML file as I explained so this really is working in offline mode and if you don't believe me go to the application serviceworker and click unregister there and reload again now you get this there is no internet connection screen this is our first application where we successfully register a serviceworker so that our application works even if we are offline now we'll learn much more in this course but this is a great first step and we'll build up on this and learn how we can use different strategies to decide what to store for offline usage and what not how to add these push notifications and much more I can't wait to dive into that with you so if that let's not lose any time and let's continue seeing what exactly makes our progressive web apps and which features you're going to learn about in this course thus far we already had a look at what progressive web elves are why we might want to use progressive web apps or build them and what we're going to build in this course now when I have a look at the core building blocks technologies we use when building progressive web apps because thus far we only had some buzzwords we heard about offline access and push notifications but let's now really have a look at all the features we beus and you'll learn about in this course when building progressive web apps a core feature our service workers service workers are supported in modern browsers like Chrome and service workers are basically JavaScript running in a background process even if your application is closed service workers are a core building block because they allow us to get offline access to cache some files and serve them if we don't have an internet connection and they also give us access to other progressive web app related features for example background synchronization sending a request once internet connections we established we use service workers for that Porsche notifications would be another example we use service workers for that because they are running in the background independent of currently opened tabs service workers therefore our D core building block and I have a couple of modules diving into all the different things you do with them also advanced lectures advanced modules you'll learn a ton about them in this course service workers are not the only building block whilst we can use them for offline access background synchronization web push and more the application manifest is also an important building block you're going to learn about this in the next course module already the application manifest makes your application installable on home screens not installed through an app store but instead well you will see it you can basically install a web app and then we'll do more than just open that web page a web manifest is therefore a super important and another feature you typically use or you use in any progressive web app you're building and then you can add more and more features now besides the acknowledged we use responsive design is an average or balding block now to be honest I won't dive too much into it in this course because there already are whole courses covering this out there and responsive design is something we're doing since a couple of years already so therefore definitely make sure you notice and I will touch on it in this course but I will focus on all the new technologies all the things which aren't covered that well in the internet yet now and then there are other things like the geolocation API or the camera API so that we can access various native device features and I will dive into that in this course too these are the core building blocks in the end always keep in mind progressive web app is just a term it in its closest definition refers to app which uses service workers and has application manifest but it typically also means applications which are responsive which offer backgrounds which use web push and more and you're going to learn all of that in that course now that we learned about the core building blocks let me make one comparison which is sometimes made and which is kind of wrong single page applications and progressive web apps now in case you don't know single page applications are applications web applications powered by JavaScript typically created with a framework like react angular or view where the framework re renders the Dom all the time to react to user input to display different pages once you only have one single page one HTML fall single page applications are not the same as progressive web apps and actually progressive web apps as I mentioned it's just a collection of technologies and techniques and it runs totally independent of your app being a single page application or not you can turn any single page application into a progressive web app and the same is true for any traditional multi page application where you render your views from your server by a node PHP whatever it is so this is the wrong comparation a single page application is powered by JavaScript as I said typically using a framework it has highly reactive because things happen instantly because we don't send the request to the server and wait for a new page and as I said we only have that single page a progressive web app is just a collection of technologies can be used anywhere it typically also uses a lot of JavaScript because the serviceworker for example uses JavaScript and your serviceworker is very important but the serviceworker isn't controlled by any framework anyways so the JavaScript use here can be vanilla JavaScript without a framework and actually in a course project will use a project which just uses vanilla JavaScript and multiple pages because I wanted to show the most flexible project I can to really show you that what you learn in this course can be used in any project no matter if that's a single page app or not towards the end of the course I have a module where I show you how to turn your react angular or view app into a progressive web app but for the majority of the course I just show you code which just works in any project no matter if single page or multi page now a progressive web app still also aims to will be high react if you could say but here we're focusing more on the initial loading time we want to get something onto the screen fast for example by caching it by even making it available offline it's not so much about what happens thereafter of course there are some things we want to use like animations to provide a nice user experience but we don't care if you load new pages for every request or if you use JavaScript to re-render the page often times you will see single page applications being progressive web apps as well but as I mentioned that's no hard requirement and finally as I just said progressive web apps can work with multiple files too and actually that's not that uncommon you can absolutely use progressive web app anywhere you can turn any web page into a progressive web if you want to so that's the wrong comparation we can use the progressive web app concept on a single page application but we can also use it on any other application there's this other cool concept I want to emphasize as well it's a progressive web app what does the progressive actually mean it doesn't mean you can use the device camera indeed it basically means that we can progressively enhance our web application so let's consider this starting point we have three different web apps one is a legacy web app so an older web app using older technology and probably also supporting older browsers then we have an existing modern app which is maybe also a traditional web app not not a single page application nothing fancy but it targets modern browsers because maybe it's an internal company tool or some page which mainly addresses tech infuse yes something like that and maybe we have an upcoming project and there we can pretty much Bank on people having more modern browsers because support is already getting better more people are using modern browsers it's probably going to be better in the future too so if these free different apps can we only turn the upcoming project into a progressive web app now because rewriting an existing app from scratch certainly is an option so if you want to turn this into a progressive web app you can't just start over well let's have a look at the near future we can simply add some features to our existing app and this is actually something I will show you in the course we will take a project and add features step by step and you can stop at any given point you can stop after adding an app manifest and a basic Service Worker you can stop after you implement the basic caching advanced caching push notifications you can stop all the time now your existing modern app here you can maybe open some more progressive web app features and for the upcoming project yet there you can start from scratch obviously so you can fully implement it as a progressive web app right from the start and plan everything with that in mind now in the further away future our older application might use some more Malta progressive web app futures but not all of them and it's perfectly fine you don't have to use 0 or 100 percent you can absolutely use 40% of all the features you learn in the course pick the ones which enhance your application and add them now therefore our middle app here maybe is a completely converted progressive web app in the end because we added all the features which make up a progressive web app we have solid caching and different circumstances we use push notifications and all that stuff and our upcoming project already of course was planned as a progressive web app and therefore also as one and this is important because I know that a lot of people are looking at all these technologies and are saying well I don't have the resources or the time to rebuild my old app and I have to support all browsers anyways these users are never going to see the new features and I can only answer you that's not a problem simply add the features which enhance your application right now and feel free to turn it into a complete progressive web app if you have the time definitely consider it for all upcoming projects though you so there was a lot of talking about what progressive web apps are why we use them and what we're going to build in this course now let's see what exactly we'll learn in this course and how we'll walk through all these topics well right now we're still getting started but we're almost done and the next module will have a look at the application manifest this is days document which tells the browser more about our web application and you'll learn everything about it in the second module thereafter will already dive into service workers because they are such a core building block now service workers and in general a lot of progressive web app features use promises and the fetch API therefore I'll have a short module where I briefly refresh the knowledge about these core concepts so that we're all on the same page because we're going to use a lot of promises and the fetch API throughout the course it's easy to use that I just want to make sure that we all know what we're using there now once you got that refresher we'll head back to the service workers and learn how we can use them to provide offline access through caching well then continue on this road and dive into advanced caching strategies using service workers to really have the right strategy for which ever assets you going to load in which every situation in your app after that we'll have a look at how we can catch dynamic content with indexed DB because thus far we will have cached assets like CSS files script files images now what about JSON data you get back from a rest endpoint we can cache that too and there you will learn how to pass do that once we did that we'll have a look at responsive design now already said I won't dive into it super deeply here because there are whole courses about that and you can indeed create whole courses about that so I just want to give you some core features some basics you need to know but I definitely encourage you to pick up a separate course on this topic it's super important and more than I could fit into this course where I really want to focus on all the other core technologies now with responsive design added we'll go back to these new core technologies and we'll have a look at background synchronization next which describes the process of us sending something while store offline and therefore of course it would fail but of a way to store that and send it when the internet connection is re-established even if we did close the application by then you'll learn it in this module and thereafter we have a look at web push notifications so how we can receive and send push notifications even if our application is closed now as a next step we'll have a look at the media API at geolocation these are not strictly core features of a progressive web app but since you typically use native device features in progressive web apps it's super important to know how to use two of the most important and popular features you can use on a real device and I'll dive into this in this module now after that we learned a lot about different technologies and we'll see that it can get hard to manage all our service worker code therefore well then dive into automated Service Worker management I will show you a tool you can use to make a lot of the things you had to do manually before easier by doing them automatically once we did this I'll dive into single page applications and progressive web apps to show you how to turn your number one favorite framework application into a single page application with these with that we'll have learned a lot this course will do more than just get you started with progressive web apps it will really allow you to use that knowledge dive deeper use it in your next project and I'm super excited to get started so let me spend one more word about the course project setup and how you get the most out of this course and then we'll get right started and dive into the application manifest I hope you enjoyed this first module of this course now there we had a look at what progressive web apps are and why they are awesome obviously I'd be more than happy to welcome you in this course so that we can go through all these topics together and then also of course use some of them in future projects on this channel hopefully see you there have a great time bye

Channel: Academind

Views: 74,726

Rating: 4.9190602 out of 5

Keywords: progressive web apps, progressive web app, pwa, tutorial, course

Id: dap6yIe1uK4

Length: 40min 11sec (2411 seconds)

Published: Fri Sep 08 2017