- 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