Coding

Angular Service Worker Tutorial

  • 00:00:01 hi everyone welcome to this video in
  • 00:00:04 this video we'll turn an online-only
  • 00:00:07 angular application into an offline
  • 00:00:10 available one by adding a service worker
  • 00:00:13 and as you will see this is super easy
  • 00:00:15 to do with angular and I will show you
  • 00:00:17 how to turn into such an application and
  • 00:00:19 how you can then also configure it to
  • 00:00:21 fully meet your needs
  • 00:00:23 so let's dive in
  • 00:00:27 we'll start with this very simple
  • 00:00:30 angular application here and you can
  • 00:00:32 find the code to that project attached
  • 00:00:34 to this video and this is obviously a
  • 00:00:37 very well simple not too exciting
  • 00:00:39 angular app it is rendering a list of
  • 00:00:42 blog posts dummy blog posts which are
  • 00:00:46 fetched in our app component here from
  • 00:00:49 Jason placeholder well that is just a
  • 00:00:51 page exposing a dummy rest api which you
  • 00:00:54 can use to get some demo data to display
  • 00:00:57 on your page you can also send dummy
  • 00:00:59 post requests to them and so on
  • 00:01:01 but that's not what we'll do we'll focus
  • 00:01:04 on getting data so this is a normal
  • 00:01:06 angular app not too many features but it
  • 00:01:10 represents a typical angular app we got
  • 00:01:12 more than one component and we also got
  • 00:01:15 our posts and if you watch closely you
  • 00:01:17 see I'm also using some special font
  • 00:01:19 which I'm actually pulling in in my
  • 00:01:21 index.html file here I'm importing this
  • 00:01:24 a swelled font here from google fonts so
  • 00:01:28 this is what makes up our angular app
  • 00:01:30 now if we inspect it in chrome we can go
  • 00:01:34 to the application tab here in the
  • 00:01:36 developer tools and we can turn this to
  • 00:01:38 offline mode which means we're still
  • 00:01:41 online we don't have to quit our Wi-Fi
  • 00:01:44 network but this will simulate that we
  • 00:01:46 got no internet connection and if I now
  • 00:01:48 reload the page well obviously I get an
  • 00:01:51 error that we don't have an internet
  • 00:01:53 connection if I go back online it works
  • 00:01:55 again now let's see how we can actually
  • 00:01:58 fix this or change this behavior with
  • 00:02:01 the help of a serviceworker and how we
  • 00:02:03 can easily add such a serviceworker to
  • 00:02:05 the app with angular let's first of all
  • 00:02:08 understand what a serviceworker actually
  • 00:02:11 is now this is how our javascript code
  • 00:02:14 typically behaves it runs in a single
  • 00:02:17 thread that means our web application
  • 00:02:20 which can consist of multiple pages or
  • 00:02:22 in the case of an angular app with one
  • 00:02:25 page only this app often uses JavaScript
  • 00:02:28 and if you're using angular you're of
  • 00:02:30 course using JavaScript because angular
  • 00:02:32 uses JavaScript so this JavaScript code
  • 00:02:35 the entire angular app runs on one
  • 00:02:37 single thread and JavaScript has its
  • 00:02:41 features to still handle asynchronous
  • 00:02:43 code and not block the execution but
  • 00:02:45 this is all normal JavaScript now
  • 00:02:47 javascript and the browser also offers
  • 00:02:50 us to run an additional threat we can
  • 00:02:54 run a so-called web worker and a special
  • 00:02:57 form of baddest tea service worker on an
  • 00:03:00 average so this still then uses one of
  • 00:03:03 the same Fred but it's a different
  • 00:03:04 threat than your main JavaScript code
  • 00:03:06 and the important part is that this fred
  • 00:03:09 is kind of decoupled from your HTML
  • 00:03:12 pages so this means that this can also
  • 00:03:14 continue running in the background for
  • 00:03:16 example on your mobile phone
  • 00:03:18 that is something mobile browsers
  • 00:03:20 typically offer this can continue
  • 00:03:22 running and it could therefore also do
  • 00:03:24 advanced things like receive push
  • 00:03:26 notifications take my full progressive
  • 00:03:29 web app course if you want to learn more
  • 00:03:31 about this but one hour crucial thing
  • 00:03:33 that a serviceworker can do is it can
  • 00:03:35 manage all your different pages in case
  • 00:03:38 you got multiple pages or you're a
  • 00:03:40 single page if you're building an
  • 00:03:41 angular app and it can listen to
  • 00:03:43 outgoing networks requests so it can
  • 00:03:47 listen to requests going out of your web
  • 00:03:50 page for example if you are fetching the
  • 00:03:53 assets of that web page the CSS code the
  • 00:03:55 font JavaScript or also data from an API
  • 00:03:59 the serviceworker can catch these
  • 00:04:02 outgoing requests and do something with
  • 00:04:04 them
  • 00:04:04 like for example cache the responses in
  • 00:04:08 a special cache storage or then also
  • 00:04:11 return these cached responses back to
  • 00:04:14 your page so that it also works if
  • 00:04:16 you've got no internet connection of
  • 00:04:18 course only if there is a cached version
  • 00:04:20 available this is what the serviceworker
  • 00:04:22 does it can be seen as a proxy between
  • 00:04:26 your app your front-end app and DD HTTP
  • 00:04:30 requests you are sending to the backend
  • 00:04:31 it proxies that request which means it
  • 00:04:34 caches it does something with it and
  • 00:04:36 might then allow it to still go on and
  • 00:04:38 leave the app but it could also block
  • 00:04:40 this now configuring such a
  • 00:04:43 serviceworker and writing it from
  • 00:04:45 scratch is something you can do and
  • 00:04:47 something you learn in my full
  • 00:04:48 progressive web app course there you
  • 00:04:50 also learn about features like push
  • 00:04:52 notifications and so on
  • 00:04:54 for this video we'll focus on how
  • 00:04:56 angular can easily add such a
  • 00:04:58 serviceworker to our angular app because
  • 00:05:01 it turns out that there is a special
  • 00:05:03 package we can install for that let's
  • 00:05:05 quit ng surf and now here it's important
  • 00:05:08 that you're using the latest CLI version
  • 00:05:11 for that project and this project does
  • 00:05:13 and then you can run ng add to add a
  • 00:05:17 third-party package but that's more than
  • 00:05:20 just the NPM library really some
  • 00:05:22 functionality to your app and only some
  • 00:05:26 features can be added because
  • 00:05:28 essentially this will execute a command
  • 00:05:30 which has to be defined by whichever
  • 00:05:33 package you are targeting so not every
  • 00:05:36 not even close
  • 00:05:37 not every third-party library supports
  • 00:05:39 this feature but there is a special
  • 00:05:41 library which does support it which you
  • 00:05:43 can target with at angular /pwa and if
  • 00:05:47 you run this this will actually
  • 00:05:49 configure your existing project to use
  • 00:05:51 the angular Service Worker package and
  • 00:05:54 start with a pre-configured Service
  • 00:05:57 Worker so it does a lot for you you can
  • 00:05:59 already see it added some things to the
  • 00:06:01 index.html file like the no script
  • 00:06:03 section to give a warning if JavaScript
  • 00:06:05 is turned off because we need that of
  • 00:06:07 course we need to turn on it loads this
  • 00:06:10 manifest here which is also generated
  • 00:06:12 now that is important for actually
  • 00:06:15 having a launcher icon for your app if
  • 00:06:17 you have it on a mobile phone you can
  • 00:06:19 even save it to the home screen and then
  • 00:06:20 start it with that and you can define
  • 00:06:22 which icon that should use and so on so
  • 00:06:25 dad is the manifest or JSON file again
  • 00:06:27 learn more in that course I mentioned
  • 00:06:28 for us interesting is the app module
  • 00:06:31 because in the app module we are using a
  • 00:06:34 serviceworker module which is imported
  • 00:06:36 from at angular serviceworker and this
  • 00:06:39 is really an official package of the
  • 00:06:41 angular framework and it does what it
  • 00:06:43 sounds like it registers a service
  • 00:06:45 worker which will be that proxy that
  • 00:06:48 caches outgoing requests and does
  • 00:06:50 something with them and you will learn
  • 00:06:52 how to configure what it does to them
  • 00:06:54 later in this video of course we use it
  • 00:06:57 here by calling the register method and
  • 00:06:59 there we target the ng SW worker dot J's
  • 00:07:03 file and you won't find that file here
  • 00:07:06 and the reason for that is the
  • 00:07:08 this file will actually be
  • 00:07:09 auto-generated it will be generated
  • 00:07:12 during the build process and it will be
  • 00:07:14 in a dist folder therefore and it will
  • 00:07:16 hold your serviceworker which will
  • 00:07:19 contain a lot of functionality which you
  • 00:07:20 don't have to and typically don't want
  • 00:07:22 to write on your own and here it's all
  • 00:07:25 the configure to only be added if you're
  • 00:07:27 building for production in the assets
  • 00:07:30 folder we see some icons were added for
  • 00:07:32 that manifest a JSON file and in the
  • 00:07:34 root project folder we see that in the
  • 00:07:37 package to chase the file something
  • 00:07:38 changed for example the angular PW a
  • 00:07:40 package was added which includes that
  • 00:07:42 angular Service Worker package and we
  • 00:07:45 got this ng SW config file this is the
  • 00:07:48 file where you can configure that
  • 00:07:50 serviceworker which will be generated
  • 00:07:51 but we'll take a closer look at this in
  • 00:07:53 a second the angular JSON file which
  • 00:07:56 manages to see live project all that was
  • 00:07:58 adjusted a little bit there
  • 00:08:00 serviceworker is set to true for the
  • 00:08:03 production build this is required
  • 00:08:05 because the serviceworker
  • 00:08:07 will cache certain resources and to
  • 00:08:09 ensure that a new belt updates the
  • 00:08:12 serviceworker these resources will
  • 00:08:14 contain a hash and dad will then also be
  • 00:08:17 injected into the serviceworker
  • 00:08:19 which is why we need to make the build
  • 00:08:21 process aware of the fact that we need a
  • 00:08:23 serviceworker this is how that works
  • 00:08:25 now let's simply see that in action
  • 00:08:27 let's create a production build by
  • 00:08:29 running energy built – – prod and this
  • 00:08:32 will now bundle and optimize the entire
  • 00:08:34 app use ahead of time compilation and so
  • 00:08:36 on and it will spit out our angular app
  • 00:08:39 in a dist folder and there we should
  • 00:08:41 then also see the serviceworker so let's
  • 00:08:43 have a look to close the source tab here
  • 00:08:46 let's refresh here's the dist folder the
  • 00:08:49 angular PWA folder for the project and
  • 00:08:51 there we see that ng SW work or Jas file
  • 00:08:54 you remember that is the file we are
  • 00:08:57 importing in the app module here we're
  • 00:08:59 registering it here so this can be found
  • 00:09:02 in the dist folder indeed if we have a
  • 00:09:05 look at it you see there's a lot of code
  • 00:09:06 in there because well it's actually pre
  • 00:09:09 generated for you to do all that caching
  • 00:09:11 and so on in a very efficient way and
  • 00:09:14 now let's simply do what it let's simply
  • 00:09:17 see what it does and for that you need a
  • 00:09:20 web
  • 00:09:21 server you can run to host your
  • 00:09:23 production app here you could do that
  • 00:09:26 with ng surf – – brought but there you
  • 00:09:30 will actually not see the serviceworker
  • 00:09:31 in action correctly because we'll only
  • 00:09:34 build it in memory so therefore what you
  • 00:09:36 should do is install a lightweight node
  • 00:09:39 server and thankfully there is one you
  • 00:09:41 can install it with npm install' – g to
  • 00:09:44 install it globally HTTP server this is
  • 00:09:48 a package you can use to launch a simple
  • 00:09:51 node based server which will host the
  • 00:09:54 content of the folder you run the
  • 00:09:55 command in and to command you need to
  • 00:09:57 run it's just HTTP – server so let's
  • 00:10:03 navigate into our disk for and there in
  • 00:10:06 the angular PWA folder and let's run
  • 00:10:09 HTTP server and then you can assign a
  • 00:10:13 port with – pata t1 for example and
  • 00:10:16 we'll then bring this up and now you can
  • 00:10:18 visit localhost 8080 one and you should
  • 00:10:23 see your angular app there now this app
  • 00:10:25 looks like a normal app now reloaded
  • 00:10:28 wants to make sure that the service
  • 00:10:29 worker can do its work and go to
  • 00:10:31 application again we should now see that
  • 00:10:33 under application we got that energy SW
  • 00:10:36 worker running and if you don't see that
  • 00:10:38 try reloading that page one more time
  • 00:10:40 also make sure to clear the storage here
  • 00:10:42 entirely if you were it with service
  • 00:10:44 workers and Dysport served on your local
  • 00:10:47 domain before now you should see that
  • 00:10:50 the interesting part is if I now take
  • 00:10:52 offline again and I reload it still
  • 00:10:55 works right we still see the same
  • 00:10:57 content as before even though we're
  • 00:11:00 offline now how can that work if we go
  • 00:11:03 to the network tab and we clear it and
  • 00:11:06 we now reload we see we're making a
  • 00:11:08 bunch of requests here and they're all
  • 00:11:11 essentially served from the ng service
  • 00:11:14 worker here so from the service worker
  • 00:11:16 this is all served the interesting part
  • 00:11:18 is the post request here probably which
  • 00:11:20 is still kind of can connect to the
  • 00:11:23 outgoing server for that let's again
  • 00:11:26 disable Wi-Fi and let's try this again
  • 00:11:30 and now this does not work but what we
  • 00:11:33 can see still is that for one
  • 00:11:35 buggerin intended behavior in chrome
  • 00:11:37 which leads to these API requests still
  • 00:11:40 going through even if we simulate
  • 00:11:41 offline mode but more interestingly we
  • 00:11:44 see a white page we don't see that there
  • 00:11:47 is no internet connection error now we
  • 00:11:50 would not just see a white page we would
  • 00:11:52 see any content we adhere in if we load
  • 00:11:56 our page so we essentially see
  • 00:11:58 everything that's hard-coded into our
  • 00:11:59 angular app the dynamic content is
  • 00:12:02 missing we'll take a look at this in a
  • 00:12:04 second but all the hard-coded content is
  • 00:12:06 there because what we can see in the
  • 00:12:08 network tab is that we're loading the
  • 00:12:11 main page the Styles not the font but
  • 00:12:14 the Styles the JavaScript files all that
  • 00:12:17 is loaded from the service worker and
  • 00:12:20 the failing things are the font and our
  • 00:12:24 posts let me turn Wi-Fi back on and also
  • 00:12:29 leave that simulation mode which didn't
  • 00:12:32 work too great I guess and now of course
  • 00:12:34 if I reload it again works and let's now
  • 00:12:37 change something
  • 00:12:39 first of all let's change something at
  • 00:12:41 the app component there I'll add a h1
  • 00:12:44 tag where I say my posts now let's quit
  • 00:12:48 set HTTP server go back into the main
  • 00:12:51 folder and let's run ng build dash dash
  • 00:12:54 prod again and let's see how this now
  • 00:12:56 changes the app and if I'm right
  • 00:12:58 regarding my statement that hurt coded
  • 00:13:01 content would be cached so let's wait
  • 00:13:04 for this to finish for that bill to
  • 00:13:07 finish and once it's finished let's go
  • 00:13:09 back into that dist folder and there
  • 00:13:12 into that angular PWA folder and let's
  • 00:13:15 run our server command again so HTTP
  • 00:13:18 server on that port let's reload the
  • 00:13:21 application here and you might need to
  • 00:13:24 reload twice and you should tend to see
  • 00:13:25 my posts the reason for that double
  • 00:13:28 reload is that the serviceworker was
  • 00:13:30 loaded and the serviceworker is aware of
  • 00:13:33 the fact that the index.html file a file
  • 00:13:36 changed or that the script rendering
  • 00:13:38 content to it changed to be precise
  • 00:13:40 because of that hashing thing I
  • 00:13:42 mentioned this hash table which is
  • 00:13:45 automatically generated and all the
  • 00:13:46 files having hashes because by default
  • 00:13:49 it would of course fetch these resources
  • 00:13:51 from the cache so we would see the old
  • 00:13:53 version we don't want that so we take
  • 00:13:55 the new version by or we let us give the
  • 00:13:58 new version by using that angular
  • 00:14:00 Service Worker package which takes care
  • 00:14:02 about that hashing and the fact that the
  • 00:14:04 service worker is aware of the new
  • 00:14:06 version for us so we get that now if I
  • 00:14:09 go offline again you see that is also
  • 00:14:13 part of the loaded page and if I go
  • 00:14:15 fully offline by treating off Wi-Fi we
  • 00:14:17 still see that so now the font and the
  • 00:14:20 API call the API data is missing I
  • 00:14:23 should say so that is what I now want to
  • 00:14:26 change and to change this and get that
  • 00:14:29 same page here when we're offline
  • 00:14:30 whereas I'm getting when I'm online we
  • 00:14:33 need to change the serviceworker config
  • 00:14:35 which can be done in the ng SW conflict
  • 00:14:37 or JSON file now in this file you can
  • 00:14:40 configure how the angular service worker
  • 00:14:42 behaves so let's take a closer look now
  • 00:14:44 this file is actually not that long it's
  • 00:14:47 adjacent file JSON format and first of
  • 00:14:50 all we have the index page this
  • 00:14:52 indicates what is the root page of our
  • 00:14:55 app we want to cache and load and that
  • 00:14:57 of course is the index.html file sitting
  • 00:14:59 directly in the root server folder were
  • 00:15:03 serving from and then we get a so-called
  • 00:15:06 asset group or actually asset groups
  • 00:15:08 it's an array and in there we got two s
  • 00:15:10 of groups these objects which we have in
  • 00:15:13 there now asset groups are
  • 00:15:14 configurations that define which static
  • 00:15:18 assets should be cached and how they
  • 00:15:20 should be cached
  • 00:15:20 dynamic assets for example would be the
  • 00:15:23 data from the API so data we're fetching
  • 00:15:26 which might change on that API so it's
  • 00:15:28 not static it changes frequently our
  • 00:15:31 HTML file our JavaScript code will also
  • 00:15:34 change with every build but after the
  • 00:15:36 build it's static it's not changing in
  • 00:15:39 some database or anything like that so
  • 00:15:41 that's what an acid group is we can give
  • 00:15:43 such a group a name whichever name you
  • 00:15:44 like and you can then define how it
  • 00:15:47 should these assets below that prefetch
  • 00:15:49 means that when your page loads angular
  • 00:15:52 will go ahead or the serviceworker will
  • 00:15:54 go ahead and already prefetch all the
  • 00:15:57 assets which are specified in this asset
  • 00:15:59 group which means it puts it into cache
  • 00:16:01 even if you haven't
  • 00:16:03 yet the alternative to prefetch is lazy
  • 00:16:06 you can use that too and dad would only
  • 00:16:08 load them once you needed them at least
  • 00:16:10 once the advantage of lazy is of course
  • 00:16:13 that you don't occupy all the bandwidth
  • 00:16:15 right at the beginning the downside is
  • 00:16:17 that if you need it for the first time
  • 00:16:19 it will not be there so if the user
  • 00:16:20 loses the internet connection before the
  • 00:16:23 asset let's say the CSS file is required
  • 00:16:26 the first time it will not work because
  • 00:16:28 it will not be cached with prefetch it
  • 00:16:30 will be cache even before you need it
  • 00:16:33 there also is a update mode I guess you
  • 00:16:36 can see it down there now this is
  • 00:16:38 important for the case that you're
  • 00:16:40 pushing a new version of your angular
  • 00:16:42 app and therefore also of your
  • 00:16:44 serviceworker to your server and the
  • 00:16:46 user is already browsing on that server
  • 00:16:48 and it will get informed about the new
  • 00:16:51 service worker and now the service
  • 00:16:53 worker can already prefetch the updated
  • 00:16:56 assets or also load them lazily when
  • 00:16:58 they are required now the assets which
  • 00:17:02 should be loaded are the resources then
  • 00:17:04 resources has one key property the files
  • 00:17:07 and there you have an array pointing to
  • 00:17:10 the files you want to cache you can
  • 00:17:12 point at something like the index.html
  • 00:17:14 file and this has always seen relative
  • 00:17:16 from the dist folder so from the folder
  • 00:17:19 you will have in the end once you deploy
  • 00:17:20 this but you can also set up patterns
  • 00:17:22 like every CSS file or every javascript
  • 00:17:26 file in the root folder or you could say
  • 00:17:28 every CSS file in any subfolder this is
  • 00:17:32 what this pattern would say so you can
  • 00:17:34 also set up glop patterns like this or
  • 00:17:36 directly point at the file you want to
  • 00:17:38 use without the hash because you can't
  • 00:17:40 know the hash in advance angular will
  • 00:17:43 generate that automatically will take
  • 00:17:45 the unhatched filenames here and then
  • 00:17:47 automatically generate a serviceworker
  • 00:17:49 which will take the hashes into account
  • 00:17:51 now here we get a second asset group for
  • 00:17:55 well basically all images we got and so
  • 00:17:57 on it differs from the first one in
  • 00:18:00 regarding the fact that it's only pre
  • 00:18:02 loading that if we need them if we
  • 00:18:04 wizard to them or use them at least once
  • 00:18:06 and this is leading to the behavior we
  • 00:18:09 have right now now we got one our static
  • 00:18:12 asset which is not included here and
  • 00:18:14 that is our external font
  • 00:18:16 it's not changing or at least not
  • 00:18:18 regularly so we can treat it as static
  • 00:18:21 but it's not included here because it's
  • 00:18:23 not one of our files but we can take it
  • 00:18:26 from the index.html file by just copying
  • 00:18:29 that entire link which will be requested
  • 00:18:31 eventually and then we can go back to
  • 00:18:33 the ng SW config file and there we tell
  • 00:18:36 angular that we also want to cache this
  • 00:18:38 now we don't add it to files because
  • 00:18:40 this is for local faults there is an
  • 00:18:42 additional resource type you can define
  • 00:18:45 and that is URLs it's also an array of
  • 00:18:48 strings but here we put URLs like this
  • 00:18:50 one which are reaching out to our
  • 00:18:52 servers to we then fetch resources from
  • 00:18:54 there with that edit let's save that
  • 00:18:57 file quit your server down there and
  • 00:19:00 let's go back into our root project
  • 00:19:04 folder and let's create an a verb illed
  • 00:19:05 with ng build prot like this and once
  • 00:19:09 this is done and we revisit the dist
  • 00:19:12 folder and surf that again we should see
  • 00:19:15 that the font is also loaded in an
  • 00:19:19 offline mode so we go into the dist
  • 00:19:21 folder into angular PW a rerun that HTTP
  • 00:19:25 server command and let's reload that
  • 00:19:27 page and with it reloaded and you might
  • 00:19:31 also close it and open a new tab to
  • 00:19:34 ensure that the new service worker gets
  • 00:19:36 really loaded and it's not still using
  • 00:19:38 an old one with that loaded you can take
  • 00:19:41 that offline box here again or since I
  • 00:19:44 always needed to do that simply turn
  • 00:19:46 Wi-Fi off go to the network tab to see
  • 00:19:48 all requests and reload the page and now
  • 00:19:51 you should see that the font here alt is
  • 00:19:53 not marked as red but is actually
  • 00:19:56 loading the font as it should so this is
  • 00:19:59 now also working it's now also fetching
  • 00:20:01 this and we're still our now again able
  • 00:20:04 to use it in offline mode that font now
  • 00:20:07 what about the API regarding the API we
  • 00:20:11 can all to prefetch this for that we add
  • 00:20:15 a new configuration item and that would
  • 00:20:17 be data groups remember we got asset
  • 00:20:20 groups here for the static files
  • 00:20:21 essentially data groups is for dynamic
  • 00:20:23 data so typically data you request from
  • 00:20:26 an API data that might change frequently
  • 00:20:29 how
  • 00:20:30 a data group configured it is an array
  • 00:20:33 because it's data groups here but one
  • 00:20:35 day the group is then again an object
  • 00:20:37 just as an asset group you then define a
  • 00:20:41 name of your choice like posts but that
  • 00:20:46 name is totally up to you and then your
  • 00:20:48 defined you are else you want to handle
  • 00:20:50 with this group and in my case that is
  • 00:20:52 the URL I can see in my app component
  • 00:20:56 which is where I make this HTTP request
  • 00:20:58 this URL to Jason placeholder this is
  • 00:21:01 what I'll take and this is what I'll put
  • 00:21:02 into the URLs array as a string you
  • 00:21:05 could now also add a version here if you
  • 00:21:08 got an API which might have different
  • 00:21:10 versions and diversion changed then you
  • 00:21:12 could lock the version in here too for
  • 00:21:15 example cache different data pieces
  • 00:21:19 side-by-side for different API versions
  • 00:21:21 here I will not use the version and
  • 00:21:23 instead what you can add here is a cache
  • 00:21:26 config this is another object where you
  • 00:21:29 can now in detail configure how this
  • 00:21:32 data should be cached and for that you
  • 00:21:34 can for example set a max size this is a
  • 00:21:37 number and this defines how many entries
  • 00:21:40 do you want to cache and now that's
  • 00:21:41 important this does not mean how many
  • 00:21:43 posts for example this means how many
  • 00:21:46 responses now for this single URL we
  • 00:21:50 will only cache one response at a time
  • 00:21:52 but if you had a more generic URL with a
  • 00:21:55 star let's say for different endpoints
  • 00:21:57 then you might want to make sure that
  • 00:21:59 only 410 outgoing requests the answer
  • 00:22:02 was cached to not pollute your cache and
  • 00:22:04 grow it infinitely because your space is
  • 00:22:07 actually limited and managed by the
  • 00:22:09 browser so you don't want to cache
  • 00:22:11 everything so here we could say cache
  • 00:22:14 five responses again for this example it
  • 00:22:16 doesn't matter we can then also add max
  • 00:22:19 age to define how old should the data in
  • 00:22:23 the cache be before we get rid of it and
  • 00:22:25 definitely fetch new data because you
  • 00:22:27 might want to fetch from cache first to
  • 00:22:31 deliver something onto the screen as
  • 00:22:32 quick as possible and then maybe reach
  • 00:22:35 out to more up-to-date data behind the
  • 00:22:37 scenes but for dad you of course need to
  • 00:22:39 know is the data in the cache still
  • 00:22:41 valid or should I always fetch new
  • 00:22:43 data this is defined as a string which
  • 00:22:46 you write like this you could say one
  • 00:22:49 day or 12 hours or 50 minutes this is
  • 00:22:52 essentially the format you have details
  • 00:22:54 can be found in the official Docs and
  • 00:22:56 you'll find a link to that attached to
  • 00:22:58 this video too so here I'll go with
  • 00:23:00 let's say six hours and then you can
  • 00:23:02 also add a timeout the timeout is
  • 00:23:05 defined in the same way and there you
  • 00:23:07 could say if I'm waiting for a response
  • 00:23:09 for let's say 10 seconds already
  • 00:23:13 then I want to fall back to the cache
  • 00:23:15 and not wait longer but I don't want to
  • 00:23:17 use the cash immediately I want to wait
  • 00:23:19 for these 10 seconds at least
  • 00:23:21 so you could say 10 seconds here last
  • 00:23:24 but not least and that's important
  • 00:23:26 because it works together with the above
  • 00:23:27 values the strategy there you can have
  • 00:23:30 two types of strategy freshness which
  • 00:23:33 means always try to reach out to the
  • 00:23:35 back and first and only use the cache if
  • 00:23:37 you're offline or performance
  • 00:23:41 performance tries to get something onto
  • 00:23:43 the screen as quick as possible and it
  • 00:23:45 will take max-age into account you know
  • 00:23:47 whether it should absolutely reach out
  • 00:23:48 to the back end or just use the cache
  • 00:23:50 value on the other hand freshness will
  • 00:23:53 take time out into account to know how
  • 00:23:55 long to wait for a response before it
  • 00:23:57 uses the cache so I will go with
  • 00:24:00 freshness here and I will save this and
  • 00:24:02 now you know the game let's go back and
  • 00:24:05 let's build this again with – – prod and
  • 00:24:09 what we should see is that now that we
  • 00:24:11 built this that if we then go back to
  • 00:24:14 the build project and serve it that this
  • 00:24:17 actually then works in offline mode so
  • 00:24:23 let's bring up that HTTP server reload
  • 00:24:25 this page and as I mentioned before feel
  • 00:24:28 free to close it because a new service
  • 00:24:30 worker to be registered should also be
  • 00:24:33 able to be loaded without you closing
  • 00:24:35 that tab and opening a new one angler
  • 00:24:38 can handle that but by default this is
  • 00:24:41 required by default for a new service
  • 00:24:43 worker to go active or to turn active
  • 00:24:45 and do its job you need to reload the
  • 00:24:48 page also because angular does not use
  • 00:24:52 the new updated code you might ship onto
  • 00:24:54 the server and load it into your already
  • 00:24:57 yep because that might break your
  • 00:24:59 already running app so close the tab
  • 00:25:01 open a new one now in a new tab reload
  • 00:25:04 at least once so that the API responses
  • 00:25:07 can be cached the first reload loads the
  • 00:25:10 serviceworker the second one loads the
  • 00:25:11 API responses then turn off the Wi-Fi
  • 00:25:14 and load again and what you should see
  • 00:25:17 is that you still got your post here now
  • 00:25:21 one thing you can notice is that the
  • 00:25:23 fonts are missing because and that's
  • 00:25:26 just something you have to know about
  • 00:25:28 google fonts the way it's loaded it
  • 00:25:30 takes cue URLs this is the URL where it
  • 00:25:33 goes to and tries to fetch the font then
  • 00:25:36 the other URL we put in there is the one
  • 00:25:39 which just holds the rules for the font
  • 00:25:42 and then that extra URL so let's add
  • 00:25:44 that newly gathered information here now
  • 00:25:48 replace this at the end here with star
  • 00:25:50 star to load any funds from the URL
  • 00:25:52 close the HTTP server and built this one
  • 00:25:55 more time as you'll saw it before with
  • 00:25:57 anji build – – prod and we could already
  • 00:26:00 see that the API data was loaded at
  • 00:26:02 least so that this was present now if
  • 00:26:04 this built one more time let's again go
  • 00:26:06 back to our distillate surf this one
  • 00:26:09 more time but then open a new tab for it
  • 00:26:14 to become active reload this one more
  • 00:26:16 time to store to make sure that the
  • 00:26:19 response is already stored I should say
  • 00:26:21 and now let's go offline again and
  • 00:26:24 reload this app and you see the fonts
  • 00:26:28 are there – and in the network tab we
  • 00:26:30 see everything is fetched the posts fail
  • 00:26:32 but that's the problem because we take
  • 00:26:34 that from the cache which works you can
  • 00:26:36 see it here in response there it is and
  • 00:26:38 this is how we can use the serviceworker
  • 00:26:40 the angular serviceworker package which
  • 00:26:43 you can easily add with the ng @ @
  • 00:26:46 angular pw a package which includes that
  • 00:26:49 serviceworker package which also gives
  • 00:26:51 you that many faster json file and which
  • 00:26:53 overall is something you have to learn
  • 00:26:55 but then gives you the powerful tool of
  • 00:26:58 making your web app offline available
  • 00:27:01 now check the official Docs which you
  • 00:27:03 find attached to the video of course and
  • 00:27:05 I hope that this was helpful