html5 はオフライン アプリケーションをサポートします。オフライン アプリケーションは HTML5 の新機能であり、ローカル キャッシュ メカニズムを使用して、ユーザーがネットワークなしでも Web ページやアプリケーションを使用できるようにします。 Web アプリケーションがオフライン時に正常に動作するには、HTML ファイル、CSS ファイル、JavaScript スクリプト ファイルなど、Web アプリケーションを構成するすべてのリソース ファイルをローカル キャッシュに配置し、サーバーが接続されていないときにもローカル キャッシュに保存する必要があります。ネットワーク ローカル キャッシュ内のリソース ファイルを使用して、アプリケーションを通常どおり実行することもできます。
このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。
HTML5 にはオフライン アプリケーションが追加されました。オフライン アプリケーションでは、ローカル キャッシュ メカニズムを使用することで、ネットワークがない場合でも Web ページやアプリケーションを使用できるようになります。クライアントが Web アプリケーションのサーバーとローカル接続していない場合、Web アプリケーションをクライアント上でローカルに使用して、関連する操作を通常どおり実行できます。
Web アプリケーションがオフライン時に正常に動作するには、HTML ファイル、CSS ファイル、JavaScript スクリプト ファイルなど、Web アプリケーションを構成するすべてのリソース ファイルをローカル キャッシュに配置する必要があります。サーバーがネットワークに接続されていない場合でも、ローカル キャッシュ内のリソース ファイルを使用して Web アプリケーションを通常どおり実行できます。
オフライン アプリケーションを使用するには、次の手順が必要です。
オフライン検出 (インターネットに接続されているかどうかを判断します)
特定のリソースにアクセスする
データを保存するためのローカル領域があります (オンラインかどうかに関係なく、読み取りと書き込みには支障ありません)
HTML5 オフライン Web アプリケーションを使用する
1. ブラウザのサポートを確認する方法
if(window.applicationCache){
//浏览器支持离线应用
}2. 説明ファイルについて
description ファイルは、オフライン時に使用するためにキャッシュする必要のないキャッシュとリソースをリストするために使用されます。
以前は説明ファイルの拡張子は .manifest でしたが、現在は .appcache を使用することが推奨されており、説明ファイルは正しい MIME タイプ、つまり「text/cache-manifest」で構成する必要があります。これは Web サーバー上で構成する必要があります (ファイルのエンコードは UTF-8 である必要があります)。サーバーごとに構成方法も異なりますが、ここでは詳しく説明しません。
最初の行は、次の文字列で始まる必要があります
CACHE MANIFEST
残りは、キャッシュするファイルの URL を 1 行に 1 つずつ指定します (相対 URL は、マニフェスト ファイルに対する相対的なものであり、マニフェスト ファイルに対する相対的なものではありません)。ファイル )
#以“#”开头的是注释
common.css
common.jsこのようにして、このファイルにリストされているすべてのファイルがキャッシュされます
マニフェストでは、特別な領域のヘッダーを使用して、ヘッダー情報。最も上の単純なキャッシュは「CACHE:」領域に属します。
Like this
#该头信息之后的内容需要缓存 CACHE:
common.css
connom.js「NETWORK:」で始まる領域にリストされているファイルは常にオンラインで取得され、キャッシュされません
NETWORK: ヘッダー情報のサポートワイルドカード "*" は、明示的にリストされていないリソースがネットワーク経由で読み込まれることを示します。
#该头信息之后的内容不需要缓存，总是从线上获取
NETWORK:
a.css
#表示以name开头的资源都不要缓存
name/"FALLBACK:" で始まる領域のコンテンツは、キャッシュされたリソースが取得できない場合のバックアップを提供します。リソース パス
この領域のコンテンツ。各行には 2 つの URL が含まれます (最初の URL はプレフィックスであり、一致するリソースはキャッシュされません。2 番目の URL はキャッシュする必要があるリソースを示します)
FALLBACK:
name/ example.htmlリストには任意の数のエリアを含めることができ、場所に制限はありません。
3. オフライン アプリケーションを構築する
CSS、JS、HTML を含む単一ページのアプリケーションを構築し、同時にこの単一ページのアプリケーションにオフライン サポートを追加するとします。 -ページアプリケーション。
説明ファイルをページに関連付けるには、html タグのマニフェスト属性を使用して説明ファイルへのパスを指定する必要があります
<html manifest='./offline.appcche'>
オフライン アプリケーション開発の最初のステップは次のとおりです。デバイスがオフラインかどうかを検出するため
HTML5 に navigator.onLine 属性が追加されました
この属性が true の場合はオンラインを意味し、値が false の場合はオフラインを意味します
if(navigator.onLine){ //联网 }else{ //离线 }** 注: IE6 以降のブラウザおよびその他の標準ブラウザは、この属性をサポートします。 **
- オンライン イベント (IE9 ブラウザでサポート)
ネットワークがオフラインの場合 このイベントは、ネットワークがオンラインになったときにトリガーされます。このイベントは、更新せずにウィンドウ上でトリガーされます。
window.online = function(){ //需要触发的事件 }オフライン イベント (IE9 ブラウザーのサポート)
ネットワークがオンラインからオフラインに変わったとき このイベントは、オンライン イベントと同様に、ウィンドウ上でトリガーされ、更新する必要がない場合にトリガーされます
window.offline = function(){ //需要触发的事件 }アプリケーション キャッシュ
アプリケーション キャッシュ (アプリケーション キャッシュ) は、ブラウザのキャッシュから分離されたキャッシュ領域です (サイズは特定のブラウザによって異なり、通常は 5M)
アプリケーション キャッシュと Web の違いページ キャッシュ:
- アプリケーション キャッシュは Web アプリケーション サービス全体であり、Web ページ キャッシュは単一の Web ページを処理します。
- アプリケーション キャッシュは、指定されたページに必要な指定されたリソースのみをキャッシュします。 (手動で制御可能)、どの Web ページにも Web ページ キャッシュがあります (ブラウザのデフォルト動作)
- ブラウザのキャッシュがクリアされてもアプリケーション キャッシュは消えません
- アプリケーション キャッシュは消えませんWeb キャッシュと同様に、古いデータは最新の新しいデータに置き換えられます
- アプリケーション キャッシュはオフラインでアクセスできますが、Web ページ キャッシュはオンラインでアクセスする必要があります
- アプリケーション キャッシュは信頼性が高く、制御可能です、Web ページのキャッシュは制御できません
アプリケーション キャッシュの利点
- 离线浏览
- 速度更快--已缓存资源加载更快
- 减少负载--浏览器只从服务器下载更新过的文件
一个web应用首次下载并缓存之后，任何加载请求都优先来自于缓存，因此可以实现离线缓存。如果不需要使用离线缓存了，就需要在服务器端删除描述文件，或者删除HTML页面中的manifest属性。
一旦应用被缓存，则缓存始终不变。那么，怎样才能改变缓存
- 用户清空应用缓存
- manifest文件被修改
- 使用update()方法更新缓存
如果服务器上的文件有所修改的话，那么修改描述文件中注释行的日期或者版本号是一个不错的使浏览器重新缓存文件的办法
此外，我们还可以使用HTML5提供的API来操作和更新缓存
applicationCache API
applicationCache API是一个操作应用缓存的接口。新的window.applicationCache对象可以触发一系列与缓存状态相关的事件。
这个对象有一个status属性，值为常量，表示缓存状态
- 0：没有与页面相关的应用缓存（未缓存）
- 1：应用缓存未得到更新（空闲）
- 2：正在下载描述文件并检查更新（检查中）
- 3：应用缓存正在下载描述文件中指定的资源（下载中）
- 4：应用缓存已经更新了资源，而且所有资源都已下载完毕，可以通过swapCache()来使用了（更新就绪）
- 5：应用缓存的描述文件不存在了，页面无法再访问应用缓存（已过期）
这个对象有以下事件，表示其状态的改变
- 每次载入一个设置了manifest属性的HTML文件，首先会触发checking事件
- 如果应用程序已经缓存，并且清单文件没有改动，则浏览器触发noupdate事件
- 如果应用程序已经缓存，并且清单文件发生改动，则浏览器触发downloading事件，下载完毕后触发updateready事件
- 如果应用程序未缓存，则downloading事件和progress事件都会触发，但是下载完成后触发cached事件而不是updateready事件
- 如果处于离线，无法检测清单状态，则触发error事件，如果引用一个不存在的清单文件，也会触发error事件
- 如果处于在线，应用也缓存了，但是清单文件不存在，则会触发obsolete事件，并将应用程序从缓存中清除。
一般来讲，这些事件会随着页面加载按上述顺序依次触发
update()方法
通过update()方法也可以手工干预，让应用缓存为检查更新而触发上述事件
applicationCache.update();
update()一经调用，应用缓存就会去检查描述文件是否更新，触发checking事件，然后页面就会像刚刚加载一样，继续执行后续操作。如果触发了cached事件，则说明应用缓存已经准备就绪，不会再发生其他操作。
swapCache()方法
如果触发了updateready事件，则说明新版本的应用缓存已经可用，需要调用swapCache()方法来启用新的应用缓存。
applicationCache.onupdateready = function(){
applicationCache.swapCache();
};浏览器检查清单文件，以及更新缓存的操作是异步的，因此可能是在载入旧缓存之后进行，因此可能需要载入两次才能显示最新的内容，因此需要提示用户
window.applicationCache.onupdateready = function(){
var con = comfirm('有新内容可用，是否重新加载？');
if(con){
location.reload();
}
}相关推荐：《html视频教程》
以上がhtml5 はオフライン アプリケーションをサポートしていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ReactのSEOに優しい性質：検索エンジンの可視性の向上Apr 26, 2025 am 12:27 AMはい、Reactapplicationscanbeseo-frendlywithpropertrategies.1）useServer-siderendering（ssr）withtoolslikenext.jstogeneratefullhtmlforindexing.2）explmentStaticSiteSite-generation（SSG）forcontent-heavysitestoprededopRederpageattiTiTeTietLe.3）
Reactのパフォーマンスボトルネック：遅いコンポーネントの識別と最適化Apr 26, 2025 am 12:25 AM反応性能のボトルネックは、主に非効率的なレンダリング、不必要な再レンダリング、コンポーネントの内部重量の計算によって引き起こされます。 1）ReactDevtoolsを使用して遅いコンポーネントを見つけ、React.Memoの最適化を適用します。 2）EFFECTを最適化して、必要に応じて実行することを確認します。 3）メモリ処理には、usememoとusecallbackを使用します。 4）大きなコンポーネントを小さなコンポーネントに分割します。 5）ビッグデータリストについては、仮想スクロールテクノロジーを使用してレンダリングを最適化します。これらの方法により、Reactアプリケーションのパフォーマンスを大幅に改善できます。
Reactの代替品：他のJavaScriptUIライブラリとフレームワークの探索Apr 26, 2025 am 12:24 AMパフォーマンスの問題、学習曲線、またはさまざまなUI開発方法の探索のために、誰かが反応する代替品を探すことができます。 1）Vue.JSは、統合の容易さと軽度の学習曲線で称賛され、小規模および大規模なアプリケーションに適しています。 2）AngularはGoogleによって開発されており、強力なタイプのシステムと依存噴射を備えた大規模なアプリケーションに適しています。 3）Svelteは、ビルド時に効率的なJavaScriptにコンパイルすることにより、優れたパフォーマンスとシンプルさを提供しますが、そのエコシステムはまだ成長しています。代替案を選択するときは、プロジェクトのニーズ、チームエクスペリエンス、プロジェクトの規模に基づいて決定する必要があります。
Keys and Reactの調整アルゴリズム：パフォーマンスの向上Apr 26, 2025 am 12:21 AMKeysinReactarespecialattributedignedInedInementionArrays forStableIdentity、重要なもの、curtialforthereconciliationalgorithmはfichupdatedoMedifficly.1）keyshelpreprackChanges、追加、OrRemovalsinlists.2）
Reactプロジェクトに必要なボイラープレートコード：セットアップオーバーヘッドの削減Apr 26, 2025 am 12:19 AMtoreduceSetUpOverHeadinReactProjects、usetoolslikecreatereActapp（cra）、next.js、gatsby、orstarterkits、およびmaintainAmodularStructur E.1）crasimplifiessetupwithasinglecommand.2）next.jsandgatsbyoffermorefeaturesbutalearningcurve.3）starterkitsprovidecomprehensi
USESTATEの理解（）：React React Neact State Managementの包括的なガイドApr 25, 2025 am 12:21 AMusestate（）isareacthookusedtomeStateinfunctionalComponents.1）itInitializeSandUpDatestate、2）colledatttheToplevelofComponents、3）canleadto'stalestate'ifnotusedly、and4）cancancancancancanbeoptimizeduptimizeduptimizedususecall -calleSuperesteSteSteSteSteSteSteSteSteStateSupteStateSuptateSuptatedates
Reactを使用することの利点は何ですか？Apr 25, 2025 am 12:16 AMReactisPopularduetoitsComponent Architecture、Virtualdom、Richecosystem、およびdeclarativenature.1）コンポーネントベースのarchitectureallowsforReusable anduipieces、改善様式および測定可能性。
Reactでのデバッグ：一般的な問題の特定と解決Apr 25, 2025 am 12:09 AMdebugReactapplicationivivivity、EtheseStrategies：1）AddressPropdrillingWithContextapiorredux.2）HandLeasynchronousoperations withuthutateanduseeffect、Abortcontrollertopreventraceconditions.3）最適化合物を使用して、最適化合物を使用してください
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター
SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
ホットトピック
7722
15164214139652128925123329