検索

ホームページ >ウェブフロントエンド >jsチュートリアル >HTML5アプリケーションキャッシュを使用するときに回避する一般的な落とし穴

HTML5アプリケーションキャッシュを使用するときに回避する一般的な落とし穴

Christopher Nolan
Christopher Nolanオリジナル
2025-02-20 10:05:08162ブラウズ

Common Pitfalls to Avoid when using HTML5 Application Cache

キーポイント

  • アプリケーションキャッシュマニフェストにマニフェストファイルを含めないでください。これにより、新しいキャッシュファイルが利用可能であることをWebサイトにほとんど通知しなくなるループを作成できます。
  • AppCacheが正しく実行されていることを確認するために、サーバーの.htaccessファイルにアプリケーションタイプマニフェストを常に設定します。メディアタイプが設定されていない場合、AppCacheは機能しません。
  • マニフェストファイルで指定された個々のファイルが見つからない場合、またはダウンロードできない場合、マニフェストファイル全体が破棄されることに注意してください。これはAppCacheの特別な動作です。
  • Webサイトを更新した後、常にマニフェストファイルを更新します。そうしないと、ユーザーは変更が表示されず、以前にキャッシュされたデータのみが表示されます。マニフェストファイルのコメントのバージョン番号または日付を更新して、ユーザーのWebブラウザーにマニフェストファイルの新しいバージョンをダウンロードさせることができます。

HTML5アプリケーションキャッシュ（AppCacheとも呼ばれます）は、最近Web開発者にとってホットトピックになりました。 AppCacheを使用すると、オフライン中にWebサイトの訪問者がWebサイトを閲覧できるようにします。ユーザーのコンピューターのキャッシュに、画像、スタイルシート、WebフォントなどのWebサイトの一部を保存することもできます。これにより、ウェブサイトの読み込みが速くなり、サーバー上の負荷が削減されます。

AppCacheを使用するには、拡張機能「AppCache」を使用してマニフェストファイルを作成できます。たとえば、manifest.appcacheです。このファイルでは、すべてのファイルをキャッシュにリストできます。サイトで有効にするには、以下に示すように、HTML要素のWebページにマニフェストファイルへの参照を含める必要があります。 

<code class="language-html"></code>
これは、サンプルマニフェストファイルです：

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

NETWORK:
*

FALLBACK:
/server/ /fallback.html</code>
AppCacheの利点に加えて、ユーザーエクスペリエンスの破壊を防ぎ、アプリを破壊するために避けるべき一般的な落とし穴がいくつかあります。

マニフェストファイルにマニフェストファイルをリストしないでください

アプリケーションキャッシュマニフェストにマニフェストファイル自体を含めると、新しいキャッシュファイルが利用可能であることをWebサイトにほとんど通知しないようにし、新しいマニフェストファイルをダウンロードして使用する必要があることをWebサイトに通知することはほとんどありません。古いマニフェストファイルの代わりに。したがって、次の間違いを犯さないように注意してください。

キャッシュページの資格のないリソースはロードされません

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

manifest.appcache
page2.css</code>
これは、AppCacheを初めて使用する場合、非常に一般的な間違いです。これは、マニフェストファイルのネットワークフラグが機能する場所です。マニフェストファイルのネットワークセクションは、Webアプリケーションがオンラインにアクセスするために必要なリソースを指定します。

ネットワークフラグの下で指定されているURLは基本的に「ホワイトリスト」です。つまり、このフラグの下で指定されたファイルは、インターネット接続があるときは常にサーバーからロードされます。たとえば、次のコードスニペットにより、 / API /サブツリーに含まれるリソースをロードするリクエストが、キャッシュからではなく、常にネットワークからロードされることが保証されます。 

<code class="language-html"></code>

常にサーバーの.htaccessファイルにアプリケーションタイプマニフェストを設定します

マニフェストファイルは、正しいメディアタイプのテキスト/キャッシュマニフェストの下で常に提供する必要があります。メディアタイプが設定されていない場合、AppCacheは機能しません。

生産サーバーの.htaccessファイルで常に構成する必要があります。これは、AppCacheを説明するほとんどのチュートリアルで言及されていますが、多くの開発者は、開発サーバーから生産サーバーにWebアプリケーションを移行すると、これを無視しています。

apacheの.htaccessファイルに以下を入力してください：

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

NETWORK:
*

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

