https://www.youtube.com/edit?o=U&video_id=DfUPhhKjD8k
39 Caching and Serving Assets .srt file
1
00:00:00,510 --> 00:00:02,680
So far,
we've seen how to hijack requests and
2
00:00:02,680 --> 00:00:04,350
respond to them differently.
3
00:00:04,350 --> 00:00:06,490
We've even created responses ourselves,
4
00:00:06,490 --> 00:00:08,700
meaning we can respond without
using the network at all.
5
00:00:09,730 --> 00:00:14,110
However, if we want to be able to
load Wittr without using the network,
6
00:00:14,110 --> 00:00:18,110
we need somewhere to store the HTML,
the CSS, the JavaScript, the images,
7
00:00:18,110 --> 00:00:19,640
the web font.
8
00:00:19,640 --> 00:00:23,330
Thankfully, there is such a place,
the cache API.
9
00:00:23,330 --> 00:00:26,670
The cache API gives us this
caches object on the global.
10
00:00:26,670 --> 00:00:27,780
If I want to create or
11
00:00:27,780 --> 00:00:31,840
open a cache, I call caches.open
with the name of the cache.
12
00:00:31,840 --> 00:00:34,580
That returns a promise for
a cache of that name.
13
00:00:34,580 --> 00:00:38,940
If i haven't opened a cache of that name
before, it creates one and returns it.
14
00:00:38,940 --> 00:00:43,496
A cache box contains request and
response pairs from any secure origin.
15
00:00:43,496 --> 00:00:46,440
We can use it to store fonts,
scripts, images, and anything,
16
00:00:46,440 --> 00:00:50,000
really, from both our own origin
as well as elsewhere on the web.
17
00:00:51,220 --> 00:00:56,210
I can add cache items using cache.put
and pass in a request or a URL and
18
00:00:56,210 --> 00:00:56,920
a response.
19
00:00:57,980 --> 00:00:59,840
Or I can use cache.addAll.
20
00:00:59,840 --> 00:01:01,300
This takes an array of requests or
21
00:01:01,300 --> 00:01:06,460
URLs, fetches them, and puts the
request-response pairs into the cache.
22
00:01:06,460 --> 00:01:07,890
This operation's atomic.
23
00:01:07,890 --> 00:01:10,695
If any of these fail to cache,
none of them are added.
24
00:01:10,695 --> 00:01:13,660
addAll uses fetch under the hood, so
25
00:01:13,660 --> 00:01:17,060
bear in mind that requests
will go via the browser cache.
26
00:01:17,060 --> 00:01:21,520
Later, when we want to get something out
of the cache, we can call cache.match,
27
00:01:21,520 --> 00:01:23,970
passing in a request or a URL.
28
00:01:23,970 --> 00:01:27,280
This will return a promise for
a matching response if one is found, or
29
00:01:27,280 --> 00:01:28,255
null otherwise.
30
00:01:28,255 --> 00:01:30,720
caches.match does the same, but
31
00:01:30,720 --> 00:01:34,640
it tries to find a match in any cache,
starting with the oldest.
32
00:01:34,640 --> 00:01:39,090
So we have somewhere to store our stuff,
but when should we store it?
33
00:01:39,090 --> 00:01:42,540
Thankfully, there's another service
worker event that helps here.
34
00:01:42,540 --> 00:01:44,620
When a browser runs a service worker for
the first time,
35
00:01:44,620 --> 00:01:47,950
an event is fired within it,
the install event.
36
00:01:47,950 --> 00:01:51,390
The browser won't let this new service
worker take control of pages until its
37
00:01:51,390 --> 00:01:55,500
install phase is completed, and
we're in control of what that involves.
38
00:01:55,500 --> 00:01:59,070
We use it as an opportunity to get
everything we need from the network and
39
00:01:59,070 --> 00:02:00,780
create a cache for them.
40
00:02:00,780 --> 00:02:03,271
So let's do that for Wittr.
41
00:02:03,271 --> 00:02:05,751
Over in the service worker file,
I'm going to add a listener for
42
00:02:05,751 --> 00:02:06,620
the install event.
43
00:02:06,620 --> 00:02:11,650
Event.waitUntil lets us signal
the progress of the install.
44
00:02:11,650 --> 00:02:13,430
We pass it a promise.
45
00:02:13,430 --> 00:02:17,490
If and when the promise resolves, the
browser knows the install is complete.
46
00:02:17,490 --> 00:02:20,590
If the promise rejects,
it knows the install failed, and
47
00:02:20,590 --> 00:02:22,300
this service worker should be discarded.
**
1
00:00:00,380 --> 00:00:02,400
Looks like we're getting
a call from Mike.
2
00:00:02,400 --> 00:00:04,090
I was wondering when he'd appear next.
3
00:00:04,090 --> 00:00:06,050
Mike, what can I do you for sir?
4
00:00:06,050 --> 00:00:08,700
>> Well, you've explain the cache and
the install event.
5
00:00:08,700 --> 00:00:11,120
Sounds like something for
the student to put together.
6
00:00:11,120 --> 00:00:12,010
>> Couldn't agree more.
7
00:00:12,010 --> 00:00:13,130
Take it away.
8
00:00:13,130 --> 00:00:13,910
>> To begin,
9
00:00:13,910 --> 00:00:17,360
you'll probably want to get your copy of
Witter into the same state as Jake's.
10
00:00:17,360 --> 00:00:20,280
To do that, open a command
prompt to the project folder and
11
00:00:20,280 --> 00:00:24,080
run git reset --hard to remove
any local changes you have.
12
00:00:24,080 --> 00:00:27,210
Then git checkout task-install.
13
00:00:27,210 --> 00:00:28,078
Let's take a look at the code.
14
00:00:28,078 --> 00:00:35,210
In public/js/sw/index.js there's
an array of URLs to cache there.
15
00:00:35,210 --> 00:00:40,610
Your task is to cache those URLs
in a cache named wittr-static-v1.
16
00:00:40,610 --> 00:00:43,760
Remember to have dev tools open and
use force update on reload, so
17
00:00:43,760 --> 00:00:46,430
you only need to refresh
once to see changes.
18
00:00:46,430 --> 00:00:49,430
You can also verify the state
of the cache in dev tools.
19
00:00:49,430 --> 00:00:52,430
Click on the resources
panel then cache storage.
20
00:00:52,430 --> 00:00:54,950
Hopefully you'll see
your cache in there.
21
00:00:54,950 --> 00:00:57,640
Once you've got it working,
head over to the settings page and
22
00:00:57,640 --> 00:01:00,870
type install cached into
the test field and press enter.
23
00:01:00,870 --> 00:01:02,330
This will confirm its all working.
40 Install and Cache Quiz .srt file
1
00:00:00,380 --> 00:00:02,400
Looks like we're getting
a call from Mike.
2
00:00:02,400 --> 00:00:04,090
I was wondering when he'd appear next.
3
00:00:04,090 --> 00:00:06,050
Mike, what can I do you for sir?
4
00:00:06,050 --> 00:00:08,700
>> Well, you've explain the cache and
the install event.
5
00:00:08,700 --> 00:00:11,120
Sounds like something for
the student to put together.
6
00:00:11,120 --> 00:00:12,010
>> Couldn't agree more.
7
00:00:12,010 --> 00:00:13,130
Take it away.
8
00:00:13,130 --> 00:00:13,910
>> To begin,
9
00:00:13,910 --> 00:00:17,360
you'll probably want to get your copy of
Witter into the same state as Jake's.
10
00:00:17,360 --> 00:00:20,280
To do that, open a command
prompt to the project folder and
11
00:00:20,280 --> 00:00:24,080
run git reset --hard to remove
any local changes you have.
12
00:00:24,080 --> 00:00:27,210
Then git checkout task-install.
13
00:00:27,210 --> 00:00:28,078
Let's take a look at the code.
14
00:00:28,078 --> 00:00:35,210
In public/js/sw/index.js there's
an array of URLs to cache there.
15
00:00:35,210 --> 00:00:40,610
Your task is to cache those URLs
in a cache named wittr-static-v1.
16
00:00:40,610 --> 00:00:43,760
Remember to have dev tools open and
use force update on reload, so
17
00:00:43,760 --> 00:00:46,430
you only need to refresh
once to see changes.
18
00:00:46,430 --> 00:00:49,430
You can also verify the state
of the cache in dev tools.
19
00:00:49,430 --> 00:00:52,430
Click on the resources
panel then cache storage.
20
00:00:52,430 --> 00:00:54,950
Hopefully you'll see
your cache in there.
21
00:00:54,950 --> 00:00:57,640
Once you've got it working,
head over to the settings page and
22
00:00:57,640 --> 00:01:00,870
type install cached into
the test field and press enter.
23
00:01:00,870 --> 00:01:02,330
This will confirm its all working.
**
3.17 Quiz : Install and Cache (Vid41)
https://classroom.udacity.com/courses/ud899-gwg/lessons/6381510081/concepts/63885494500923
https://www.youtube.com/edit?o=U&video_id=wbNAoLprbgI
41 Install and Cache Quiz Solution .srt file
1
00:00:00,450 --> 00:00:02,140
So how'd you get along with this one,
Jake?
2
00:00:02,140 --> 00:00:03,730
>> Everything cached and accounted for.
3
00:00:03,730 --> 00:00:04,315
Here's how I did it.
4
00:00:04,315 --> 00:00:09,630
Event.waitUntil takes a promise and
cache.open returns one.
5
00:00:09,630 --> 00:00:10,520
So I'm going to start with that.
6
00:00:11,610 --> 00:00:13,405
Then once I've got the cache,
7
00:00:13,405 --> 00:00:16,775
I'm going to call cache.addAll
to cache all the URLs.
8
00:00:18,655 --> 00:00:20,505
I could just reference the array here,
but
9
00:00:20,505 --> 00:00:22,105
I'm going to move
the items across instead.
10
00:00:23,475 --> 00:00:26,750
AddAll also returns a promise,
so I return it.
11
00:00:26,750 --> 00:00:30,550
So wait until it receives a promise for
both actions combined.
12
00:00:30,550 --> 00:00:34,130
Now if I refresh the page,
that new service worker will run and
13
00:00:34,130 --> 00:00:38,030
I can go to the resources panel in
DevTools and there in cache storage,
14
00:00:38,030 --> 00:00:41,390
is the new cache recreated and
the resources we added to it.
15
00:00:41,390 --> 00:00:45,480
Success, but it's no good having cached
items if we're not going to use them.
16
00:00:45,480 --> 00:00:47,390
So let's use them in responses.
17
00:00:47,390 --> 00:00:51,100
To do that, wait, Mike,
why are you still here?
18
00:00:51,100 --> 00:00:53,170
>> Come on,
you've already covered responses and
19
00:00:53,170 --> 00:00:55,150
getting responses out of caches.
20
00:00:55,150 --> 00:00:56,405
I think the student can take this on.
21
00:00:59,266 --> 00:01:01,660
>> Well fine, makes my life easier.
To get the project into the sample state use the commands
git reset --hardgit checkout task-install
Once completing the task enter the Test ID install-cached
No comments:
Post a Comment