キーポイント
- アプリケーションキャッシュマニフェストにマニフェストファイルを含めないでください。これにより、新しいキャッシュファイルが利用可能であることをWebサイトにほとんど通知しなくなるループを作成できます。
- AppCacheが正しく実行されていることを確認(rèn)するために、サーバーの.htaccessファイルにアプリケーションタイプマニフェストを常に設(shè)定します。メディアタイプが設(shè)定されていない場(chǎng)合、AppCacheは機(jī)能しません。
- マニフェストファイルで指定された個(gè)々のファイルが見つからない場(chǎng)合、またはダウンロードできない場(chǎng)合、マニフェストファイル全體が破棄されることに注意してください。これはAppCacheの特別な動(dòng)作です。
- Webサイトを更新した後、常にマニフェストファイルを更新します。そうしないと、ユーザーは変更が表示されず、以前にキャッシュされたデータのみが表示されます。マニフェストファイルのコメントのバージョン番號(hào)または日付を更新して、ユーザーのWebブラウザーにマニフェストファイルの新しいバージョンをダウンロードさせることができます。
HTML5アプリケーションキャッシュ（AppCacheとも呼ばれます）は、最近Web開発者にとってホットトピックになりました。 AppCacheを使用すると、オフライン中にWebサイトの訪問者がWebサイトを閲覧できるようにします。ユーザーのコンピューターのキャッシュに、畫像、スタイルシート、WebフォントなどのWebサイトの一部を保存することもできます。これにより、ウェブサイトの読み込みが速くなり、サーバー上の負(fù)荷が削減されます。
AppCacheを使用するには、拡張機(jī)能「AppCache」を使用してマニフェストファイルを作成できます。たとえば、manifest.appcacheです。このファイルでは、すべてのファイルをキャッシュにリストできます。サイトで有効にするには、以下に示すように、HTML要素のWebページにマニフェストファイルへの參照を含める必要があります。
<html lang="en" manifest="manifest.appcache">これは、サンプルマニフェストファイルです：
<code>CACHE MANIFEST # 2015-01-23 v0.1 /style.css /logo.gif /script.js NETWORK: * FALLBACK: /server/ /fallback.html</code>AppCacheの利點(diǎn)に加えて、ユーザーエクスペリエンスの破壊を防ぎ、アプリを破壊するために避けるべき一般的な落とし穴がいくつかあります。
マニフェストファイルにマニフェストファイルをリストしないでください
アプリケーションキャッシュマニフェストにマニフェストファイル自體を含めると、新しいキャッシュファイルが利用可能であることをWebサイトにほとんど通知しないようにし、新しいマニフェストファイルをダウンロードして使用する必要があることをWebサイトに通知することはほとんどありません。古いマニフェストファイルの代わりに。したがって、次の間違いを犯さないように注意してください。
キャッシュページの資格のないリソースはロードされません
<code>CACHE MANIFEST # 2015-01-23 v0.1 manifest.appcache page2.css</code>これは、AppCacheを初めて使用する場(chǎng)合、非常に一般的な間違いです。これは、マニフェストファイルのネットワークフラグが機(jī)能する場(chǎng)所です。マニフェストファイルのネットワークセクションは、Webアプリケーションがオンラインにアクセスするために必要なリソースを指定します。
ネットワークフラグの下で指定されているU(xiǎn)RLは基本的に「ホワイトリスト」です。つまり、このフラグの下で指定されたファイルは、インターネット接続があるときは常にサーバーからロードされます。たとえば、次のコードスニペットにより、 / API /サブツリーに含まれるリソースをロードするリクエストが、キャッシュからではなく、常にネットワークからロードされることが保証されます。
<html lang="en" manifest="manifest.appcache">
常にサーバーの.htaccessファイルにアプリケーションタイプマニフェストを設(shè)定します
マニフェストファイルは、正しいメディアタイプのテキスト/キャッシュマニフェストの下で常に提供する必要があります。メディアタイプが設(shè)定されていない場(chǎng)合、AppCacheは機(jī)能しません。
生産サーバーの.htaccessファイルで常に構(gòu)成する必要があります。これは、AppCacheを説明するほとんどのチュートリアルで言及されていますが、多くの開発者は、開発サーバーから生産サーバーにWebアプリケーションを移行すると、これを無(wú)視しています。
apacheの.htaccessファイルに以下を入力してください：
<code>CACHE MANIFEST # 2015-01-23 v0.1 /style.css /logo.gif /script.js NETWORK: * FALLBACK: /server/ /fallback.html</code>
アプリエンジンにアプリをアップロードすると、次のスニペットをapp.yamlファイルに追加することで同じタスクを?qū)g行できます。
ファイルが見つからないため、リスト全體を廃棄することは避けてください<code>CACHE MANIFEST # 2015-01-23 v0.1 manifest.appcache page2.css</code>
マニフェストファイルで指定された個(gè)々のファイルが見つからないか、ダウンロードできない場(chǎng)合、マニフェストファイル全體が破棄されます。これはAppCacheの奇妙な動(dòng)作であり、AppCacheを使用するWebアプリケーションを設(shè)計(jì)するときに留意する必要があります。
例：
logo.gifを削除すると、appcacheが削除された畫像ファイルを見つけることができないため、マニフェストファイルには実行されません。
<code>NETWORK: /api</code>
データは、オンラインであってもappcacheからロードされます
Webブラウザーがキャッシュマニフェストファイルを保存すると、ユーザーがインターネットに接続されていても、ファイルはキャッシュマニフェスト自體からロードされます。この機(jī)能は、Webサイトの読み込み速度を高めるのに役立ち、サーバーの負(fù)荷を減らすのに役立ちます。
マニフェストファイルが更新されるまでサーバー上の変更は発生しません
前のポイントから、ユーザーがオンラインであってもデータがAppCacheからロードされることを知っていたため、マニフェストファイルが更新されるまでWebサイトまたはサーバーのファイルは発生しません。
Webサイトを更新した後、常にマニフェストファイルを更新する必要があります。そうしないと、ユーザーは変更が表示されることはありません。以前にキャッシュされたデータのみが表示されます。マニフェストファイルのコメントのバージョン番號(hào)または日付を更新して、ユーザーのWebブラウザーにマニフェストファイルの新しいバージョンをダウンロードさせることができます。たとえば、ウェブサイトに変更を加える前にリストファイルを使用している場(chǎng)合：
ユーザーのブラウザがマニフェストファイルの新しいコピーをダウンロードできるように、次のコードブロックに似たものに変更できます。
<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ブラウザに提供する必要があります。そうでない場(chǎng)合、マニフェストファイルはロードされません。たとえば、次のマニフェストファイルは正しいです：ここでは、ユーザーのブラウザキャッシュに保存するものを指定します。これは別のドメインから參照されています。これはまったく問題ありません。
リストurlに対する相対的なURL注意すべき重要なことの1つは、マニフェストで言及した相対的なURLは、マニフェストファイルに関連するものではなく、マニフェストファイルに関連していることです。マニフェストと參照が同じパスにない場(chǎng)合、リソースはロードされず、マニフェストファイルはロードされません。
アプリケーション構(gòu)造が次のようになった場(chǎng)合：
<html lang="en" manifest="manifest.appcache">その後、マニフェストファイルは次のようになります：
<code>CACHE MANIFEST # 2015-01-23 v0.1 /style.css /logo.gif /script.js NETWORK: * FALLBACK: /server/ /fallback.html</code>プログラム的にチェックリストのステータスを確認(rèn)してください
[window.applicationcache.statusをテストして、アプリケーションが更新されたバージョンのキャッシュマニフェストを使用しているかどうかをプログラム的に確認(rèn)できます。サンプルコードは次のとおりです
Webサイトで上記のコードを?qū)g行すると、AppCacheリストの新しい更新がいつ利用可能かを知らせることができます。 Updatereadyは定義された狀態(tài)であることに注意してください。 onupdateready（）関數(shù)のswapcache（）メソッドを使用して、古いマニフェストファイルを新しいマニフェストファイルに置き換えることもできます。
<code>CACHE MANIFEST # 2015-01-23 v0.1 manifest.appcache page2.css</code>
結(jié)論
<code>NETWORK: /api</code>AppCacheは有用な手法ですが、これまで見てきたように、プロジェクトに実裝する際には注意してください。開発者は、マニフェストファイルに含まれるものを選択的に選択する必要があります。理想的には、マニフェストファイルには、スタイルシート、スクリプト、Webフォント、畫像などの靜的コンテンツを含める必要があります。ただし、あなたは常にマニフェストファイルに含まれているものの最高の裁判官です。 AppCacheは両刃の剣ですので、使用するときは注意してください！
上記のコンテンツのほとんどは他の場(chǎng)所で導(dǎo)入されており、他にもいくつかの重要なポイントがあります。詳細(xì)については、次のリソースをご覧ください。
アプリケーションキャッシュトラップでMDN
ジェイク?アーチボルドのアプリキャッシュはジャーク
- です
- ジェイク?アーチボルドのオフラインレシピ
- HTML5アプリケーションキャッシュ（FAQ） に関する
- FAQ HTML5アプリケーションのキャッシュとは何ですか？なぜそれが重要なのですか？
HTML5アプリケーションキャッシュ（AppCache）は、開発者がブラウザでどのファイルをキャッシュするかを指定し、ユーザーがオフラインにできるようにする機(jī)能です。サーバーの負(fù)荷を削減し、帯域幅を節(jié)約することにより、Webアプリケーションのパフォーマンスを改善できるため、重要です。また、ユーザーがオフラインである場(chǎng)合でもアプリケーションを?qū)g行し、ユーザーエクスペリエンスを向上させることができます。
HTML5アプリケーションのキャッシュはどのように機(jī)能しますか？
HTML5アプリケーションキャッシングは、マニフェストファイルを使用して機(jī)能します。このファイルには、ブラウザがオフラインで使用するためにキャッシュするリソースがリストされています。ユーザーがWebページにアクセスすると、ブラウザはマニフェストファイルがそれに関連付けられているかどうかを確認(rèn)します。その場(chǎng)合、ブラウザはリストされたリソースをダウンロードして保存します。次回ユーザーがWebページにアクセスしたとき、ブラウザはサーバーからダウンロードする代わりにキャッシュされたリソースをロードします。
HTML5アプリケーションキャッシングを使用する際の一般的な落とし穴は何ですか？
HTML5アプリケーションのキャッシングを使用すると、マニフェストファイルを正しく更新せず、キャッシュマニフェストのフォールバックパーツを正しく処理しないようにしますデバイスストレージ。
これらのトラップを避ける方法は？
これらの落とし穴を回避するには、リソースが変更されたら、常にマニフェストファイルを正しく更新してください。マニフェストファイルのネットワークセクションを使用して、キャッシュされないリソースを指定します。また、ユーザーのデバイスストレージを検討し、必要なリソースのみをキャッシュします。HTML5アプリケーションキャッシングの將來は何ですか？
HTML5アプリケーションキャッシュは非推奨であり、サービスワーカーに置き換えられています。サービスワーカーはキャッシュをより多くの制御を提供し、より複雑なシナリオを処理できます。ただし、サービスワーカーは現(xiàn)在、すべてのブラウザではないためサポートされているため、HTML5アプリケーションのキャッシュを理解して使用することが依然として重要です。
マニフェストファイルを作成する方法は？
マニフェストファイルは、キャッシュされるリソースをリストする?yún)g純なテキストファイルです。 MIMEタイプ「テキスト/キャッシュマニフェスト」として提供する必要があります。ファイルの最初の行は「キャッシュマニフェスト」であり、その後にキャッシュされるリソースが続きます。
Webページをマニフェストファイルに関連付ける方法は？
Webページをマニフェストファイルに関連付けるには、Webページの「HTML」タグに「マニフェスト」屬性を追加します。 「マニフェスト」屬性の値は、マニフェストファイルのURLである必要があります。
キャッシュを更新する方法は？
キャッシュを更新するには、マニフェストファイルを変更します。ユーザーがWebページにアクセスするたびに、ブラウザはマニフェストファイルの更新をチェックします。マニフェストファイルが変更された場(chǎng)合、ブラウザは新しいリソースをダウンロードしてキャッシュします。
マニフェストファイルにリストされているリソースをダウンロードできない場(chǎng)合はどうなりますか？
マニフェストファイルにリストされているリソースをダウンロードできない場(chǎng)合、キャッシュ更新プロセス全體が失敗します。ブラウザは引き続き古いキャッシュを使用します。
すべてのリソースにHTML5アプリケーションキャッシュを使用できますか？
技術(shù)的には、すべてのリソースにHTML5アプリケーションキャッシュを使用できますが、これは推奨されません。リソースの過度のキャッシュは、ユーザーのデバイスストレージを埋め、パフォーマンスに悪影響を與える可能性があります。必要なリソースのみをキャッシュすることが最善です。
以上がHTML5アプリケーションキャッシュを使用するときに回避する一般的な落とし穴の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。
ホットAIツール
Undress AI Tool
脫衣畫像を無(wú)料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無(wú)料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡(jiǎn)単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無(wú)料のコードエディター
SublimeText3 中國(guó)語(yǔ)版
中國(guó)語(yǔ)版、とても使いやすい
ゼンドスタジオ 13.0.1
強(qiáng)力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
8637
17
1783
16
1728
56
1577
28
1442
31
Java vs. JavaScript：混亂を解消します
Jun 20, 2025 am 12:27 AM
JavaとJavaScriptは異なるプログラミング言語(yǔ)であり、それぞれ異なるアプリケーションシナリオに適しています。 Javaは大規(guī)模なエンタープライズおよびモバイルアプリケーション開発に使用されますが、JavaScriptは主にWebページ開発に使用されます。
JavaScriptコメント：短い説明
Jun 19, 2025 am 12:40 AM
JavaScriptcommentsEareEssentialential-formaining、およびGuidingCodeexecution.1）single-linecommentseared forquickexplanations.2）多LinecommentsexplaincomplexlogiCorprovidededocumentation.3）clarifyspartsofcode.bestpractic
JSで日付と時(shí)間を操作する方法は？
Jul 01, 2025 am 01:27 AM
JavaScriptで日付と時(shí)間を処理する場(chǎng)合は、次の點(diǎn)に注意する必要があります。1。日付オブジェクトを作成するには多くの方法があります。 ISO形式の文字列を使用して、互換性を確保することをお?jiǎng)幛幛筏蓼埂?2。時(shí)間情報(bào)を取得および設(shè)定して、メソッドを設(shè)定でき、月は0から始まることに注意してください。 3.手動(dòng)でのフォーマット日付には文字列が必要であり、サードパーティライブラリも使用できます。 4.ルクソンなどのタイムゾーンをサポートするライブラリを使用することをお?jiǎng)幛幛筏蓼埂￥长欷椁沃匾圣荪ぅ螗趣蛄?xí)得すると、一般的な間違いを効果的に回避できます。
なぜの下部にタグを配置する必要があるのですか？
Jul 02, 2025 am 01:22 AM
PLACSTHETTHETTHE BOTTOMOFABLOGPOSTORWEBPAGESERVESPAGESPORCICALPURPOSESESFORSEO、userexperience、andDesign.1.IthelpswithiobyAllowingseNStoAccessKeysword-relevanttagwithtagwithtagwithtagwithemaincontent.2.iTimrovesexperiencebyepingepintepepinedeeping
JavaScript vs. Java：開発者向けの包括的な比較
Jun 20, 2025 am 12:21 AM
javascriptispreferredforwebdevelopment、whilejavaisbetterforlge-scalebackendsystemsandroidapps.1）javascriptexcelsininintingtivewebexperiences withitsdynAmicnature anddommanipulation.2）javaofferstruntypyping-dobject-reientedpeatures
JavaScript：効率的なコーディングのためのデータ型の調(diào)査
Jun 20, 2025 am 12:46 AM
javascripthassevenfundamentaldatypes：number、string、boolean、undefined、null、object、andsymbol.1）numberseadouble-precisionformat、有用であるため、有用性の高いものであるため、but-for-loating-pointarithmetic.2）ストリングリムムット、使用率が有用であること
DOMでのイベントの泡立ちとキャプチャとは何ですか？
Jul 02, 2025 am 01:19 AM
イベントキャプチャとバブルは、DOMのイベント伝播の2つの段階です。キャプチャは最上層からターゲット要素までであり、バブルはターゲット要素から上層までです。 1.イベントキャプチャは、AddEventListenerのUseCaptureパラメーターをTrueに設(shè)定することにより実裝されます。 2。イベントバブルはデフォルトの動(dòng)作であり、UseCaptureはfalseに設(shè)定されているか、省略されます。 3。イベントの伝播を使用して、イベントの伝播を防ぐことができます。 4.イベントバブルは、動(dòng)的なコンテンツ処理効率を改善するためにイベント委任をサポートします。 5.キャプチャを使用して、ロギングやエラー処理など、事前にイベントを傍受できます。これらの2つのフェーズを理解することは、タイミングとJavaScriptがユーザー操作にどのように反応するかを正確に制御するのに役立ちます。
JavaとJavaScriptの違いは何ですか？
Jun 17, 2025 am 09:17 AM
JavaとJavaScriptは、異なるプログラミング言語(yǔ)です。 1.Javaは、エンタープライズアプリケーションや大規(guī)模なシステムに適した、靜的に型付けされ、コンパイルされた言語(yǔ)です。 2。JavaScriptは動(dòng)的なタイプと解釈された言語(yǔ)であり、主にWebインタラクションとフロントエンド開発に使用されます。