アプリエンジンにアプリをアップロードすると、次のスニペットをapp.yamlファイルに追加することで同じタスクを実行できます。

ファイルが見つからないため、リスト全体を廃棄することは避けてください
<code>CACHE MANIFEST
# 2015-01-23 v0.1

manifest.appcache
page2.css</code>

マニフェストファイルで指定された個々のファイルが見つからないか、ダウンロードできない場合、マニフェストファイル全体が破棄されます。これはAppCacheの奇妙な動作であり、AppCacheを使用するWebアプリケーションを設計するときに留意する必要があります。

例：

logo.gifを削除すると、appcacheが削除された画像ファイルを見つけることができないため、マニフェストファイルには実行されません。 
<code>NETWORK:

/api</code>

データは、オンラインであってもappcacheからロードされます

Webブラウザーがキャッシュマニフェストファイルを保存すると、ユーザーがインターネットに接続されていても、ファイルはキャッシュマニフェスト自体からロードされます。この機能は、Webサイトの読み込み速度を高めるのに役立ち、サーバーの負荷を減らすのに役立ちます。

マニフェストファイルが更新されるまでサーバー上の変更は発生しません

前のポイントから、ユーザーがオンラインであってもデータがAppCacheからロードされることを知っていたため、マニフェストファイルが更新されるまでWebサイトまたはサーバーのファイルは発生しません。

Webサイトを更新した後、常にマニフェストファイルを更新する必要があります。そうしないと、ユーザーは変更が表示されることはありません。以前にキャッシュされたデータのみが表示されます。マニフェストファイルのコメントのバージョン番号または日付を更新して、ユーザーのWebブラウザーにマニフェストファイルの新しいバージョンをダウンロードさせることができます。たとえば、ウェブサイトに変更を加える前にリストファイルを使用している場合：

ユーザーのブラウザがマニフェストファイルの新しいコピーをダウンロードできるように、次のコードブロックに似たものに変更できます。 
<code>AddType text/cache-manifest .manifest</code>

＃で始まる行は、実行されないコメント行であることに注意してください。 
<code>- url: /public_html/(.*\.appcache)
  static_files: public_html/
  mime_type: text/cache-manifest
  upload: public_html/(.*\.appcache)</code>

マニフェストファイルは、ホストと同じソースから提供する必要があります。

マニフェストファイルは、他のドメインからキャッシュされるリソースへの参照を保持できますが、ホストページと同じソースからWebブラウザに提供する必要があります。そうでない場合、マニフェストファイルはロードされません。たとえば、次のマニフェストファイルは正しいです：

ここでは、ユーザーのブラウザキャッシュに保存するものを指定します。これは別のドメインから参照されています。これはまったく問題ありません。

リストurlに対する相対的なURL

注意すべき重要なことの1つは、マニフェストで言及した相対的なURLは、マニフェストファイルに関連するものではなく、マニフェストファイルに関連していることです。マニフェストと参照が同じパスにない場合、リソースはロードされず、マニフェストファイルはロードされません。

アプリケーション構造が次のようになった場合：

<code class="language-html"></code>
その後、マニフェストファイルは次のようになります：

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

NETWORK:
*

FALLBACK:
/server/ /fallback.html</code>
プログラム的にチェックリストのステータスを確認してください

