Common Pitfalls to Avoid when using HTML5 Application Cache-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Common Pitfalls to Avoid when using HTML5 Application Cache

Christopher Nolan

Feb 20, 2025 am 10:05 AM

Common Pitfalls to Avoid when using HTML5 Application Cache

Key Points

Do not include manifest files in the application cache manifest, which can create a loop that will almost no longer inform your website that new cache files are available.
Always set the application type manifest in the server's .htaccess file to ensure AppCache is running correctly. If the media type is not set, AppCache will not work.
Note that if none of the individual files specified in the manifest file can be found or cannot be downloaded, the entire manifest file will be discarded. This is a special behavior of AppCache.
After updating the website, always update the manifest file, otherwise the user will not see the changes and will only see the previously cached data. You can update the version number or date in the comments in the manifest file to force the user's web browser to download a new version of the manifest file.

HTML5 application caching (also known as AppCache) has become a hot topic for web developers recently. AppCache allows you to allow website visitors to browse your website while offline. You can even store parts of the website, such as images, style sheets, or web fonts, in a cache on the user's computer. This can help your website load faster, thereby reducing the load on the server.

To use AppCache, you can create a manifest file with the extension "appcache", for example: manifest.appcache. In this file, you can list all files to cache. To enable it on your site, you must include a reference to the manifest file on the webpage of the html element, as shown below:

<html lang="en" manifest="manifest.appcache">

This is a sample manifest file:

<code>CACHE MANIFEST
# 2015-01-23 v0.1
/style.css
/logo.gif
/script.js

NETWORK:
*

FALLBACK:
/server/ /fallback.html</code>

In addition to the benefits of AppCache, there are some common pitfalls that should be avoided to prevent disrupting the user experience and destroying your app.

Do not list manifest files in manifest files

If you include the manifest file itself in the application cache manifest, it will get stuck in some sort of loop that will hardly inform your website that there is a new cache file available, and it should download and use the new manifest file instead of the old one manifest file. Therefore, be careful not to make the following mistakes:

<code>CACHE MANIFEST
# 2015-01-23 v0.1

manifest.appcache
page2.css</code>

Uncacheable resources on the cache page will not load

This is a very common mistake when using AppCache for the first time. This is where the NETWORK flag in the manifest file comes into play. The NETWORK section of the manifest file specifies the resources that the web application needs to access online.

The URL specified under the NETWORK flag is basically a "whitelist", that is, the file specified under this flag is always loaded from the server when there is an Internet connection. For example, the following code snippet ensures that requests to load resources contained in the /api/ subtree are always loaded from the network, not from the cache.

<html lang="en" manifest="manifest.appcache">

Always set the application type manifest in the server's .htaccess file

The manifest file should always be served under the correct media type text/cache-manifest. If the media type is not set, AppCache will not work.

It should always be configured in the .htaccess file of the production server. This is mentioned in most tutorials explaining AppCache, but many developers ignore this when migrating web applications from development servers to production servers.

Enter the following in Apache's .htaccess file:

<code>CACHE MANIFEST
# 2015-01-23 v0.1
/style.css
/logo.gif
/script.js

NETWORK:
*

FALLBACK:
/server/ /fallback.html</code>

If you upload your app to Google App Engine, you can do the same task by adding the following snippet to the app.yaml file:

<code>CACHE MANIFEST
# 2015-01-23 v0.1

manifest.appcache
page2.css</code>

Avoid discarding the entire list because the file cannot be found

If none of the individual files specified in the manifest file can be found or cannot be downloaded, the entire manifest file will be discarded. This is a strange behavior of AppCache, which should be kept in mind when designing web applications that use AppCache.

Example:

<code>NETWORK:

/api</code>

If you delete the logo.gif, AppCache will not be able to find the deleted image file, so nothing in the manifest file will be executed.

Data is loaded from AppCache even if online

Once your web browser saves the cache manifest file, the file will be loaded from the cache manifest itself even if the user is connected to the internet. This feature helps to increase the loading speed of your website and helps reduce server load.

The changes on the server do not occur until the manifest file is updated

Because you knew from the previous point that data would load from AppCache even if the user is online, changes to files in the website or server will not occur until the manifest file is updated.

After updating the website, you always have to update the manifest file, otherwise your users will never see the changes, they will only see the data that was previously cached. You can update the version number or date in the comments in the manifest file to force the user's web browser to download a new version of the manifest file. For example, if you are using a list file before making changes to your website:

