HTML Offline Cache

Welcome to Educator.com.0000

This lesson is going to look at offline application cache, or just offline cache for short.0002

And it is a way for you to control what elements are available to your website while it is offline, and store it in the browser cache; and it is new to HTML5.0007

I am just going to give an introduction to it--not a lot to go really in-depth.0018

But it is a fairly simple concept to understand; but dealing with all of the intricacies of server caching0023

and HTTP caching and browser caching, on top of the HTML5 offline application caching0030

(which is what this lesson is about) is going to be a little bit of complicated footwork.0036

It is like the game of Go: it takes a minute to learn and a lifetime to master.0042

The purpose of offline cache in HTML5 is just for applications, really--not for websites.0049

So, if you have a website that you are hoping to optimize the speed of, or decrease server load, or something like that,0059

you don't want to be using offline cache, because HTTP already does a great job of managing the memory and caching,0065

and uploading and downloading, and how long things take to expire, and all of that.0074

And if you are customizing on your own with this, you are likely going to break something, and you are going to make it less efficient.0077

But what this is for is when you have an application (say, for example, Gmail--that is a great example)0085

that you want to continue to work, even when there is not network access.0091

If you go to Gmail and disconnect your Internet, you will find that you can still click on emails, if you have recently viewed them.0095

And you can do a lot; the whole page doesn't just break.0102

And you can still see lists of things, and do a limited extent of things.0106

And then, when you reconnect service, you will be able to download your emails from network.0112

That is the sort of thing that this is for.0117

Gmail is more of an application that just a plain old website.0119

So, this is to manage that.0123

What really all this centers around is the app cache.0129

The app cache is a folder, or just a place in memory on your local computer,0134

that gets created when your browser detects that you are using a manifest file (we will talk about manifest files in a second).0141

This app cache is this just stored space on the hard drive; think of it as a folder on the hard drive0149

that it creates, and it puts all of the offline data that you tell it to put in there into that folder.0156

And then, it will be available when you are offline.0163

It will put anything that you tell it to put in there; and then, it will also put any page that references this manifest file.0167

So, any web page that talks about that same manifest file will be stored into that same app cache.0175

Now, there could be multiple app caches being created for multiple manifest files.0184

But the ones that use the same manifest file will be stored in the same app cache.0189

Think, "One manifest file corresponds to one app cache."0192

The same manifest file corresponds to the same app cache.0197

OK, the manifest file is a very simple text file on the server; it will have the .manifest extension.0203

And in your HTML page, you reference it with a little link; I will show you what that looks like--it looks like this.0211

Here is my HTML page, and I just have this little manifest= , and then you put the URL of your manifest.0224

In this example, the file name is example3, and the extension is .manifest.0231

Every file that you list in the manifest file--well, that you list to be cached--will be stored into the app cache that was created for this manifest file.0239

And then, files that are listed in particular sections of the manifest file (these three sections) will follow the rules.0253

Here are the three sections in your manifest file: the first one is cache, which is just the same as if you didn't even use a section.0262

If you didn't use a section, then it would just cache any file that you may list.0269

Or you can explicitly state that you want it to be in the cache section.0273

So, any files that you list in here will be cached; anything that you list in here--it follows a syntax of a file name,0277

or a location (relative to the manifest file, by the way), and then a space, and then another file name.0289

This is a fallback section; so it will first look for this on the network;0295

and if it can't find it, after the space it will use this, which should be cached.0300

And then, lastly, network: any file that you put here, it will always try and grab from the network.0305

And if you are not online, then it just won't be an available resource.0311

Before I go to look at the details in the examples, I just want to mention a few server-side considerations.0320

The manifest file that we are talking about has to be served with this MIME type.0329

If you don't serve it that way, then it is just going to cause a lot of headache, because it is not going to be working as a manifest file.0334

Secondly, if you are using Apache (a lot of web servers are using Apache;0343

you can set up your own on your own computer), then you can access the htaccess file.0347

Then, what you do is add this line right here, and it will automatically send it with this MIME type.0353

What it does is adds this MIME type to this file extension; it will happen automatically--you don't have to worry about it.0361

The other thing you want to do in your htaccess file is add these two lines.0367

What these will do is: it will turn off HTTP caching, and it will make it so that,0374

while you are developing, you are just dealing with the caching that you are creating.0381

You want to eliminate as many of these other variables as possible.0387