[window.applicationcache.statusをテストして、アプリケーションが更新されたバージョンのキャッシュマニフェストを使用しているかどうかをプログラム的に確認できます。サンプルコードは次のとおりです

Webサイトで上記のコードを実行すると、AppCacheリストの新しい更新がいつ利用可能かを知らせることができます。 Updatereadyは定義された状態であることに注意してください。 onupdateready（）関数のswapcache（）メソッドを使用して、古いマニフェストファイルを新しいマニフェストファイルに置き換えることもできます。 
<code>CACHE MANIFEST
# 2015-01-23 v0.1

manifest.appcache
page2.css</code>

結論

<code>NETWORK:

/api</code>
AppCacheは有用な手法ですが、これまで見てきたように、プロジェクトに実装する際には注意してください。開発者は、マニフェストファイルに含まれるものを選択的に選択する必要があります。理想的には、マニフェストファイルには、スタイルシート、スクリプト、Webフォント、画像などの静的コンテンツを含める必要があります。ただし、あなたは常にマニフェストファイルに含まれているものの最高の裁判官です。 AppCacheは両刃の剣ですので、使用するときは注意してください！

上記のコンテンツのほとんどは他の場所で導入されており、他にもいくつかの重要なポイントがあります。詳細については、次のリソースをご覧ください。

アプリケーションキャッシュトラップでMDN

ジェイク・アーチボルドのアプリキャッシュはジャーク
    です
  • ジェイク・アーチボルドのオフラインレシピ
  • HTML5アプリケーションキャッシュ（FAQ）
    • に関する
  • FAQ
    • HTML5アプリケーションのキャッシュとは何ですか？なぜそれが重要なのですか？

HTML5アプリケーションキャッシュ（AppCache）は、開発者がブラウザでどのファイルをキャッシュするかを指定し、ユーザーがオフラインにできるようにする機能です。サーバーの負荷を削減し、帯域幅を節約することにより、Webアプリケーションのパフォーマンスを改善できるため、重要です。また、ユーザーがオフラインである場合でもアプリケーションを実行し、ユーザーエクスペリエンスを向上させることができます。

HTML5アプリケーションのキャッシュはどのように機能しますか？

HTML5アプリケーションキャッシングは、マニフェストファイルを使用して機能します。このファイルには、ブラウザがオフラインで使用するためにキャッシュするリソースがリストされています。ユーザーがWebページにアクセスすると、ブラウザはマニフェストファイルがそれに関連付けられているかどうかを確認します。その場合、ブラウザはリストされたリソースをダウンロードして保存します。次回ユーザーがWebページにアクセスしたとき、ブラウザはサーバーからダウンロードする代わりにキャッシュされたリソースをロードします。

HTML5アプリケーションキャッシングを使用する際の一般的な落とし穴は何ですか？

HTML5アプリケーションのキャッシングを使用すると、マニフェストファイルを正しく更新せず、キャッシュマニフェストのフォールバックパーツを正しく処理しないようにしますデバイスストレージ。

これらのトラップを避ける方法は？

これらの落とし穴を回避するには、リソースが変更されたら、常にマニフェストファイルを正しく更新してください。マニフェストファイルのネットワークセクションを使用して、キャッシュされないリソースを指定します。また、ユーザーのデバイスストレージを検討し、必要なリソースのみをキャッシュします。

HTML5アプリケーションキャッシングの将来は何ですか？

HTML5アプリケーションキャッシュは非推奨であり、サービスワーカーに置き換えられています。サービスワーカーはキャッシュをより多くの制御を提供し、より複雑なシナリオを処理できます。ただし、サービスワーカーは現在、すべてのブラウザではないためサポートされているため、HTML5アプリケーションのキャッシュを理解して使用することが依然として重要です。

マニフェストファイルを作成する方法は？

マニフェストファイルは、キャッシュされるリソースをリストする単純なテキストファイルです。 MIMEタイプ「テキスト/キャッシュマニフェスト」として提供する必要があります。ファイルの最初の行は「キャッシュマニフェスト」であり、その後にキャッシュされるリソースが続きます。

Webページをマニフェストファイルに関連付ける方法は？

Webページをマニフェストファイルに関連付けるには、Webページの「HTML」タグに「マニフェスト」属性を追加します。 「マニフェスト」属性の値は、マニフェストファイルのURLである必要があります。

キャッシュを更新する方法は？

キャッシュを更新するには、マニフェストファイルを変更します。ユーザーがWebページにアクセスするたびに、ブラウザはマニフェストファイルの更新をチェックします。マニフェストファイルが変更された場合、ブラウザは新しいリソースをダウンロードしてキャッシュします。

マニフェストファイルにリストされているリソースをダウンロードできない場合はどうなりますか？

マニフェストファイルにリストされているリソースをダウンロードできない場合、キャッシュ更新プロセス全体が失敗します。ブラウザは引き続き古いキャッシュを使用します。

すべてのリソースにHTML5アプリケーションキャッシュを使用できますか？

技術的には、すべてのリソースにHTML5アプリケーションキャッシュを使用できますが、これは推奨されません。リソースの過度のキャッシュは、ユーザーのデバイスストレージを埋め、パフォーマンスに悪影響を与える可能性があります。必要なリソースのみをキャッシュすることが最善です。

以上がHTML5アプリケーションキャッシュを使用するときに回避する一般的な落とし穴の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

html5 html 循环 using 样式表 apache
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：DimpleとD3を使用してJavaScriptでデータの視覚化を作成します次の記事：DimpleとD3を使用してJavaScriptでデータの視覚化を作成します

関連記事

続きを見る