<code>AddType text/cache-manifest .manifest</code>

It can be changed to something similar to the following code block so that the user's browser can download a new copy of the manifest file.

<code>- url: /public_html/(.*\.appcache)
  static_files: public_html/
  mime_type: text/cache-manifest
  upload: public_html/(.*\.appcache)</code>

Please note that lines starting with # are comment lines that will not be executed.

The manifest file must be served from the same source as the host.

Although the manifest file can hold a reference to the resource to be cached from other domains, it should be provided to the web browser from the same source as the host page. If this is not the case, the manifest file will not be loaded. For example, the following manifest file is correct:

<code>CACHE MANIFEST
# 2015-01-23 v0.1
/style.css
/logo.gif
/script.js</code>

Here we specify what we want to store in the user's browser cache, which is referenced from another domain, which is absolutely fine.

Relative URL Relative to list URL

One important thing to note is that the relative URL you mentioned in the manifest is relative to the manifest file, not relative to the document you reference the manifest file. If the manifest and reference are not in the same path, the resource will not be loaded and the manifest file will not be loaded.

If your application structure looks like this:

<html lang="en" manifest="manifest.appcache">

Then your manifest file should look like this:

<code>CACHE MANIFEST
# 2015-01-23 v0.1
/style.css
/logo.gif
/script.js

NETWORK:
*

FALLBACK:
/server/ /fallback.html</code>

Check the status of the checklist programmatically

You can programmatically check if your application is using an updated version of the cache manifest by testing window.applicationCache.status. Here are some sample code:

<code>CACHE MANIFEST
# 2015-01-23 v0.1

manifest.appcache
page2.css</code>

Running the above code on the website will let you know when new updates to the AppCache list are available. Note that UPDATEREADY is a defined state. You can even use the swapCache() method in the onUpdateReady() function to replace the old manifest file with the new manifest file:

<code>NETWORK:

/api</code>

Conclusion

AppCache is a useful technique, but as we have seen, be cautious when implementing it in a project. Developers should selectively select what should be included in the manifest file. Ideally, the manifest file should contain static content such as stylesheets, scripts, web fonts, and images. However, you are always the best judge of what is included in the manifest file. Appcache is a double-edged sword, so be careful when using it!

Most of the above content has been introduced elsewhere, and there are some other key points. You can check out the following resources for more information:

Application Cache Trap on MDN
Jake Archibald's app cache is a jerk
Jake Archibald's Offline Recipes

FAQs about HTML5 Application Caching (FAQ)

What is HTML5 application caching and why is it important?

HTML5 Application Cache (AppCache) is a feature that allows developers to specify which files should be cached by the browser and make them available for users to offline. It is important because it can improve the performance of your web application by reducing server load and saving bandwidth. It also allows applications to run even when users are offline, providing a better user experience.

How does HTML5 application caching work?

HTML5 Application Caching works by using manifest files. This file lists the resources that the browser should cache for offline use. When a user accesses a web page, the browser checks whether the manifest file is associated with it. If so, the browser will download and store the listed resources. The next time a user visits a web page, the browser will load the cached resources instead of downloading them from the server.

What are the common pitfalls when using HTML5 application caching?

When using HTML5 application caching, some common pitfalls include: not updating the manifest file correctly, causing old resources to be provided; not handling the cached manifest fallback part correctly, resulting in errors; and not considering the impact of cache on user device storage.

How to avoid these traps?

To avoid these pitfalls, always update the manifest file correctly when the resource changes. Use the NETWORK section of the manifest file to specify resources that should never be cached. Also, consider the user's device storage and cache only the necessary resources.

What is the future of HTML5 application caching?

HTML5 application cache is being deprecated, replaced by Service Workers. Service Workers provide more control over caches and can handle more complex scenarios. However, Service Workers are currently supported by not all browsers, so it is still important to understand and use HTML5 application caching.

How to create a manifest file?

The manifest file is a simple text file that lists the resources to be cached. It should be served as MIME type "text/cache-manifest". The first line of the file should be "CACHE MANIFEST", followed by the resource to be cached.

How to associate a web page with a manifest file?

To associate a web page with a manifest file, add the "manifest" attribute to the "html" tag of the web page. The value of the "manifest" attribute should be the URL of the manifest file.

