00:00:00,430 --> 00:00:04,110
First up, of the following items, which
do you think can either slow down or
2
00:00:04,110 --> 00:00:07,210
prevent users receiving
data from your website?
3
00:00:07,210 --> 00:00:12,470
Poor signal, a misconfigured proxy,
fault in the mobile network,
4
00:00:12,470 --> 00:00:17,960
a busy network, server being DDOSed,
a bug in server code,
5
00:00:17,960 --> 00:00:21,480
Wifi captive portal, or
the moon's gravitational pull.
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.
Lesson 3.21 Quiz Update Your CSS :
https://classroom.udacity.com/courses/ud899-gwg/lessons/6381510081/concepts/63885494500923
YouTube svmath vid # 42. Install and Cache Quiz Solution: https://www.youtube.com/edit?o=U&video_id=nq7CL-Ge7Ys
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.
https://classroom.udacity.com/courses/ud899-gwg/lessons/6381510081/concepts/63885494530923
Vid43 Cache Response Quiz : https://www.youtube.com/edit?o=U&video_id=MAz_M2xm8_c
1
00:00:00,233 --> 00:00:03,074
We haven't shown you code for
responding with a cache entry, but
2
00:00:03,074 --> 00:00:05,929
you've seen caches.match for
getting things out of the cache.
3
00:00:05,929 --> 00:00:09,960
And you've seen event.respond with,
so time to put them together.
4
00:00:09,960 --> 00:00:12,800
If you've completed the last task,
your project is in the correct state for
5
00:00:12,800 --> 00:00:14,030
this task.
6
00:00:14,030 --> 00:00:16,990
If not, you can go to the project
directory in your command line and
7
00:00:16,990 --> 00:00:20,910
run git reset --hard to remove
any local changes you have,
8
00:00:20,910 --> 00:00:24,540
then git checkout task-cache-response.
9
00:00:24,540 --> 00:00:27,360
Once again, the work happens
in the service worker script
10
00:00:27,360 --> 00:00:31,910
in public/js/sw/index.js.
11
00:00:31,910 --> 00:00:35,460
First, you'll need to clear up any code
in the fetch handler you already have.
12
00:00:35,460 --> 00:00:39,200
We don't need any of the special four of
four handling from the previous tasks.
13
00:00:39,200 --> 00:00:41,950
Then, your task is to
respond to the request
14
00:00:41,950 --> 00:00:44,520
with an entry from
the cache if there is one.
15
00:00:44,520 --> 00:00:47,470
Otherwise, fetch it from the network,
here's a hint.
16
00:00:47,470 --> 00:00:50,900
You need to call event.respond with,
synchronously.
17
00:00:50,900 --> 00:00:54,030
You can't call it within a promise
handler, that's too late.
18
00:00:54,030 --> 00:00:56,510
Once you've coded it up,
reload the page.
19
00:00:56,510 --> 00:00:59,480
Remember to have DevTools open and
use force update on reload, so
20
00:00:59,480 --> 00:01:01,541
you only need to refresh
once to see changes.
21
00:01:01,541 --> 00:01:04,117
You'll know it's working
because you'll be able to put
22
00:01:04,117 --> 00:01:06,486
the site into Offline mode and
still get a response.
23
00:01:06,486 --> 00:01:09,616
Once you've got it working,
head over to the settings page and
24
00:01:09,616 --> 00:01:12,940
type cache- served into
the test field and press Enter.
25
00:01:12,940 --> 00:01:14,220
This will confirm it's all working.
https://classroom.udacity.com/courses/ud899-gwg/lessons/6381510081/concepts/63885494530923
Vid 44 Cache Response Quiz Solution : https://www.youtube.com/edit?o=U&video_id=0RzYUlgYNjM
1
00:00:00,390 --> 00:00:01,460
Jay did you get this working?
2
00:00:03,350 --> 00:00:06,160
>> No, but
I can do it right now to begin,
3
00:00:06,160 --> 00:00:08,350
I'm going to respond
with a match in the cash.
4
00:00:08,350 --> 00:00:09,890
For this request,
5
00:00:09,890 --> 00:00:12,590
I can just pass event dot request
straight into cash's dot match.
6
00:00:13,600 --> 00:00:17,440
Of course there may not be a match in
the cache for this particular request.
7
00:00:17,440 --> 00:00:20,190
In that case the promise
will resolve with undefined.
8
00:00:21,210 --> 00:00:26,180
So if the request is truthy, meaning I
got a match in the cache I'll return it.
9
00:00:27,310 --> 00:00:30,550
Otherwise I'll return a fetch to
the network for the original request.
10
00:00:30,550 --> 00:00:35,680
I can actually make this a little bit
neater by just writing as a response
11
00:00:35,680 --> 00:00:36,850
or fetch.
12
00:00:38,240 --> 00:00:40,870
With force update enabled
I can refresh the page.
13
00:00:40,870 --> 00:00:45,270
And while it doesn't really
look like much has changed.
14
00:00:45,270 --> 00:00:51,180
But if we go offline and refresh,
we get a whole lot of content still.
15
00:00:51,180 --> 00:00:54,550
We shouldn't underestimate what
we've done here, it's pretty huge.
16
00:00:54,550 --> 00:00:56,320
Here's what we've achieved.
17
00:00:56,320 --> 00:00:58,630
Things haven't really changed
with a perfect connection,
18
00:00:58,630 --> 00:01:01,290
but perfect doesn't exist.
19
00:01:01,290 --> 00:01:05,330
On a slow connection, we're getting
stuff on screen a whole lot faster.
20
00:01:05,330 --> 00:01:09,660
On WiFi, we're delivering stuff rather
than a blank screen which is great.
21
00:01:09,660 --> 00:01:13,030
And offline gets content,
rather than a complete failure.
22
00:01:13,030 --> 00:01:14,660
There are things we need to fix though.
23
00:01:14,660 --> 00:01:17,950
The photos and
avatars aren't working offline.
24
00:01:17,950 --> 00:01:20,030
But also if we disable force updates.
25
00:01:20,030 --> 00:01:21,320
And go online.
26
00:01:21,320 --> 00:01:24,020
We can see this post from Sam
with the picture of the car.
27
00:01:24,020 --> 00:01:25,830
And these newer posts above it.
28
00:01:25,830 --> 00:01:27,350
But if we now go offline.
29
00:01:27,350 --> 00:01:31,360
And refresh Sam's post is
showing us the latest.
30
00:01:31,360 --> 00:01:33,350
We're not updating
the posts in the cache.
31
00:01:33,350 --> 00:01:36,440
This is because we cached
the HTML once and install time.
32
00:01:36,440 --> 00:01:39,510
So we're stuck with that set
of messages in the cache.
33
00:01:39,510 --> 00:01:42,440
Here's a to do list that gets
us from where we are now to full
34
00:01:42,440 --> 00:01:44,010
offline first success.
35
00:01:44,010 --> 00:01:47,495
We need to come out of a system for
an intrusive app updates.
36
00:01:47,495 --> 00:01:51,525
We want to get the user using the latest
version as quickly as possible.
37
00:01:51,525 --> 00:01:54,045
We should continually update
the cache of posts so
38
00:01:54,045 --> 00:01:56,935
we're not left with the same content
we originally installed with.
39
00:01:56,935 --> 00:02:00,315
Then we need to cache the photos and
cache the avatars.
40
00:02:00,315 --> 00:02:02,365
The rest of the course
is about doing this.
41
00:02:02,365 --> 00:02:04,605
Starting with unobtrusive app updates.
https://classroom.udacity.com/courses/ud899-gwg/lessons/6381510081/concepts/63885494560923
Vid45 Updating the Static Cache : https://www.youtube.com/edit?o=U&video_id=tEnjohA77Zg
1
00:00:01,710 --> 00:00:03,660
You have done well to get this far.
2
00:00:03,660 --> 00:00:07,630
Your skills, they are strong,
you are ready.
3
00:00:07,630 --> 00:00:11,508
It is time, time to disable
Force update on page load.
4
00:00:11,508 --> 00:00:14,593
Now the service worker
lifecycle is back to normal,
5
00:00:14,593 --> 00:00:17,198
which is how real users
will experience it.
6
00:00:17,198 --> 00:00:20,660
You see, force update is
great during development.
7
00:00:20,660 --> 00:00:22,750
Say we wanted to change
the theme of the app.
8
00:00:22,750 --> 00:00:27,370
The theme colors are in
public/scss/theme.scss.
9
00:00:27,370 --> 00:00:30,311
These are a set of Sass variables
referenced throughout the rest of
10
00:00:30,311 --> 00:00:31,158
the style sheets.
11
00:00:31,158 --> 00:00:36,258
If I change the primary color to
red then go back to the browser
12
00:00:36,258 --> 00:00:41,458
with force update enabled and
refresh, boom, red toolbar.
13
00:00:41,458 --> 00:00:45,114
But this is because force update
reloads the service worker
14
00:00:45,114 --> 00:00:47,380
from the network on every refresh and
15
00:00:47,380 --> 00:00:51,418
causes it to install even if
the service worker hasn't changed.
16
00:00:51,418 --> 00:00:54,850
Let's say I change the whole theme by
uncommenting this other set of variables
17
00:00:54,850 --> 00:00:57,350
here, which should make the theme green.
18
00:00:57,350 --> 00:01:00,340
But this time,
I'll disable Force update on page load.
19
00:01:00,340 --> 00:01:03,610
Refresh the page, and still red.
20
00:01:03,610 --> 00:01:06,448
No matter how many times I refresh,
still red.
21
00:01:06,448 --> 00:01:11,170
If I Shift+refresh and bypass
the service worker, I see the changes.
22
00:01:11,170 --> 00:01:13,250
But normal refreshing gets me nowhere,
23
00:01:13,250 --> 00:01:16,080
because our cache still
contains the old CSS.
24
00:01:16,080 --> 00:01:18,860
Our cached CSS is updated as
part of the install step.
25
00:01:18,860 --> 00:01:20,080
But that isn't happening,
26
00:01:20,080 --> 00:01:22,680
because there's no new
service worker to install.
27
00:01:22,680 --> 00:01:26,400
We can see from dev tools,
there's no new service worker waiting.
28
00:01:26,400 --> 00:01:28,490
Without force update,
the browser checks for
29
00:01:28,490 --> 00:01:30,830
an update to the service
worker per page load.
30
00:01:30,830 --> 00:01:34,220
But I didn't change the service worker,
I only changed the CSS, so
31
00:01:34,220 --> 00:01:35,958
there's nothing new to install.
32
00:01:35,958 --> 00:01:38,910
We need to work with the service
worker to get it to pick up changes,
33
00:01:38,910 --> 00:01:40,950
because we're developers, right?
34
00:01:40,950 --> 00:01:42,498
We change code all the time.
35
00:01:42,498 --> 00:01:45,850
And we need users to get those
changes as soon as possible with
36
00:01:45,850 --> 00:01:47,108
minimum disruption.
37
00:01:47,108 --> 00:01:49,540
Here's how we work with
the service worker lifecycle.
38
00:01:50,750 --> 00:01:54,360
To get the CSS to update, we need to
make a change to the service worker.
39
00:01:54,360 --> 00:01:57,908
The browser will then treat this
updated worker as a new version.
40
00:01:57,908 --> 00:02:01,833
Because it's new, it'll get its own
install event where it'll fetch
41
00:02:01,833 --> 00:02:06,400
the JavaScript, HTML, and our updated
CSS and put them in a new cache.
42
00:02:06,400 --> 00:02:08,919
It won't put them in a different
cache automatically.
43
00:02:08,919 --> 00:02:11,358
We changed the name of our
cache to make this happen.
44
00:02:11,358 --> 00:02:15,082
We create a new cache because we don't
want to disrupt the cache that's already
45
00:02:15,082 --> 00:02:18,318
there being used by the old service
worker and the pages it controls.
46
00:02:18,318 --> 00:02:22,479
Then, once the old service worker is
released and we're ready to take over,
47
00:02:22,479 --> 00:02:26,704
we delete the old cache so the next page
load gets resources from the new cache,
48
00:02:26,704 --> 00:02:29,050
meaning it gets the latest CSS.
49
00:02:29,050 --> 00:02:30,422
Job done.
50
00:02:30,422 --> 00:02:33,171
We've already covered most of
the parts needed to make this happen.
51
00:02:33,171 --> 00:02:36,307
We know that a change to the service
worker will cause it to spin up a new
52
00:02:36,307 --> 00:02:36,858
instance.
53
00:02:36,858 --> 00:02:41,037
And that change can just be
renaming the cache from v1 to v2.
54
00:02:41,037 --> 00:02:45,278
The bit we haven't covered is how
to get rid of that old cache.
55
00:02:45,278 --> 00:02:48,008
The first piece of the puzzle
is the activate event.
56
00:02:48,008 --> 00:02:50,091
We've already seen the install event,
57
00:02:50,091 --> 00:02:54,011
which fires when the browser sets up
a new service worker for the first time,
58
00:02:54,011 --> 00:02:57,933
whereas the activate event fires when
this service worker becomes active,
59
00:02:57,933 --> 00:03:01,818
when it's ready to control pages and
the previous service worker is gone.
60
00:03:01,818 --> 00:03:05,130
This makes it the perfect time
to get rid of old caches.
61
00:03:05,130 --> 00:03:06,420
Like the install event,
62
00:03:06,420 --> 00:03:10,260
you can use event.waitUntil to
signal the length of the process.
63
00:03:10,260 --> 00:03:11,380
While you're activating,
64
00:03:11,380 --> 00:03:14,780
the browser will queue other service
worker events such as fetch.
65
00:03:14,780 --> 00:03:17,540
So by the time your service
worker receives its first fetch,
66
00:03:17,540 --> 00:03:20,450
you know you have the caches
how you want them.
67
00:03:20,450 --> 00:03:22,670
You can delete caches
using caches.delete,
68
00:03:22,670 --> 00:03:24,530
passing in the name of the cache.
69
00:03:24,530 --> 00:03:28,490
You can also get the names of all
your caches using caches.keys.
70
00:03:28,490 --> 00:03:30,320
Both of these methods return promises.
https://classroom.udacity.com/courses/ud899-gwg/lessons/6381510081/concepts/63885494570923
46 Update Your CSS Quiz : https://www.youtube.com/edit?o=U&video_id=zjOzdQMkpfo
1
00:00:00,350 --> 00:00:01,970
Well the internet
lights are blinking and
2
00:00:01,970 --> 00:00:04,870
that can only mean one thing,
we've got a Mike incoming.
3
00:00:04,870 --> 00:00:06,860
>> Hey, it's time for
a coding challenge.
4
00:00:06,860 --> 00:00:07,880
>> Couldn't agree more.
5
00:00:07,880 --> 00:00:09,080
Take it away, Mike.
6
00:00:09,080 --> 00:00:12,710
>> Your task is to update the CSS in
a way that doesn't disrupt the currently
7
00:00:12,710 --> 00:00:14,460
running version of the site.
8
00:00:14,460 --> 00:00:15,600
First, to get you started,
9
00:00:15,600 --> 00:00:19,280
you need to get your project
into the same state as Jake's.
10
00:00:19,280 --> 00:00:21,360
Go to the project directory
in the command line and
11
00:00:21,360 --> 00:00:24,780
run git reset --hard to remove
any local changes you have.
12
00:00:24,780 --> 00:00:27,800
Then git checkout task-handling-updates.
13
00:00:27,800 --> 00:00:31,800
This time make sure force
update on reload is disabled.
14
00:00:31,800 --> 00:00:34,560
We want to retain the full
service life cycle here.
15
00:00:34,560 --> 00:00:40,220
Over in the service worker
script in public/js/sw/index.js
16
00:00:40,220 --> 00:00:42,900
your task is to change
the theme of the site.
17
00:00:42,900 --> 00:00:45,883
Thankfully this is pretty easy as all
the colors are stored in variables.
18
00:00:45,883 --> 00:00:52,303
You can see those in
public/scss/_theme.scss.
19
00:00:52,303 --> 00:00:56,840
You can either uncomment the green and
pink theme or make one of your own up.
20
00:00:56,840 --> 00:00:59,880
The only requirement is that
the primary color changes so
21
00:00:59,880 --> 00:01:02,180
that the site's header changes color.
22
00:01:02,180 --> 00:01:05,340
Then in the service worker you
need to update the cache name and
23
00:01:05,340 --> 00:01:08,480
use the activate event
to remove the old cache.
24
00:01:08,480 --> 00:01:11,770
Once you've coded it up,
reload the page to see it working.
25
00:01:11,770 --> 00:01:13,230
In the service worker's dev tools,
26
00:01:13,230 --> 00:01:16,070
you should see a worker
in the waiting position.
27
00:01:16,070 --> 00:01:17,620
Don't let it activate yet.
28
00:01:17,620 --> 00:01:19,987
Instead, head over to
the settings page and
29
00:01:19,987 --> 00:01:24,360
type new-cache-ready into
the test field and press Enter.
30
00:01:24,360 --> 00:01:25,632
This will confirm it's all working.
1
00:00:00,350 --> 00:00:01,970
Well the internet
lights are blinking and
2
00:00:01,970 --> 00:00:04,870
that can only mean one thing,
we've got a Mike incoming.
3
00:00:04,870 --> 00:00:06,860
>> Hey, it's time for
a coding challenge.
4
00:00:06,860 --> 00:00:07,880
>> Couldn't agree more.
5
00:00:07,880 --> 00:00:09,080
Take it away, Mike.
6
00:00:09,080 --> 00:00:12,710
>> Your task is to update the CSS in
a way that doesn't disrupt the currently
7
00:00:12,710 --> 00:00:14,460
running version of the site.
8
00:00:14,460 --> 00:00:15,600
First, to get you started,
9
00:00:15,600 --> 00:00:19,280
you need to get your project
into the same state as Jake's.
10
00:00:19,280 --> 00:00:21,360
Go to the project directory
in the command line and
11
00:00:21,360 --> 00:00:24,780
run git reset --hard to remove
any local changes you have.
12
00:00:24,780 --> 00:00:27,800
Then git checkout task-handling-updates.
13
00:00:27,800 --> 00:00:31,800
This time make sure force
update on reload is disabled.
14
00:00:31,800 --> 00:00:34,560
We want to retain the full
service life cycle here.
15
00:00:34,560 --> 00:00:40,220
Over in the service worker
script in public/js/sw/index.js
16
00:00:40,220 --> 00:00:42,900
your task is to change
the theme of the site.
17
00:00:42,900 --> 00:00:45,883
Thankfully this is pretty easy as all
the colors are stored in variables.
18
00:00:45,883 --> 00:00:52,303
You can see those in
public/scss/_theme.scss.
19
00:00:52,303 --> 00:00:56,840
You can either uncomment the green and
pink theme or make one of your own up.
20
00:00:56,840 --> 00:00:59,880
The only requirement is that
the primary color changes so
21
00:00:59,880 --> 00:01:02,180
that the site's header changes color.
22
00:01:02,180 --> 00:01:05,340
Then in the service worker you
need to update the cache name and
23
00:01:05,340 --> 00:01:08,480
use the activate event
to remove the old cache.
24
00:01:08,480 --> 00:01:11,770
Once you've coded it up,
reload the page to see it working.
25
00:01:11,770 --> 00:01:13,230
In the service worker's dev tools,
26
00:01:13,230 --> 00:01:16,070
you should see a worker
in the waiting position.
27
00:01:16,070 --> 00:01:17,620
Don't let it activate yet.
28
00:01:17,620 --> 00:01:19,987
Instead, head over to
the settings page and
29
00:01:19,987 --> 00:01:24,360
type new-cache-ready into
the test field and press Enter.
30
00:01:24,360 --> 00:01:25,632
This will confirm it's all working.
1
00:00:00,450 --> 00:00:02,980
Now you're ready to activate
that service worker.
2
00:00:02,980 --> 00:00:05,470
As we saw earlier in the course
the service worker won't
3
00:00:05,470 --> 00:00:08,740
activate until pages using
the current version go away.
4
00:00:08,740 --> 00:00:10,310
So either close this tab,
5
00:00:10,310 --> 00:00:15,498
navigate it to a page out of the service
worker scope or shift refresh it.
6
00:00:15,498 --> 00:00:19,420
When you navigate back to the page
it should be showing the new theme.
7
00:00:19,420 --> 00:00:22,190
To confirm this,
head over to the settings page,
8
00:00:22,190 --> 00:00:26,140
type new-cached-used into
the test field and press enter.
9
00:00:26,140 --> 00:00:27,206
This will confirm it's all working.
48 Update Your CSS 2 Solution
https://www.youtube.com/watch?v=VeX_exIzAq81
00:00:00,460 --> 00:00:02,290
There are a few different
ways to complete this one,
2
00:00:02,290 --> 00:00:03,750
how did you do it Jay?
3
00:00:03,750 --> 00:00:05,150
>> Well as the easy way, and
4
00:00:05,150 --> 00:00:07,290
there's the scalable way,
we're going to look at both.
5
00:00:08,640 --> 00:00:09,350
>> Here's the easy way.
6
00:00:09,350 --> 00:00:12,180
I change the theme c.s.s
to the green theme.
7
00:00:13,290 --> 00:00:16,290
Then I bump the version number of
the static cache in the service worker.
8
00:00:17,730 --> 00:00:21,330
Then I use the activate event to remove
the v one cache, the old cache cache.
9
00:00:23,230 --> 00:00:24,940
Now I can refresh the page and
10
00:00:24,940 --> 00:00:28,610
in DevTools, I see this new
version install, and wait.
11
00:00:30,000 --> 00:00:32,780
If I look at caches in DevTools,
I can see v1 and v2,
12
00:00:32,780 --> 00:00:34,290
which is what we want right now.
13
00:00:35,840 --> 00:00:39,160
If i navigate away,
the new service worker activates.
14
00:00:39,160 --> 00:00:41,170
So if i click back
the theme has changed.
15
00:00:42,210 --> 00:00:44,230
As I said that's the easy solution.
16
00:00:44,230 --> 00:00:46,080
But it's perfectly good in this case.
17
00:00:46,080 --> 00:00:48,300
If it's what you did, you got it right.
18
00:00:48,300 --> 00:00:50,920
But what about when we
get to version twenty?
19
00:00:50,920 --> 00:00:54,000
We can't just remove version
19 in the activate event.
20
00:00:54,000 --> 00:00:57,300
Because the user might be updating from
an older version, maybe 18, maybe 17.
21
00:00:57,300 --> 00:01:01,830
Calling delete on every old cache
name is going to be a bit messy.
22
00:01:01,830 --> 00:01:04,720
And that code's only keep getting
bigger and bigger over time.
23
00:01:04,720 --> 00:01:07,996
Instead, I'm going to maintain a safe
list of cache names I want to keep and
24
00:01:07,996 --> 00:01:08,881
remove the others.
25
00:01:12,664 --> 00:01:15,980
To do that I'm going to store the name
of the static cache in a variable.
26
00:01:19,230 --> 00:01:23,040
Then in the activate event, I'm going to
get all of the cache names that exist.
27
00:01:23,040 --> 00:01:28,270
I'm going to fill up
that list of cache names.
28
00:01:28,270 --> 00:01:31,190
I'm only interested in the cache
name begins with wizard dash.
29
00:01:31,190 --> 00:01:32,970
But isn't the name of a static cache.
30
00:01:34,420 --> 00:01:37,900
That gives me a list of wizard
caches that I don't need anymore.
31
00:01:37,900 --> 00:01:40,969
So, I'm going to map those to promises
returned by caches dot delete.
32
00:01:44,840 --> 00:01:47,660
Then I'm going to wrap all
of that in promise dot all.
33
00:01:47,660 --> 00:01:50,210
So we wait on the completion
of all of those promises.
34
00:01:51,720 --> 00:01:54,520
Checking the cache starts with with
wizard dash means we don't delete caches
35
00:01:54,520 --> 00:01:57,330
from other apps that might be
running on the same origin, for
36
00:01:57,330 --> 00:01:59,130
example some other static v1.
37
00:01:59,130 --> 00:02:02,680
That isn't really necessary
here as we only have
38
00:02:02,680 --> 00:02:04,470
one service worker on the origin.
39
00:02:04,470 --> 00:02:07,510
But on sites like GitHub pages you
might have many service workers sharing
40
00:02:07,510 --> 00:02:09,090
the same origin.
41
00:02:09,090 --> 00:02:12,250
When updating the cache remember that
the requests are going via the standard
42
00:02:12,250 --> 00:02:13,580
browser cache.
43
00:02:13,580 --> 00:02:17,240
So if one of these resources
had a cache time of say a year,
44
00:02:17,240 --> 00:02:19,440
the update would just be
fetched from the HTTP cache.
45
00:02:19,440 --> 00:02:21,780
So you wouldn't get
any changes you made.
46
00:02:21,780 --> 00:02:25,020
In the development server, all the
resources are set to have a cache age
47
00:02:25,020 --> 00:02:27,820
of zero as in they don't cache.
48
00:02:27,820 --> 00:02:30,590
In production, I strongly recommend
having versioning as part of your
49
00:02:30,590 --> 00:02:32,880
resource names Like this.
50
00:02:32,880 --> 00:02:35,820
Where the version number is generated
from the content of the file.
51
00:02:35,820 --> 00:02:38,900
Then you can give these resources
a cache time of a year or more.
52
00:02:38,900 --> 00:02:41,790
So if you update your CSS,
a build script could automatically
53
00:02:41,790 --> 00:02:45,630
update your service worker,
changing the URL to this the CSS.
54
00:02:45,630 --> 00:02:48,830
Your cash version number could also be
all generated based on the things that
55
00:02:48,830 --> 00:02:50,130
caches.
56
00:02:50,130 --> 00:02:51,530
Versioning resources like this and
57
00:02:51,530 --> 00:02:55,050
giving them a long cache time isn't
advice specific to service workers.
58
00:02:55,050 --> 00:02:57,440
It's just general good caching practice.
59
00:02:57,440 --> 00:03:00,020
You can work around not to call
caching with service worker.
60
00:03:00,020 --> 00:03:02,020
You pack pretty much anything.
61
00:03:02,020 --> 00:03:05,760
But things are so much easier if
you work alongside good caching.
62
00:03:05,760 --> 00:03:10,400
For example, in this model if i
update my CSS the CSS URL changes,
63
00:03:10,400 --> 00:03:12,290
therefore cache name changes.
64
00:03:12,290 --> 00:03:15,780
Now when the browser fetches all these,
it can get everything but
65
00:03:15,780 --> 00:03:18,280
the CSS from the browser cache because.
66
00:03:18,280 --> 00:03:19,650
They haven't changed.
67
00:03:19,650 --> 00:03:22,805
The only thing that special
the network is the new CSS.
68
00:03:22,805 --> 00:03:25,780
Okay, I think we can say we've
successfully delivered unobtrusive
69
00:03:25,780 --> 00:03:26,880
updates.
70
00:03:26,880 --> 00:03:30,250
Next we'll look at making sure the user
gets these updates quickly and
71
00:03:30,250 --> 00:03:30,800
painlessly.
49 Adding UX to the Update Process
https://www.youtube.com/watch?v=j3W7wN1mln41
00:00:00,460 --> 00:00:03,090
So now we have a safe way to
update our static assets.
2
00:00:03,090 --> 00:00:04,820
But as we saw in the previous chapter,
3
00:00:04,820 --> 00:00:07,320
the changes would be
in the waiting worker.
4
00:00:07,320 --> 00:00:10,790
Ideally we want users to be on
the latest version as soon as possible.
5
00:00:10,790 --> 00:00:14,020
We want them to get the latest features,
the latest design, and
6
00:00:14,020 --> 00:00:15,430
of course bug fixes.
7
00:00:16,590 --> 00:00:20,900
But as we saw when a new worker is
discovered it waits until all pages
8
00:00:20,900 --> 00:00:24,570
using the current version go away,
before it can take over.
9
00:00:24,570 --> 00:00:27,690
And, that could be a long time.
10
00:00:27,690 --> 00:00:29,370
Let's do something better.
11
00:00:29,370 --> 00:00:32,860
Our goal here is to tell user once
an update has been found, and
12
00:00:32,860 --> 00:00:37,010
give them a button to ignore it or
refresh the page to get the new version.
13
00:00:37,010 --> 00:00:38,420
But how can we achieve this?
14
00:00:38,420 --> 00:00:41,720
Well, first off,
let's cover the update notification.
15
00:00:41,720 --> 00:00:44,648
Thankfully there are APIs that give
us insight into the service work
16
00:00:44,648 --> 00:00:46,050
of a lifecycle.
17
00:00:46,050 --> 00:00:49,130
When you register for
a service worker it returns a promise.
18
00:00:49,130 --> 00:00:52,560
That promise fulfills with a service
work a registration object.
19
00:00:52,560 --> 00:00:53,810
This object has properties and
20
00:00:53,810 --> 00:00:56,380
methods relating to the service
worker registration.
21
00:00:56,380 --> 00:00:59,439
We get methods to do things like
unregister the service worker or
22
00:00:59,439 --> 00:01:02,210
programatically trigger an update.
23
00:01:02,210 --> 00:01:06,180
We also get free properties installing,
waiting, and active.
24
00:01:07,380 --> 00:01:10,240
These will point to
a serviceWorker object or be null.
25
00:01:11,620 --> 00:01:14,320
They give you an insight into
the serviceWorker life cycle.
26
00:01:14,320 --> 00:01:18,760
They also map directly to the dev tools
view we've been working with so far.
27
00:01:18,760 --> 00:01:22,020
This dev tools view is actually just
looking at these registration objects.
28
00:01:22,020 --> 00:01:25,550
For example, if there's a serviceWorker
instance in .installing,
29
00:01:25,550 --> 00:01:27,620
that tells us there's
an update on its way,
30
00:01:27,620 --> 00:01:30,740
although it might be thrown
away if the install fails.
31
00:01:30,740 --> 00:01:33,545
If there's a serviceWorker in .waiting,
we know there's an updated
32
00:01:33,545 --> 00:01:36,380
serviceoWorker ready and
waiting to take over.
33
00:01:36,380 --> 00:01:39,630
The registration object will emit
an event when a new update is found.
34
00:01:39,630 --> 00:01:42,240
Called well, update found.
35
00:01:42,240 --> 00:01:45,020
When this file's not installing
has become a new worker.
36
00:01:46,060 --> 00:01:50,260
On the serviceWorker objects themselves,
you can look at their state.
37
00:01:50,260 --> 00:01:53,680
The state can be installing
the installer that has fired, but
38
00:01:53,680 --> 00:01:55,470
hasn't yet completed.
39
00:01:55,470 --> 00:01:59,320
Installed, installation completed
successfully but hasn't yet activated.
40
00:02:00,380 --> 00:02:01,290
Activating.
41
00:02:01,290 --> 00:02:05,140
The activate event has fired but
not yet complete, or activated.
42
00:02:05,140 --> 00:02:08,240
The serviceWorker is ready
to receive fetch events.
43
00:02:08,240 --> 00:02:09,500
And also, there's redundant.
44
00:02:09,500 --> 00:02:12,260
The serviceWorker has been thrown away.
45
00:02:12,260 --> 00:02:15,150
Redundant happens when the serviceWorker
has been superseded by a newer
46
00:02:15,150 --> 00:02:19,420
worker and it also happens if
the serviceWorker fails to install.
47
00:02:19,420 --> 00:02:20,950
The serviceWorker fires an event.
48
00:02:20,950 --> 00:02:21,890
State change.
49
00:02:21,890 --> 00:02:24,550
Whenever the value of
the state property changes.
50
00:02:24,550 --> 00:02:27,470
Also.
navigator.serviceWorker.controller
51
00:02:27,470 --> 00:02:30,680
refers to the serviceWorker
that controls this page.
52
00:02:30,680 --> 00:02:32,940
You want to tell user when
there's an update ready.
53
00:02:32,940 --> 00:02:35,550
But because the serviceWorker
update happens in the background,
54
00:02:35,550 --> 00:02:38,900
the update could be ready and
waiting, it could be in progress, or
55
00:02:38,900 --> 00:02:40,690
it might not have started yet.
56
00:02:40,690 --> 00:02:43,520
This means we need to look at the state
of things when the page loads.
57
00:02:43,520 --> 00:02:46,320
But we may also need to listen for
future changes.
58
00:02:46,320 --> 00:02:48,670
For instance, if there's no controller,
59
00:02:48,670 --> 00:02:51,460
that means this page didn't
load using a serviceWorker.
60
00:02:51,460 --> 00:02:54,080
So they loaded the content
from the network.
61
00:02:54,080 --> 00:02:56,700
Otherwise we need to
look at the registration.
62
00:02:56,700 --> 00:02:59,580
If there's a waiting worker there's
an update ready and waiting.
63
00:02:59,580 --> 00:03:01,420
We tell the user about it.
64
00:03:01,420 --> 00:03:04,900
Otherwise if there isn't installing
worker there's an update in progress.
65
00:03:04,900 --> 00:03:06,440
Of course the update may fail.
66
00:03:06,440 --> 00:03:08,650
So, we listen to the state
changes to track it and
67
00:03:08,650 --> 00:03:10,150
if it reaches the installed state.
68
00:03:10,150 --> 00:03:11,880
We tell the user.
69
00:03:11,880 --> 00:03:14,790
Otherwise, we listen for
the update found event.
70
00:03:14,790 --> 00:03:17,490
When that fires we track the state
of the installing worker and
71
00:03:17,490 --> 00:03:20,040
if it reaches the installed
state we tell the user.
72
00:03:21,050 --> 00:03:23,130
That's how we can tell
user about updates,
73
00:03:23,130 --> 00:03:26,750
whether they're already there,
in progress, or start some time later.
1
00:00:00,790 --> 00:00:02,450
And I've got an incoming call from Mike.
2
00:00:02,450 --> 00:00:04,950
I guess that means you'll
be coding this one up.
3
00:00:04,950 --> 00:00:06,800
Hey Mike, you think they're ready for
this one?
4
00:00:06,800 --> 00:00:08,530
>> Yep, they certainly are.
5
00:00:08,530 --> 00:00:10,320
Well, you know what you've got to do.
6
00:00:10,320 --> 00:00:12,660
Tell the user when there
is an update available.
7
00:00:12,660 --> 00:00:14,040
First to get you started,
8
00:00:14,040 --> 00:00:16,920
you need to get your project
into the same state as Jake's.
9
00:00:16,920 --> 00:00:18,870
Go to the project directory
in the command line and
10
00:00:18,870 --> 00:00:22,650
run git reset --hard to remove
any local changes you have.
11
00:00:22,650 --> 00:00:26,280
Then get checkout task update notify.
12
00:00:26,280 --> 00:00:28,247
We're going to edit
a different file this time.
13
00:00:28,247 --> 00:00:32,838
In public /JS/main/indexcontroller.JS.
14
00:00:32,838 --> 00:00:35,660
You might remember this file
from earlier in the course.
15
00:00:35,660 --> 00:00:37,710
It's where you registered
the service worker.
16
00:00:37,710 --> 00:00:40,580
There's a new method here, _updateReady.
17
00:00:40,580 --> 00:00:43,650
Calling this will show
a notification to the user.
18
00:00:43,650 --> 00:00:46,300
Your job is to call it
at the correct times.
19
00:00:46,300 --> 00:00:48,430
There's a series of comments
to guide you along the way.
20
00:00:48,430 --> 00:00:50,430
Once you've coded it up,
21
00:00:50,430 --> 00:00:53,170
you'll need to get those changes
picked up by the browser.
22
00:00:53,170 --> 00:00:54,920
This is a little awkward.
23
00:00:54,920 --> 00:00:59,280
The easiest way is to delete the service
worker then refresh the page.
24
00:00:59,280 --> 00:01:02,320
This will refresh and
cache your JavaScript.
25
00:01:02,320 --> 00:01:04,610
Now make a change to
your service worker.
26
00:01:04,610 --> 00:01:06,480
Adding a comment will suffice.
27
00:01:06,480 --> 00:01:08,270
Then refresh the page.
28
00:01:08,270 --> 00:01:11,350
If your code's working,
you'll see the notification.
29
00:01:11,350 --> 00:01:14,470
Once you've got the notification
working, head over to the settings page.
30
00:01:14,470 --> 00:01:18,200
And type update-notify into
the test field and press enter.
31
00:01:18,200 --> 00:01:19,326
This will confirm it's all working.
No comments:
Post a Comment