検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML 5_html/css_WEB-ITnose のアプリケーション キャッシュ実装に関する Webkit の調査

HTML 5_html/css_WEB-ITnose のアプリケーション キャッシュ実装に関する Webkit の調査

WBOY
WBOYオリジナル
2016-06-24 11:49:071050ブラウズ

仕事の関係で、しばらく 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" に置き換えられることを指定します。 

    NETWORK:*

    注: 最初の 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）。


    声明：
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    前の記事：html+cssで携帯ズームと画面変換を実現_html/css_WEB-ITnose次の記事：html+cssで携帯ズームと画面変換を実現_html/css_WEB-ITnose

    関連記事

    続きを見る