ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5でオフラインWebアプリケーションを作成するためのサンプルコード

HTML5でオフラインWebアプリケーションを作成するためのサンプルコード

黄舟オリジナル: 2017-03-15 15:57:241703ブラウズ

オフラインアプリケーションキャッシュ機能を使用すると、Web アプリケーション

に必要なすべてのリソースを指定できるため、ブラウザは HTML ドキュメントをロードするときにそれらをすべてダウンロードできます。

1) ブラウザキャッシュを定義します:

オフラインキャッシュを有効にする - マニフェストファイルを作成し、html 要素の manifest 属性に追加します。リファレンス

オフラインアプリケーションでキャッシュされるリソースを指定します - マニフェストファイルの先頭または CACHE 領域にリソースをリストします。

リソースが利用できない場合に表示されるバックアップコンテンツを指定します。 — マニフェストファイルの F

ALLBACK 領域にコンテンツをリストします。

は、常にサーバーから要求されるリソースを指します。 - マニフェストファイルの BETWORK 領域にコンテンツをリストします。

例: まず、fruit.appcache

    CACHE MANIFEST  
      
    example.html  
    banana100.png  
      
    FALLBACK:  
    * 404.html  
      
    NETWORK:  
    cherries100.png  
      
    CACHE:   
    apple100.png

のマニフェストファイルを作成します。次に、HTMLファイルが指定されている場合は、404.htmlファイルを作成します。までにリンクはオフラインキャッシュにありません。代わりにそれを使用できます

<!DOCTYPE HTML>
<html manifest="fruit.appcache">
    <head>
        <title>Offline</title>
    </head>
    <body>
      <h1>您要的页面找不到了！</h1>
      或许您可以帮我们找找孩子！
    </body>
</html>

最後に、オフラインキャッシュを有効にする必要がある h

tml ファイルを作成します

<!DOCTYPE HTML>
<html manifest="fruit.appcache">
    <head>
        <title>Example</title>
        <style>
            img {border: medium double black; padding: 5px; margin: 5px;}
        </style>
    </head>
    <body>
        <img id="imgtarget" src="banana100.png"/>
        <p>
            <button id="banana">Banana</button>
            <button id="apple">Apple</button>
            <button id="cherries">Cherries</button>
        </p>
        <a href="otherpage.html">Link to another page</a>
        <script>
            var buttons = document.getElementsByTagName("button");
            for (var i = 0; i < buttons.length; i++) {
                buttons[i].onclick = handleButtonPress;
            }
            
            function handleButtonPress(e) {
                document.getElementById("imgtarget").src = e.target.id + "100.png";
            }
        </script>
    </body>
</html>

2) ブラウザを検出します
ステータス

window.na vigator.online - if ブラウザがオフラインであると判断された場合は false を返し、ブラウザがオンラインである可能性がある場合は true を返します

3)オフラインキャッシュを使用する:

window.applicationCache プロパティを呼び出すことで、オフラインキャッシュを直接使用できます。これにより、ApplicationCache

オブジェクト

が返されます。 update() - リスト内の項目が最新バージョンをダウンロードしていることを確認するための update
ache() —— 現在のキャッシュを新しいキャッシュと交換します。 status—キャッシュのステータスを返します。

3.1) ApplicationCache オブジェクトの status 属性の値

0— —UNCACHED—このドキュメントはキャッシュされていないか、

1—IDLE—キャッシュアクションは実行されません。

2——CHECKING——浏览器正在检查清单或清单所指定项目的更新；

3——DOWNLOADING——浏览器正在下载清单或内容的更新；

4——UPDATEREADY——有更新后的缓存数据可用；

5——OBSOLETE——缓存数据已经废弃，不应该再使用了。这是请求清单文件时返回HTTP状态码4xx所造成的

（通常表明清单文件已被移走/删除）；

3.2）ApplicationCache对象定义的事件，在缓存状态改变时触发：

checking——浏览器正在获取初始清单或者检查清单更新；

noupdate——没有更新可用，当前的清单是最新版；

downloading——浏览器正在下载清单里指定的内容；

progress——在下载阶段中触发；

cached——清单里指定的所有内容都已被下载和缓存了；

updateready——新资源已下载并且可以使用了；

obsolete——缓存已废弃；

CACHE MANIFEST

CACHE: 
example.html
banana100.png
cherries100.png
apple100.png

FALLBACK:
* offline2.html

<!DOCTYPE HTML>
<html manifest="fruit.appcache">
    <head>
        <title>Example</title>
        <style>
            img {border: medium double black; padding: 5px; margin: 5px;}
            p {margin-top: 10px; margin-bottom: 10px}
            table {margin: 10px; border-collapse: collapse;}
            th, td {padding: 2px;}
            body > * {float: left;}
        </style>
    </head>
    <body>
        <p>
            <img id="imgtarget" src="banana100.png"/>
            <p>
                <button id="banana">Banana</button>
                <button id="apple">Apple</button>
                <button id="cherries">Cherries</button>
            </p>
            <p>
                <button id="update">Update</button>
                <button id="swap">Swap Cache</button>
            </p>
            The status is: <span id="status"></span>
        </p>
        <table id="eventtable" border="1">
            <tr><th>Event Type</th></tr>
        </table>
        <script>
            var buttons = document.getElementsByTagName("button");
            for (var i = 0; i < buttons.length; i++) {
                buttons[i].onclick = handleButtonPress;
            }
            
            window.applicationCache.onchecking =  handleEvent;
            window.applicationCache.onnoupdate = handleEvent;
            window.applicationCache.ondownloading = handleEvent;
            window.applicationCache.onupdateready = handleEvent;
            window.applicationCache.oncached = handleEvent;
            window.applicationCache.onobselete = handleEvent;
            
            function handleEvent(e) {
                document.getElementById("eventtable").innerHTML +=
                    "<tr><td>" + e.type + "</td></td>";
                checkStatus();
            }
            
            function handleButtonPress(e) {
                switch (e.target.id) {
                    case &#39;swap&#39;:
                        window.applicationCache.swapCache();
                        break;
                    case &#39;update&#39;:
                        window.applicationCache.update();
                        checkStatus();
                        break;
                    default:
                        document.getElementById("imgtarget").src = e.target.id
                            + "100.png";
                }
            }
            
            function checkStatus() {
                var statusNames = ["UNCACHED", "IDLE", "CHECKING", "DOWNLOADING",
                                   "UPDATEREADY", "OBSOLETE"];
                var status = window.applicationCache.status;
                document.getElementById("status").innerHTML = statusNames[status];
            }
            
        </script>
    </body>
</html>

以上がHTML5でオフラインWebアプリケーションを作成するためのサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：html5でのドラッグ＆ドロップのサンプルコードを詳しく紹介次の記事：html5でのドラッグ＆ドロップのサンプルコードを詳しく紹介

続きを見る