How to update the cache?

To update the cache, make changes to the manifest file. Every time a user visits a web page, the browser checks for updates to the manifest file. If the manifest file has been changed, the browser will download and cache the new resource.

What happens if the resources listed in the manifest file cannot be downloaded?

If the resources listed in the manifest file cannot be downloaded, the entire cache update process will fail. The browser will continue to use the old cache.

Can I use HTML5 application cache for all resources?

While technically you can use HTML5 application cache for all resources, this is not recommended. Excessive cache of resources can fill up the user's device storage and negatively impact performance. It is best to cache only the necessary resources.

The above is the detailed content of Common Pitfalls to Avoid when using HTML5 Application Cache. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Python vs. JavaScript: The Learning Curve and Ease of UseApr 16, 2025 am 12:12 AM

Python is more suitable for beginners, with a smooth learning curve and concise syntax; JavaScript is suitable for front-end development, with a steep learning curve and flexible syntax. 1. Python syntax is intuitive and suitable for data science and back-end development. 2. JavaScript is flexible and widely used in front-end and server-side programming.

Python vs. JavaScript: Community, Libraries, and ResourcesApr 15, 2025 am 12:16 AM

Python and JavaScript have their own advantages and disadvantages in terms of community, libraries and resources. 1) The Python community is friendly and suitable for beginners, but the front-end development resources are not as rich as JavaScript. 2) Python is powerful in data science and machine learning libraries, while JavaScript is better in front-end development libraries and frameworks. 3) Both have rich learning resources, but Python is suitable for starting with official documents, while JavaScript is better with MDNWebDocs. The choice should be based on project needs and personal interests.

From C/C to JavaScript: How It All WorksApr 14, 2025 am 12:05 AM

The shift from C/C to JavaScript requires adapting to dynamic typing, garbage collection and asynchronous programming. 1) C/C is a statically typed language that requires manual memory management, while JavaScript is dynamically typed and garbage collection is automatically processed. 2) C/C needs to be compiled into machine code, while JavaScript is an interpreted language. 3) JavaScript introduces concepts such as closures, prototype chains and Promise, which enhances flexibility and asynchronous programming capabilities.

JavaScript Engines: Comparing ImplementationsApr 13, 2025 am 12:05 AM

Different JavaScript engines have different effects when parsing and executing JavaScript code, because the implementation principles and optimization strategies of each engine differ. 1. Lexical analysis: convert source code into lexical unit. 2. Grammar analysis: Generate an abstract syntax tree. 3. Optimization and compilation: Generate machine code through the JIT compiler. 4. Execute: Run the machine code. V8 engine optimizes through instant compilation and hidden class, SpiderMonkey uses a type inference system, resulting in different performance performance on the same code.

Beyond the Browser: JavaScript in the Real WorldApr 12, 2025 am 12:06 AM

JavaScript's applications in the real world include server-side programming, mobile application development and Internet of Things control: 1. Server-side programming is realized through Node.js, suitable for high concurrent request processing. 2. Mobile application development is carried out through ReactNative and supports cross-platform deployment. 3. Used for IoT device control through Johnny-Five library, suitable for hardware interaction.

Building a Multi-Tenant SaaS Application with Next.js (Backend Integration)Apr 11, 2025 am 08:23 AM

I built a functional multi-tenant SaaS application (an EdTech app) with your everyday tech tool and you can do the same. First, what’s a multi-tenant SaaS application? Multi-tenant SaaS applications let you serve multiple customers from a sing

How to Build a Multi-Tenant SaaS Application with Next.js (Frontend Integration)Apr 11, 2025 am 08:22 AM

This article demonstrates frontend integration with a backend secured by Permit, building a functional EdTech SaaS application using Next.js. The frontend fetches user permissions to control UI visibility and ensures API requests adhere to role-base

JavaScript: Exploring the Versatility of a Web LanguageApr 11, 2025 am 12:01 AM

JavaScript is the core language of modern web development and is widely used for its diversity and flexibility. 1) Front-end development: build dynamic web pages and single-page applications through DOM operations and modern frameworks (such as React, Vue.js, Angular). 2) Server-side development: Node.js uses a non-blocking I/O model to handle high concurrency and real-time applications. 3) Mobile and desktop application development: cross-platform development is realized through ReactNative and Electron to improve development efficiency.

See all articles