仕事の関係で、しばらく ApplicationCache について勉強しています。まず、それに関連する SQL DB テーブルの基本的な概念をいくつか紹介します。
CacheGroups: html、css、js、image などのリソースのセットであり、各 CacheGroups テーブルに含まれています。キャッシュ アイテムには独自の ID と対応するマニフェスト URL があります。 CacheEntries、CacheResources: これら 2 つのテーブルには、HTTP ヘッダー、MIME タイプなど、いくつかのリソースのメタデータ (metadta) が保存されます。 CacheResourcesData: このテーブルは、各リソースを BLOB 形式で保存します。 キャッシュ: このテーブルには各リソースのサイズが保存されます。 Webkit/Source/WebCore/Loader/AppCache/ ディレクトリに、ApplicationCacheStorageXXX の実装があります。 Webkit をコンパイルするときに、オフライン キャッシュ オプションをオンにすると、HTML5 アプリ キャッシュ機能が有効になり、ユーザーが指定したキャッシュ ディレクトリに ApplicationCache.db という名前の SQL DB ファイルが生成されます。これにより、マニフェスト ファイルを Web 上に配置するときに、どのファイルをキャッシュする必要があるか、またそれらのファイルをキャッシュする必要がない場合は、Webkit のローダーがマニフェストの説明に基づいてこのファイルにリソースを保存するかどうか、および次のようなリソースをロードするかどうかを決定するために使用されます。この DB から画像を取得することで、ネットワークからのリクエストを回避し、コストを大幅に節約できます。
詳細については、w3school.com.cn の記事を参照してください:
HTML5 を使用すると、キャッシュ マニフェスト ファイルを作成することで、Web アプリケーションのオフライン バージョンを簡単に作成できます。
アプリケーション キャッシュとは何ですか?
HTML5 ではアプリケーション キャッシュが導入されており、インターネット接続がなくても Web アプリケーションをキャッシュしてアクセスできるようになります。
アプリケーション キャッシュは、アプリに 3 つの利点をもたらします:
オフライン ブラウジング - ユーザーはオフラインでもアプリを使用できます 速度 - キャッシュされたリソースの読み込みが速くなります サーバー負荷の軽減 - ブラウザはサーバーからのみダウンロードします 更新または変更されましたリソース。
ブラウザのサポート
Internet Explorer を除くすべての主要なブラウザはアプリケーション キャッシュをサポートしています。
html5 キャッシュ マニフェスト インスタンス
以下の例は、キャッシュ マニフェストを含む HTML ドキュメントを示しています (オフライン ブラウズ用):
アプリケーションのキャッシュについては、マニフェストを含めてくださいドキュメントの タグ内の属性:
<!DOCTYPE HTML><html manifest="demo.appcache"><body>The content of the document......</body></html>
ログイン後にコピー
マニフェストが指定された各ページは、ユーザーがアクセスするとキャッシュされます。マニフェスト属性が指定されていない場合、ページはキャッシュされません (マニフェスト ファイルで直接指定されていない限り)。
マニフェスト ファイルの推奨ファイル拡張子は「.appcache」です。
マニフェスト ファイルは正しい MIME タイプ (「text/cache-manifest」) で構成する必要があることに注意してください。 Web サーバー上で設定する必要があります。
マニフェスト ファイル
マニフェスト ファイルは、何がキャッシュされているか (何がキャッシュされていないのか) をブラウザーに伝える単純なテキスト ファイルです。
マニフェスト ファイルは 3 つの部分に分けることができます:
キャッシュ マニフェスト - この見出しの下にリストされているファイルは最初のダウンロード後にキャッシュされます
ネットワーク - この見出しの下にリストされているファイルはサーバーへの接続が必要であり、キャッシュされません
FALLBACK - この見出しの下にリストされているファイルは、ページがアクセスできない場合 (404 ページなど) のフォールバック ページを指定します
CACHE MANIFEST
最初の行 CACHE MANIFEST は必須です:
<!DOCTYPE HTML><html manifest="demo.appcache">...</html>
ログイン後にコピー
上記 マニフェスト ファイルには 3 つのリソースがリストされています: CSS ファイル、GIF 画像、および JavaScript ファイル。マニフェスト ファイルが読み込まれると、ブラウザはこれら 3 つのファイルを Web サイトのルート ディレクトリからダウンロードします。その後、ユーザーがインターネットから切断しても、これらのリソースは引き続き使用できます。
NETWORK
以下の NETWORK セクションでは、ファイル "login.asp" がキャッシュされず、オフラインでは使用できないことを指定します:
CACHE MANIFEST/theme.css/logo.gif/main.js
ログイン後にコピー
アスタリスクを使用して、他のすべてのリソース/ファイルがインターネット接続を必要とすることを示すことができます:
NETWORK:login.asp
ログイン後にコピー
FALLBACK
次の FALLBACK サブセクションでは、インターネット接続を確立できない場合、/html5/ ディレクトリ内のすべてのファイルが "offline.html" に置き換えられることを指定します。
注: 最初の URI はリソース、2 番目の URI はリソースです。はフォールバックです。
キャッシュの更新
アプリがキャッシュされると、次の状態になるまでキャッシュされたままになります:
用户清空浏览器缓存 manifest 文件被修改（参阅下面的提示） 由程序来更新应用缓存 实例 - 完整的 Manifest 文件
CACHE MANIFEST# 2012-02-21 v1.0.0/theme.css/logo.gif/main.jsNETWORK:login.aspFALLBACK:/html5/ /404.html
ログイン後にコピー
重要的提示：以 "#" 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。
关于应用程序缓存的注释
请留心缓存的内容。
一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保浏览器更新缓存，您需要更新 manifest 文件。
注释：浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
