Brenton Strine

Brenton Strine

Offline Cache

Slide Duration:

Table of Contents

Section 1: HTML
Your First Web Page

17m 1s

Intro
0:00
World Wide Web
0:23
Introduction to HTML
0:25
Looking at Source Code
0:53
HTML5
1:58
HTML5 Specification
1:59
Creating a Web Page
4:10
What You Will Need to Create a Web Page
4:11
Example: Basic Web Page
4:40
Example: Creating a Web Page
5:46
HTML Elements
6:33
Adding a Title
7:08
Main Body
7:48
First Level Heading
8:23
Adding an Image
8:42
Paragraph
9:09
Adding a List and URLs
11:13
Footer
14:09
CSS: Styling
16:02
Web Basics and Web History

32m 23s

Intro
0:00
The Web
0:56
Overview of the Web
0:58
The Web Page
2:39
Overview of the Web Page
2:40
Web Technologies
4:45
Overview of Web Technologies
4:46
The Web Today
9:22
The Web Today
9:23
What is HTML
11:22
HyperText Markup Language
11:23
The Creation of the Internet
12:40
History of the Internet
12:41
Developments in HTML
14:10
The Birth of HTML
14:11
Early Problems
15:35
Early Browsers
16:24
History of Early Browsers
16:25
NCSA Mosaic
17:55
NCSA Mosaic
17:56
The Browser Wars Begin
19:39
History of the Browser Wars
19:40
Casualties of War
22:27
Results of the Browser Wars
22:28
HTML 4 Stabilization
25:31
History and Overview of HTML4
25:32
Modern Browser Developments
27:27
Modern Browsers
27:29
HTML5
30:57
Overview of HTML5
30:58
Web Development Tools

26m 28s

Intro
0:00
Browsers
0:17
Introduction to Browsers
0:18
Example: Browsers
2:35
Firefox Add-ons
3:14
Firefox Browser
3:15
Example: Firebug Add-ons
3:54
Example: Web Developer Toolbar and ColorZilla
7:51
Domain Names and Hosting
10:23
Overview of Domain Names and Hosting
10:24
Your Own Domain
11:03
Installing a Local Web Server
12:42
Installing a Local Web Server
12:43
Apache Web
13:29
WYSIWYG Editors
15:56
Introduction to WYSIWYG Editors
15:57
Content Management System
18:31
How Content Management System Works
18:32
Example: WordPress
20:00
File Transfer Protocol
22:26
File Transfer Protocol
22:27
HTML Elements and Attributes

21m 50s

Intro
0:00
Proper use of Elements and Attributes
0:14
Elements and Attributes
0:16
Example
1:06
Normal HTML Elements
2:00
Start Tag, Content, and End Tag
2:02
Example: Warning!
2:34
Void HTML Elements
3:23
Self-Closing Tags
3:24
List of Void Elements
4:04
Example: Line Break
5:00
HTML Comments
6:13
Purpose of Comment Tags
6:14
Example: Comment Tags
6:50
Attributes
7:25
Properties of Attributes
7:27
Example: Attributes
7:39
Example: Whitespace
10:22
HTML Character Codes
12:05
Character References
12:07
Example: Registered Trademark Symbol
12:35
Example: Using Character References
13:23
Example: Start Tag and End Tag
15:57
Example: Self-Closing Tag
16:37
Example: Attributes
17:37
Example: Proper use of Elements and Attributes
19:02
Example: Comment
20:09
Example: Whitespace
20:46
Essential Tags Part 1

41m 42s

Intro
0:00
Document Structure Tags
1:13
Document Structure Tags and Example
1:14
Layout Tags
3:24
Layout Tags
3:26
Example: Layout Tags
7:48
Example: Layout Tags
11:28
Example: Layout Tags
13:17
Example: Layout Tags
14:22
Text Level Tags
17:22
Text Level Tags
17:23
Example: Text Level Tags
17:48
Grouping Content Tags
24:23
Grouping Content Tags
24:24
<p> Tag
24:45
<hr> Tag
25:31
<figure>, <figcaption>, and <blockquote> Tag
26:14
<div> Tag
26:58
Example: Grouping Content Tags
27:28
Embedded Content Tags
33:12
Embedded Content Tags
33:13
Example: Embedded Content Tags
35:39
Essential Tags Part 2

24m 20s

