Http cache and offline cache, http cache offline Cache

Http cache and offline cache, http cache offline Cache
I. Implement cache through http Protocol 1. cache Headers

General cache, conditional cache, and Cache Control

Header name	Description	Request/Response
General cache Header	Determines whether the client sends a request to the server or the server responds to the request.
Cache-control	Used for cache prompts transmitted with messages
Pragma	Http1.0 is equal to cache-control: no-cache. pragma has a higher priority than expires.
Condition Header
Last-Modified	When the server responds, the Last modification time of the text is put in this header for transmission, for example, Last-Modified: GMT.	Response
If-Modified-Since	The time when the client sends the received last-Modified, which is verified by the server. If the resource is not Modified, the value is 304.	Request
If-Unmodified-Since	If last-Modified does not match, 412 is returned (pre-verification failed)
ETag	When the server responds, the md5 value of the text is followed by this hair and sent to the client.	Response
If-None-Match	Tell the server to resend if the ETag-related resources are not matched. Otherwise, 304
If-Match	If the server does not match the ETag-related resources, the response is 412.

Other cache headers: Vary | specifies fields in the Vary when requesting from the server to determine whether the content has cached data/age | the final response time of the output resource when the server responds (Resources read from the local cache) will not change, that is, the cache-control), and the 304 response to the attack changes.

2. Vary

Vary: User-Agent, Accept-Encoding

Tell the server to distinguish the cached version based on the values of the User-Agent and Accept-Encoding headers.

3. Description of cache-control values

Cache-control and expires are consistent, but expires are http1.0 and are rarely used in modern browsers.

Request Header

• Max-age
• Max-age = 0: indicates that the forced cache is skipped for negotiation.
• Max-age = 10 (> 0): the client does not request new data from the server within the specified time.

• No-cache: indicates that the (proxy) server does not directly use the cache. A request must be sent to the server, and the request will always be executed.
• No-store: all internal files will not be cached or placed under the temporary folder of the browser

• Max-stale: indicates that the server client is willing to receive a resource that exceeds the cache time. If the value (in seconds) is set, max-stale: 3, the value exceeds 3 seconds. If not, it is any time.
• Min-fresh = seconds: the client wants to accept a resource that has been updated in seconds earlier than seconds, at least keeping the document fresh in the future seconds. Chrome is still based on max-age. If the value of firefox is smaller than max-age, the value of min-fresh prevails. If the value of firefox is greater than max-age, it is invalid.

• No-transform: Transfers entity data that has not been converted (such as compression). I do not know how to verify it.
• Only-if-cached: the client obtains the cache (if any) and does not need to request the server. if no cache exists, the original request is sent.
• Cache-extension: Custom extension value. This parameter is ignored if the server does not support this parameter.

• Response Header
  • Max-age
    Specify the number of seconds after the response expires (relative time)
  • No-cache: the cache cannot be used directly. A request must be sent to the server (to check the freshness). The no-cache overwrites the max-age setting.
  • No-store: all internal files will not be cached or placed under the temporary folder of the browser. The request will always be set to no-store overwrite max-age.
  • Public: Allows caching anywhere. Proxy and cdn are supported.
  • Private [= fieldName]: The client can cache private response queries, but usually only for users. Therefore, cdn and proxy are not cached (application scenarios cannot be tested)
  • No-transform: Transfers entity data that has not been converted (such as compression). I do not know how to verify it.
  • Only-if-cached: the client obtains the cache (if any) and does not need to request the server. if no cache exists, the original request is sent.
  • Must-revalidate: the current resource must send a verification request to the original server. If the request fails, 504 is returned (instead of the proxy server's cache), that is, the response must come from the original server.
  • Proxy-revalidate: similar to must-revalidate, but can only be used for shared cache (proxy server)
  • S-maxage: Consistent with max-age, but can only be used for shared cache (for example, proxy)
  • Cache-extension: Custom extension value. This parameter is ignored if the server does not support this parameter.
• Summary
• • The chrome browser does not support the max-age> 0, no-store, and max-stale request headers well. The full-button response max-age controls the cache, firefox is implemented according to http specifications.
  • If-Unmodified-Since: the error 412 is not returned.
  • • Last-Modified value matched successfully
    • The server must respond to status codes other than 2XX or 412.
    • The time format sent by the request is incorrect.

Ii. Offline Browser Cache

Steps for implementing offline cache:

 

 
  
Description of main. appcache values

 
Cache manifest # files to be cached after the first download # network of files to be cached prohibited: # Roll back files (pages to be rolled back when the page cannot be accessed) fallback:

 

 
  
Events and status

 
Status 5.1

 

 
  
 
   
 
    
Status Value
 
    
Description
 
   
 
   
 
    
0
 
    
Not cached
 
   
 
   
 
    
1
 
    
Idle (the cache is in the latest status)
 
   
 
   
 
    
2
 
    
Checking
 
   
 
   
 
    
3
 
    
Downloading
 
   
 
   
 
    
4
 
    
Update ready
 
   
 
   
 
    
5
 
    
Cache expiration
 
   
 
  

 
5.2 events

 

 
  
 
   
 
    
Event name
 
    
Description
 
   
 
   
 
    
Checking
 
    
Checking
 
   
 
   
 
    
Downloading
 
    
Downloading
 
   
 
   
 
    
Updatereadey
 
    
Update complete
 
   
 
   
 
    
Obsolete
 
    
Cache expiration
 
   
 
   
 
    
Cached
 
    
Idle, the cache is in the latest status
 
   
 
   
 
    
Error
 
    
Events triggered when an error is reported in the cache
 
   
 
   
 
    
Noupdate
 
    
Check that the update is complete and no files need to be updated
 
   
 
  

 
window.applicationCache.addEventListener("cached",function(){    console.log("cached");});window.applicationCache.addEventListener("noupdate",function(){    console.log("noupdate");})

 

 
  
Notes
6.1 cache manifest must be in the first line and in upper case
6.2 cache files. It is invalid for the browser to clear the cache directly.
6.3 modifying any content in the main. appcache file will cause offline cache reloading, including comments
6.4 html files that introduce the main. appcache file will be directly cached offline
6.5 cache object: window. applictionCache