This is actually, if you put this in your root htaccess file, going to affect every single page in your entire website,0389

which is going to slow everything down; it is going to increase the bandwidth that is being pulled out of your server.0397

And so, you just want to put this in an htaccess file that is in the folder that you are working on.0403

And then, when you are done working on it, you want to delete these lines.0408

And also, actually, you will want to add these lines, as well, right here.0411

What this does is looks for these extensions: you will want to set any ones that you are working with.0417

I am working with HTML, the .manifest, and the PNG.0423

And then, you don't need to understand exactly what this does; just copy and paste it.0427

But max-age=10: that is not 10 seconds--I think this is a tenth of a second, actually; so add this line to the htaccess file, as well.0431

This is actually my htaccess file, right here; and you can see that I have added the type, so the manifest will automatically be sent with this MIME type.0447

And then, I have added this and this, as well, to try and delete all of the variables.0459

This is my HTML file, and it is just a simple HTML file with four PNG images.0466

And I have labeled them according to how my manifest file is going to set them up.0478

Again, the only thing that is special about this, to make it load the app cache, is this manifest attribute in the HTML element.0485

manifest= the manifest file here.0494

Now, what this does is: the browser is going to read this and creates an app cache when it sees this.0499

And it goes to the manifest file and reads it.0503

This is the manifest file; it is very, very simple--it is just text.0505

It always has to start with this cache manifest up in the top.0508

And this hash just means that this is a comment line; so anything here, the browser will ignore.0513

I have put a version number here; I will talk about why in a minute.0520

And then, I have my three sections: cache, network, and fallback, which I explained.0524

But I will show you some examples of how they really work, and then hopefully it will make more sense.0529

So, I am going to save this right now.0534

And you are going to be working with FTP, probably, when you are doing these connections.0536

Oops, cancel.0546

I am going to connect really quickly; OK, now I am connected to the server.0547

And then, go up to my folder that I have prepared.0552

And you can see, now that I have already uploaded these files onto the server, and they are the same:0562

this is the server over here, and this is my local hard drive.0569

And then, you can see: I just have the example HTML file, the manifest file.0573

My htaccess file is up here; and then, here are the four images; and it is the same thing over here--these are identical right now.0579

When we pull up the browser here, you can see what I have.0586

Now, this is online--this is live; and I have the four images.0592

Now, you will see, this last one is broken; and that is as it should be, because it is actually not specified in the cache manifest.0599

You see, I have 1, 2, and 3, and then a fallback for 3 to go to 1; fourth is not mentioned--that is why I put no comment here.0608

And so, what happens is: the first time you load the page, it will show up, because it hasn't read through the cache manifest yet.0617

But then, if you were to refresh, then it is going to go based off of the cache.0625

So, the first one that follows the rule will be cached and displayed.0629

The second one will be grabbed off the network; since you are online, it will show up fine.0634

The third one here refers to trying and getting image3.png.0638

And you are online, and the resource is available, so it works fine.0643

The fourth one is not specified in the cache manifest, so it doesn't load it at all.0647

This is another reason why you don't want to be using offline cache just for a cache of a website,0652

because if you ever forget to put a file in the cache manifest, then it is going to break,0659

even when you are online and it has access to it.0665

To demonstrate how this works, I have prepared this folder here called overwrite.0670

And if we go into it, I have four images that are almost the same as the other four.0676

They are the same file names and the same size; but they are green.0684

I am going to overwrite these white files on the server.0687

The files on the server just have these numbers that are white.0692

And then, I have just uploaded these new files onto the server, and replaced the old files; so these are actually green files now.0695

Now, when I refresh on the browser, what happens is: the first one, which was cached,0704

doesn't get an update from the server, because it just uses the cached one.0715

The second one is networked, so it grabs a new one from the server.0718

The third one is in the fallback section, so it is going to grab it from the server, if it can.0721

And since we are online, it was able to grab it from the server.0729

So, you can see that 2 and 3 got updated; 1 it retrieved from the cache; and then, this one is still not showing up.0732

Now, if we are going to work in a context where the Internet is off0744

(here is my Mac way to turn off the Internet; I just turned off the Internet),0749

now, when I reload here, the networked image, #2, just disappears,0756

because we are no longer on the Internet, and it can't access the resource.0765

Now, interestingly, fallback can't grab image #3 anymore from the Internet, so it defaults (falls back) to image1.0769

