Coding

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

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