ホームページ > 記事 > ウェブフロントエンド > html5 はオフラインアプリケーションをサポートしていますか?

html5 はオフラインアプリケーションをサポートしていますか?

青灯夜游オリジナル: 2022-08-01 17:57:192086ブラウズ

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=&#39;./offline.appcche&#39;>

オフラインアプリケーション開発の最初のステップは次のとおりです。デバイスがオフラインかどうかを検出するため

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(&#39;有新内容可用，是否重新加载？&#39;);
        if(con){
            location.reload();
        }
    }

html5 はオフライン アプリケーションをサポートしていますか?

HTML5 オフライン Web アプリケーションを使用する

アプリケーション キャッシュ

applicationCache API

update()方法

swapCache()方法

関連記事

html5 はオフラインアプリケーションをサポートしていますか?

アプリケーションキャッシュ