Intro
0:00
Simple Tables
0:17
Simple Tables
0:19
Example: Simple Tables
2:31
Semantic Tables
5:11
Semantic Tables
5:14
Example: Semantic Tables
6:24
Simple Lists
8:14
Simple Lists
8:18
Unordered List
8:36
Ordered List
8:42
Example: Simple Lists
9:37
Definition Lists
14:08
Definition Lists
14:09
Example: Definition Lists
15:21
Forms
17:11
Forms
17:12
Example: Forms
17:52
Markup Language

29m 38s

Intro
0:00
HTML 1 Through 3.2
0:13
Period of Rapid Growth of HTML
0:14
Tag Soup
2:03
Definition of Tag Soup
2:04
Example: Tag Soup
3:00
Example: Tag Soup and Valid Doctype
4:45
HTML 4.01
5:26
Overview of HTML 4.01
5:27
Three Flavors of HTML 4.01: Strict, Transitional, and Frameset
6:05
XHTML 1
7:19
Overview of XHTML 1
7:20
Example: XHTML 1
9:20
XHTML1 Syntax
11:48
Lower Case Rule
11:49
Closed Elements Rule
12:25
Encased in Quotes Rule
14:18
Boolean Attributes May Not Be Minimized
14:35
Correct Nesting is Enforced
15:29
The Problem with XHTML
16:15
Problem with XHTML
16:16
XHTML 2
19:22
Overview of XHTML 2
19:23
HTML 5
20:43
Overview of HTML 5
20:44
Validating
22:44
Validators
22:45
Example: W3C Markup Validation Service
25:26
Page Structure and Meta-data Elements

32m 50s

Intro
0:00
The Doctype
0:12
Doctype
0:13
Example: Doctype
1:25
The Root Element
1:57
Root Element
1:58
Example: Root Element
2:45
The Head Element
3:38
Head Element and Body Element
3:39
Example: Head Element and Body Element
5:06
The Head Element
5:42
Head Element vs. Header Element
5:47
The Title Element
6:51
Title Element
6:52
Example: Title Element
7:54
The Base Element
9:00
Base Element
9:03
Example: Base Element
9:42
The Link Element
14:07
Link Element: rel, type, and href
14:08
Example: Link Element
15:13
The Meta Element
17:54
Meta Element: charset, name, and http-equiv
17:55
Example: Meta Element
21:00
The Style Element
23:35
Style Element
23:37
Example: Style Element
24:40
Text-Level Semantics

30m 13s

Intro
0:00
Text Level Semantics
0:06
Paragraph Level
0:07
The <a> Element
2:23
Definition of the <a> Element
2:25
The <em> Element
3:25
Definition of the <em> Element
3:26
The <strong> Element
6:50
The <strong> Element
6:51
The <small> Element
8:35
The <small> Element
8:36
Example of <small> Element
10:19
The <cite> Element
10:55
The <cite> Element
10:56
Example of <cite> Element
12:32
The <q> Element
12:45
The <q> Element
12:46
Example of <q> Element
13:34
The <abbr> Element
15:35
The <abbr> Element
15:36
Example of <abbr> Element
16:41
The <dfn> Element
17:03
The <dfn> Element
17:04
Example of <dfn> Element
18:01
The <time> Element
19:11
The <time> Element and Example
19:12
The <code> Element
21:18
The <code> Element
21:19
Example of <code> Element
23:00
The <sub> and <sup> Elements
23:31
The <sub> and <sup> Elements
23:32
Example of <sub> and <sup> Elements
23:50
The <i> Element
24:51
The <i> Element and Example
24:52
The <b> Element
27:16
The <b> Element
27:17
Example of <b> Element
29:07
Heading and Sectioning

23m 39s

Intro
0:00
Heading Elements
0:06
Heading Tags
0:07
Heading Rules
1:13
Heading Rules and Example
1:35
Sectioning Roots
5:39
Sectioning Roots
5:41
Sectioning Contents
6:25
Sectioning Content Elements
6:27
Section Wrapping
7:40
Section Wrapping
7:41
Example: Section Wrapping
10:10
Real World Example 1
15:36
Forms

47m 51s