And that is why you see that.0779

And again, the one that wasn't mentioned just doesn't show up at all.0781

Let's turn the port back on and reload; and everything is back to normal.0785

Here are some interesting things we can do.0797

Say, instead of only image3 falling back, you want everything--every single file0800

on your whole page that doesn't work-- to default, if it can't find it, to image1.0807

That is kind of a silly thing to do; but for this example, it will work.0813

And let's delete this network one, as well.0819

What we have now: this slash just indicates any file--it is like the beginning of a directory, right?--0822

so, any file that is in the directory and every file that is in the directory.0828

So, I am saving it, and I am going to go to my FTP program and go back up.0831

And I am going to upload the manifest file; that is this file here that I just edited--re-upload it.0836

You can see: Directory listing successful.0844

And then, when we come here and refresh, it tries to grab all of them from the network first.0848

And all of them are available on the network, since we are online.0857

And remember, I uploaded all of the green images, so now it is grabbing all of them.0861

And it is grabbing the green version of all of them.0867

And if I refresh this again, you will see: #4 sometimes breaks and sometimes doesn't.0869

Now, if we disconnect the Internet again, they all get replaced with image1, because of the fallback rule created right here--very cool.0880

So, you can control a lot of interesting things with that.0895

Another thing that you might want to do is do the wildcard for network.0900

And what this does is: any file that it can find at all is going to be trying to grab from the network.0910

I am going to turn the Internet back on, and remember, I just edited this manifest file.0918

So, I am going to save it and make sure I re-upload it (directory listing successful; OK).0926

Now, it grabs all four from the Internet, because of this network here.0935

So, just to show you that I am not tricking you, I am going to upload those white images again and replace these green ones with the white ones.0940

And because the network wild card is set here, every single file will be downloaded from the Internet every time,0951

except for image1, which is in the cache, though.0960

So, now let's do one last little experiment.0967

Let's put all three of these in the cache, and we will just leave image4 as a control.0976

And so now, we want to update the manifest file and re-upload it to the server and refresh.0984

So now, it has these three that are being cached (the white images,0998

because that is what is on the server right now), because I have told all three to be cached.1003

Now, here is the tricky part: say I don't update the manifest file: and this is where this comes into play--this version that I put here.1009

Now, I am going to go back to these green images--right now, there are white images on the server.1017

I am going to put these green images back on and overwrite the files.1021

And then, I am going to refresh here.1025

OK, I just clicked it, and nothing changed.1028

The reason is because I didn't update the manifest file; and this is how it works.1031

When the browser comes to a page again (because you have reloaded it) it goes to the manifest file1039

and asks HTTP if there is a new version of the manifest file.1044

And because the manifest file is exactly the same--there are no changes to it,1050

HTTP says, "No, it is the same old manifest file, so there is no need for me to send it to you."1054

So, it is a very efficient thing.1060

But then, what the browser does is says, "OK, same manifest file--that means that all of the caching information is the same."1062

"So, I am just going to work off of the old app cache that I have."1070

So, it has these white images in the app cache from before, even though I have uploaded green images onto the server.1074

HTTP has the new images; and if the browser had asked for the images,1083

HTTP would have said, "Yes, there are new version of these images; I will send them to you."1088

But the browser didn't even ask for these images; it just asked for the manifest file.1093

And the manifest file was the same, so it assumes that all of the app cache files are the same, as well.1098

So, what we need to do, to get it to update (and this is only in a case where you haven't made any changes to the manifest file,1105

but you have made changes to some of the files that you want to be updated and have cached)1113

is: we just have to change any character--change anything in it.1117

And so, I am going to change this little version number.1120

This isn't anything officially in the specification; this is ignored, because it is a comment.1122

But what happened is: because I changed this one character now, the manifest file has been changed.1127

And we will upload it; directory listing successful; so now, when we refresh, it grabs the new images, because it knows that this is a different file.1136

HTTP says yes, it is a new manifest file; and it gives it to the browser.1154

The browser reads it and re-parses it, because it is new; it might have some changes.1159

And even though there aren't any changes that matter, it still re-downloads all of these images.1165

So, that is also a consideration--that you don't want the manifest file to be being changed,1173

unless you want all this to be re-downloaded and the app cache to be changed.1179

And that is pretty much the basics of offline application caching.1184

Thanks for watching Educator.com.1192