キーポイント
- アプリケーションキャッシュマニフェストにマニフェストファイルを含めないでください。これにより、新しいキャッシュファイルが利用可能であることをWebサイトにほとんど通知しなくなるループを作成できます。
- AppCacheが正しく実行されていることを確認するために、サーバーの.htaccessファイルにアプリケーションタイプマニフェストを常に設(shè)定します。メディアタイプが設(shè)定されていない場合、AppCacheは機能しません。
- マニフェストファイルで指定された個々のファイルが見つからない場合、またはダウンロードできない場合、マニフェストファイル全體が破棄されることに注意してください。これはAppCacheの特別な動作です。
- Webサイトを更新した後、常にマニフェストファイルを更新します。そうしないと、ユーザーは変更が表示されず、以前にキャッシュされたデータのみが表示されます。マニフェストファイルのコメントのバージョン番號または日付を更新して、ユーザーのWebブラウザーにマニフェストファイルの新しいバージョンをダウンロードさせることができます。
HTML5アプリケーションキャッシュ（AppCacheとも呼ばれます）は、最近Web開発者にとってホットトピックになりました。 AppCacheを使用すると、オフライン中にWebサイトの訪問者がWebサイトを閲覧できるようにします。ユーザーのコンピューターのキャッシュに、畫像、スタイルシート、WebフォントなどのWebサイトの一部を保存することもできます。これにより、ウェブサイトの読み込みが速くなり、サーバー上の負荷が削減されます。
AppCacheを使用するには、拡張機能「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の利點に加えて、ユーザーエクスペリエンスの破壊を防ぎ、アプリを破壊するために避けるべき一般的な落とし穴がいくつかあります。
マニフェストファイルにマニフェストファイルをリストしないでください
アプリケーションキャッシュマニフェストにマニフェストファイル自體を含めると、新しいキャッシュファイルが利用可能であることをWebサイトにほとんど通知しないようにし、新しいマニフェストファイルをダウンロードして使用する必要があることをWebサイトに通知することはほとんどありません。古いマニフェストファイルの代わりに。したがって、次の間違いを犯さないように注意してください。
キャッシュページの資格のないリソースはロードされません
<code>CACHE MANIFEST # 2015-01-23 v0.1 manifest.appcache page2.css</code>これは、AppCacheを初めて使用する場合、非常に一般的な間違いです。これは、マニフェストファイルのネットワークフラグが機能する場所です。マニフェストファイルのネットワークセクションは、Webアプリケーションがオンラインにアクセスするために必要なリソースを指定します。
ネットワークフラグの下で指定されているURLは基本的に「ホワイトリスト」です。つまり、このフラグの下で指定されたファイルは、インターネット接続があるときは常にサーバーからロードされます。たとえば、次のコードスニペットにより、 / API /サブツリーに含まれるリソースをロードするリクエストが、キャッシュからではなく、常にネットワークからロードされることが保証されます。
<html lang="en" manifest="manifest.appcache">
常にサーバーの.htaccessファイルにアプリケーションタイプマニフェストを設(shè)定します
マニフェストファイルは、正しいメディアタイプのテキスト/キャッシュマニフェストの下で常に提供する必要があります。メディアタイプが設(shè)定されていない場合、AppCacheは機能しません。
生産サーバーの.htaccessファイルで常に構(gòu)成する必要があります。これは、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ファイルに追加することで同じタスクを?qū)g行できます。
ファイルが見つからないため、リスト全體を廃棄することは避けてください<code>CACHE MANIFEST # 2015-01-23 v0.1 manifest.appcache page2.css</code>
マニフェストファイルで指定された個々のファイルが見つからないか、ダウンロードできない場合、マニフェストファイル全體が破棄されます。これはAppCacheの奇妙な動作であり、AppCacheを使用するWebアプリケーションを設(shè)計するときに留意する必要があります。
例：
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は、マニフェストファイルに関連するものではなく、マニフェストファイルに関連していることです。マニフェストと參照が同じパスにない場合、リソースはロードされず、マニフェストファイルはロードされません。
アプリケーション構(gòu)造が次のようになった場合：
<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>プログラム的にチェックリストのステータスを確認してください
[window.applicationcache.statusをテストして、アプリケーションが更新されたバージョンのキャッシュマニフェストを使用しているかどうかをプログラム的に確認できます。サンプルコードは次のとおりです
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は両刃の剣ですので、使用するときは注意してください！
上記のコンテンツのほとんどは他の場所で導(dǎo)入されており、他にもいくつかの重要なポイントがあります。詳細については、次のリソースをご覧ください。
アプリケーションキャッシュトラップでMDN
ジェイク?アーチボルドのアプリキャッシュはジャーク
- です
- ジェイク?アーチボルドのオフラインレシピ
- HTML5アプリケーションキャッシュ（FAQ） に関する
- FAQ HTML5アプリケーションのキャッシュとは何ですか？なぜそれが重要なのですか？
HTML5アプリケーションキャッシュ（AppCache）は、開発者がブラウザでどのファイルをキャッシュするかを指定し、ユーザーがオフラインにできるようにする機能です。サーバーの負荷を削減し、帯域幅を節(jié)約することにより、Webアプリケーションのパフォーマンスを改善できるため、重要です。また、ユーザーがオフラインである場合でもアプリケーションを?qū)g行し、ユーザーエクスペリエンスを向上させることができます。
HTML5アプリケーションのキャッシュはどのように機能しますか？
HTML5アプリケーションキャッシングは、マニフェストファイルを使用して機能します。このファイルには、ブラウザがオフラインで使用するためにキャッシュするリソースがリストされています。ユーザーがWebページにアクセスすると、ブラウザはマニフェストファイルがそれに関連付けられているかどうかを確認します。その場合、ブラウザはリストされたリソースをダウンロードして保存します。次回ユーザーがWebページにアクセスしたとき、ブラウザはサーバーからダウンロードする代わりにキャッシュされたリソースをロードします。
HTML5アプリケーションキャッシングを使用する際の一般的な落とし穴は何ですか？
HTML5アプリケーションのキャッシングを使用すると、マニフェストファイルを正しく更新せず、キャッシュマニフェストのフォールバックパーツを正しく処理しないようにしますデバイスストレージ。
これらのトラップを避ける方法は？
これらの落とし穴を回避するには、リソースが変更されたら、常にマニフェストファイルを正しく更新してください。マニフェストファイルのネットワークセクションを使用して、キャッシュされないリソースを指定します。また、ユーザーのデバイスストレージを検討し、必要なリソースのみをキャッシュします。HTML5アプリケーションキャッシングの將來は何ですか？
HTML5アプリケーションキャッシュは非推奨であり、サービスワーカーに置き換えられています。サービスワーカーはキャッシュをより多くの制御を提供し、より複雑なシナリオを処理できます。ただし、サービスワーカーは現(xiàn)在、すべてのブラウザではないためサポートされているため、HTML5アプリケーションのキャッシュを理解して使用することが依然として重要です。
マニフェストファイルを作成する方法は？
マニフェストファイルは、キャッシュされるリソースをリストする?yún)g純なテキストファイルです。 MIMEタイプ「テキスト/キャッシュマニフェスト」として提供する必要があります。ファイルの最初の行は「キャッシュマニフェスト」であり、その後にキャッシュされるリソースが続きます。
Webページをマニフェストファイルに関連付ける方法は？
Webページをマニフェストファイルに関連付けるには、Webページの「HTML」タグに「マニフェスト」屬性を追加します。 「マニフェスト」屬性の値は、マニフェストファイルのURLである必要があります。
キャッシュを更新する方法は？
キャッシュを更新するには、マニフェストファイルを変更します。ユーザーがWebページにアクセスするたびに、ブラウザはマニフェストファイルの更新をチェックします。マニフェストファイルが変更された場合、ブラウザは新しいリソースをダウンロードしてキャッシュします。
マニフェストファイルにリストされているリソースをダウンロードできない場合はどうなりますか？
マニフェストファイルにリストされているリソースをダウンロードできない場合、キャッシュ更新プロセス全體が失敗します。ブラウザは引き続き古いキャッシュを使用します。
すべてのリソースにHTML5アプリケーションキャッシュを使用できますか？
技術(shù)的には、すべてのリソースにHTML5アプリケーションキャッシュを使用できますが、これは推奨されません。リソースの過度のキャッシュは、ユーザーのデバイスストレージを埋め、パフォーマンスに悪影響を與える可能性があります。必要なリソースのみをキャッシュすることが最善です。
以上がHTML5アプリケーションキャッシュを使用するときに回避する一般的な落とし穴の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。
ホットAIツール
Undress AI Tool
脫衣畫像を無料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中國語版
中國語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
8641
17
1787
16
1730
56
1581
29
1448
31
Java vs. JavaScript：混亂を解消します
Jun 20, 2025 am 12:27 AM
JavaとJavaScriptは異なるプログラミング言語であり、それぞれ異なるアプリケーションシナリオに適しています。 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で日付と時間を操作する方法は？
Jul 01, 2025 am 01:27 AM
JavaScriptで日付と時間を処理する場合は、次の點に注意する必要があります。1。日付オブジェクトを作成するには多くの方法があります。 ISO形式の文字列を使用して、互換性を確保することをお勧めします。 2。時間情報を取得および設(shè)定して、メソッドを設(shè)定でき、月は0から始まることに注意してください。 3.手動でのフォーマット日付には文字列が必要であり、サードパーティライブラリも使用できます。 4.ルクソンなどのタイムゾーンをサポートするライブラリを使用することをお勧めします。これらの重要なポイントを習(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
DOMでのイベントの泡立ちとキャプチャとは何ですか？
Jul 02, 2025 am 01:19 AM
イベントキャプチャとバブルは、DOMのイベント伝播の2つの段階です。キャプチャは最上層からターゲット要素までであり、バブルはターゲット要素から上層までです。 1.イベントキャプチャは、AddEventListenerのUseCaptureパラメーターをTrueに設(shè)定することにより実裝されます。 2。イベントバブルはデフォルトの動作であり、UseCaptureはfalseに設(shè)定されているか、省略されます。 3。イベントの伝播を使用して、イベントの伝播を防ぐことができます。 4.イベントバブルは、動的なコンテンツ処理効率を改善するためにイベント委任をサポートします。 5.キャプチャを使用して、ロギングやエラー処理など、事前にイベントを傍受できます。これらの2つのフェーズを理解することは、タイミングとJavaScriptがユーザー操作にどのように反応するかを正確に制御するのに役立ちます。
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）ストリングリムムット、使用率が有用であること
JavaScriptアプリケーションのペイロードサイズをどのように削減できますか？
Jun 26, 2025 am 12:54 AM
JavaScriptアプリケーションがゆっくりとロードされ、パフォーマンスが低い場合、問題はペイロードが大きすぎることです。ソリューションには、次のものが含まれます。1。コード分割（コードスプリッティング）を使用し、React.lazy（）またはビルドツールを介して大きなバンドルを複數(shù)の小さなファイルに分割し、最初のダウンロードを減らすために必要に応じてロードします。 2。未使用のコード（Treeshaking）を削除し、ES6モジュールメカニズムを使用して「デッドコード」をクリアして、導(dǎo)入されたライブラリがこの機能をサポートしていることを確認します。 3.リソースファイルを圧縮してマージし、GZIP/BrotliとTerserがJSを圧縮できるようにし、ファイルを合理的にマージし、靜的リソースを最適化します。 4.頑丈な依存関係を交換し、day.jsやフェッチなどの軽量ライブラリを選択します