Intro
0:00
Form Terminology
0:23
Form
0:24
Control
0:43
Control Name and Control Label
1:09
Input Type and State
1:52
Form Controls
2:20
Button: Submit and Reset
2:32
Radio
3:37
Checkbox
4:00
Select Menu
4:05
Textarea
4:28
Various Input Types
4:38
Example: Basic Controls of Form Element
7:05
Example: Buttons
18:20
Example: Additional Controls
20:56
Example: Special Input Types
27:55
Example: Date and Time Control
33:40
Example: Create Your Own Control
37:32
Example: Placeholder Text
39:10
Example: Datalist
41:43
Example: Sizing and Input Containment
42:16
Example: Select Modification
42:51
Example: Required Attribute
44:41
Links

36m 41s

Intro
0:00
URIs and URLs
0:23
Definitions of URL and URI
0:36
Differences Between URL and URI
0:42
Example: URI and URL
1:14
Typical URI Construction
2:33
Domain and Subdomain
2:34
Protocol
4:18
IP Address
5:05
Typical URI Construction
5:32
Second Level Domain
5:33
Port
6:07
Foldernames
6:46
Typical URI Construction
8:06
Filename and File Extension
8:08
Typical URI Construction
10:38
Name/ Value Pairs
10:40
Internal Anchors
11:45
Typical URI Construction
12:30
Example: URI Construction
12:31
Relative and Absolute URIs
14:20
Relative and Absolute URIs
14:22
Example: Relative and Absolute URIs
18:32
Link States
24:15
Link States
24:16
Example: Link States
25:18
Block Level Links
27:02
Example: Block Level Links
27:03
Bookmark Links
29:18
Bookmark Links
29:20
Example: Bookmark Links
30:15
Attributes
32:06
href and target
32:20
rel, media, hreflang, and type
33:18
Embedded Content

46m 5s

Intro
0:00
Embedding Image
0:22
Embedding an Image
0:25
Image File Formats
3:38
Image Format: Jpg
3:42
Image Format: Png
4:13
Image Format: Gif
4:40
Compression
6:05
Image Format: Precise Lines and Fewer Colors
8:38
Animated Gif
10:49
Alpha Transparency Png
11:09
Embedding Audio
12:52
Old Way of Embedding Audio
13:00
New Way of Embedding Audio
14:54
Example: Adding Buttons
20:04
Message for Users
26:36
Audio Attributes
27:46
Control
28:29
Autoplay
28:44
Loop
29:36
Preload
30:40
Embedding Video
32:00
Embedding Video
32:11
Controls
34:22
Poster Attributes
36:01
Video Formats
37:36
Solving Formatting Problem
39:26
The Canvas Element

19m 25s

Intro
0:00
Creating the Element
0:38
What is the Canvas Element?
0:39
HTML and Canvas Element
1:48
Example: Canvas Element
3:23
Creating the Canvas in JavaScript
5:13
getContext() Method
5:17
Checking Browser Support with the getContext() Method
6:00
Example: Creating the Canvas in JavaScript
7:31
Drawing in the Canvas
10:13
Methods for Drawing in the Canvas
10:14
2d Context
10:58
Example: Creating Drawing in the Canvas
11:39
Example: Adding an Image and Texts
15:30
Example: Advance Canvas Element
17:31
Content Models

29m 8s

Intro
0:00
The HTML 4.01 Content Model
0:16
Block Elements and Inline Elements
0:18
Example: Block Elements and Inline Elements
1:18
W3C Markup Validation Service
3:28
The HTML5 Content Model
6:21
Overview of HTML5 New Content Categories
6:22
Flow Content
8:02
Specification for Content Models
8:05
Flow Content
9:41
Example: Flow Content Elements
10:40
List of Flow Content
11:35
BlockQuote Element
11:50
Sectioning Content
13:19
Introduction to Sectioning Content
13:20
Heading Content
14:06
Heading Content and hgroup Element
14:07
Phrasing Content
16:56
Attributes of Phrasing Content
16:57
Anchor Element in Phrasing Content
17:28
Embedded Content
19:33
Attributes of Embedded Content
19:34
No Content
19:53
Transparent Content
20:38
Source Elements and Param Elements
21:15
Interactive Content
24:16
Interactive Content Elements
24:17
Button Element
25:57
The DOM

13m 10s

Intro
0:00
The DOM
0:26
Document Object Model
0:27
The DOM Tree
0:55
DOM Trees
0:56
Example: DOM Tree
1:31
Vocabulary: Tree, Node,Branch, Parent, Child
2:15
Exploring the DOM
3:13
Example: Built-in Browser Inspection and Firebug
3:15
Example: Manually Exploring the DOM
6:01
JavaScript
7:28
DOM Navigation Techniques
7:55
DOM Navigation Techniques
7:56
Favicons

