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

You may also like