13m 14s

Intro
0:00
Favorite Icons
0:08
Function of Favorite Icons
0:09
Bowser Support
1:10
Browser Support
1:13
Location in Browsers
1:46
Implementation Methods
2:04
Implementation Methods for Favorite Icons
2:05
Favicon and Apple Mobile Devices
4:51
Creating the Icon
6:13
How to Create the Icon
6:14
Favicon Resources
9:10
Websites for Icon Creation and Conversion
9:11
Programs for Icon Creation and Conversion
11:50
Embedding Flash and Other Objects

15m 7s

Intro
0:00
Flash and other Plug-ins
0:41
Main Problems with Flash
0:44
Benefits of Flash
2:02
Embedding Flash: the Old Way
2:57
The Old Way to Embed Flash
2:58
Embedding Flash: the Satay Method
6:42
Satay Method
6:43
Embedding Flash: HTML5
9:28
How to Embed Flash in HTML5
9:29
Embedding Flash Directly in <video>
11:39
Embedding Flash Directly in Video Element
11:40
Review of Embedding
13:24
Image Elements
13:39
Video, Audio, and Canvas Elements
13:44
Embed Elements
13:53
Object Elements
14:04
Offline Cache

19m 53s

Intro
0:00
Purpose
0:47
Purpose of Offline Cache
0:48
The Appache
2:06
Attributes of Appcache
2:07
The Manifest File
3:22
Manifest File
3:23
Example of Manifest
3:32
Section Headers: Cache, Fallback, and Network
4:21
Server-Side Considerations
5:17
text/cache-manifest MIME-type
5:18
Other Server-Side Considerations
5:41
ExpiresActive On and ExpiresDefault 'access'
6:07
Example: Offline Cache 1
7:44
Example: Overwriting Files
11:09
Example: Wild Cards for Network
14:58
Example: Offline Cache 2
16:06
Web Development Principles

26m 47s

Intro
0:00
Interoperability
0:36
Interoperability of Web Development
0:37
Interoperable Websites Should Work
3:05
Qualities of Interoperable Websites
3:06
Backward Compatibility
5:52
Compatibility With Older Technology
5:53
Example: Meta Tag
9:07
Forward Compatibility
9:33
Advancement in Technology
9:34
Accessibility
10:11
Accessibility of Content
10:12
Semantic Code
11:43
Example: Where Will This Link Take You?
13:56
Graceful Degradation
14:59
Graceful Degradation or Fault Tolerance
15:00
Types of Degradation
16:35
Progressive Enhancement
18:36
Progressive Enhancement
18:37
Future Detection and Browser Sniffing
21:05
Future Detection Versus Browser Sniffing
21:06
Example: Email Input Type
23:39
Tim Berners-Lee's Quote
26:20
Loading...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of HTML
Bookmark & Share Embed

Share this knowledge with your friends!

Copy & Paste this embed code into your website’s HTML

Please ensure that your website editor is in text mode when you paste the code.
(In Wordpress, the mode button is on the top right corner.)
  ×
  • - Allow users to view the embedded video in full-size.
Since this lesson is not free, only the preview will appear on your website.
  • Discussion

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Services

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for Educator.com

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Offline Cache

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Purpose 0:47
    • Purpose of Offline Cache
  • The Appache 2:06
    • Attributes of Appcache
  • The Manifest File 3:22
    • Manifest File
    • Example of Manifest
    • Section Headers: Cache, Fallback, and Network
  • Server-Side Considerations 5:17
    • text/cache-manifest MIME-type
    • Other Server-Side Considerations
    • ExpiresActive On and ExpiresDefault 'access'
  • Example: Offline Cache 1 7:44
  • Example: Overwriting Files 11:09
  • Example: Wild Cards for Network 14:58
  • Example: Offline Cache 2 16:06

Transcription: 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

Educator®

Please sign in to participate in this lecture discussion.

Resetting Your Password?
OR

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Membership Overview

  • Available 24/7. Unlimited Access to Our Entire Library.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lecture slides for taking notes.
  • Track your course viewing progress.
  • Accessible anytime, anywhere with our Android and iOS apps.