Adakah html5 menyokong aplikasi luar talian?-Soal Jawab bahagian hadapan-php.cn

html5 menyokong aplikasi luar talian. Aplikasi luar talian ialah ciri baharu HTML5, yang menggunakan mekanisme caching tempatan supaya pengguna masih boleh menggunakan halaman web atau aplikasi tanpa rangkaian. Agar aplikasi web berfungsi dengan betul semasa di luar talian, semua fail sumber yang membentuk aplikasi web, seperti fail HTML, fail CSS dan fail skrip JavaScript, mesti diletakkan dalam cache setempat supaya apabila pelayan tidak disambungkan ke rangkaian Anda juga boleh menggunakan fail sumber dalam cache tempatan untuk menjalankan aplikasi secara normal.

Adakah html5 menyokong aplikasi luar talian?

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi HTML5, komputer Dell G3.

HTML5 telah menambah aplikasi luar talian Menggunakan mekanisme caching tempatan, aplikasi luar talian membenarkan kami menggunakan halaman web atau aplikasi walaupun tiada rangkaian. Apabila klien tidak mempunyai sambungan setempat dengan pelayan aplikasi web, aplikasi web boleh digunakan secara setempat pada klien untuk melaksanakan operasi berkaitan secara normal.

Untuk membolehkan aplikasi web berfungsi seperti biasa semasa di luar talian, semua fail sumber yang membentuk aplikasi web, seperti fail HTML, fail CSS dan fail skrip JavaScript, mesti diletakkan dalam cache setempat pelayan tidak disambungkan ke rangkaian, fail sumber dalam cache tempatan juga boleh digunakan untuk menjalankan aplikasi web secara normal.

Penggunaan aplikasi luar talian memerlukan langkah berikut:

Pengesanan luar talian (tentukan sama ada Internet disambungkan)
Akses Sumber tertentu
Terdapat ruang setempat untuk menyimpan data (tidak kira sama ada anda berada dalam talian atau tidak, ia tidak menghalang membaca dan menulis)

Gunakan aplikasi web luar talian HTML5

1 Cara menyemak sokongan penyemak imbas

  if(window.applicationCache){
        //浏览器支持离线应用
  }

Salin selepas log masuk

2 >Fail penerangan digunakan untuk menyenaraikan keperluan Caching dan sumber bukan caching untuk kegunaan luar talian. Sambungan fail perihalan dahulunya ialah .manifest, tetapi kini disyorkan untuk menggunakan .appcache, dan fail penerangan perlu dikonfigurasikan dengan jenis MIME yang betul, iaitu, "text/cache-manifest" , yang mesti dikonfigurasikan pada pelayan web (pengekodan fail mestilah UTF-8). Pelayan yang berbeza mempunyai kaedah konfigurasi yang berbeza, yang tidak diperincikan di sini.

Baris pertama mesti bermula dengan rentetan berikut

Selebihnya ialah URL fail yang akan dicache, satu setiap baris (URL relatif adalah relatif kepada fail manifes, bukan relatif dalam fail)

    CACHE MANIFEST

Salin selepas log masuk

Dengan cara ini, semua fail yang disenaraikan dalam fail ini akan dicache

    #以“#”开头的是注释
    common.css
    common.js

Salin selepas log masuk

Dalam manifes, anda boleh menggunakan pengepala kawasan khas untuk mengenal pasti jenis item manifes selepas maklumat pengepala , cache paling mudah di atas tergolong dalam kawasan "CACHE:".

Seperti ini

    #该头信息之后的内容需要缓存    CACHE:
    common.css
    connom.js

Salin selepas log masuk

Fail yang disenaraikan di kawasan bermula dengan "RANGKAIAN:" sentiasa diperolehi dalam talian dan tidak dicache

RANGKAIAN: pengepala The maklumat menyokong kad bebas "*", yang bermaksud bahawa sebarang sumber yang tidak disenaraikan secara eksplisit akan dimuatkan melalui rangkaian

    #该头信息之后的内容不需要缓存，总是从线上获取
    NETWORK:
    a.css
    #表示以name开头的资源都不要缓存
    name/

Salin selepas log masuk

Kandungan dalam kawasan yang bermula dengan "FALLBACK:" menyediakan. penyelesaian yang tidak boleh mendapatkan cache. Laluan sumber alternatif untuk sumber

Kandungan dalam kawasan ini, setiap baris mengandungi dua URL (URL pertama ialah awalan, sebarang sumber yang sepadan tidak akan dicache, URL kedua menunjukkan bahawa ia perlu Sumber Cached)

Senarai boleh mempunyai sebarang bilangan wilayah dan tiada sekatan pada lokasinya.

    FALLBACK:
    name/  example.html

Salin selepas log masuk

3. Bina aplikasi luar talian

Andaikan kita mahu membina aplikasi satu halaman yang mengandungi css, js dan html, dan pada masa yang sama menambah sokongan luar talian pada single ini -permohonan muka surat.
Untuk mengaitkan fail penerangan dengan halaman, anda perlu menggunakan atribut manifes teg html untuk menentukan laluan ke fail penerangan

Langkah pertama dalam membangunkan luar talian aplikasi adalah untuk mengesan sama ada peranti di luar talian

    <html manifest=&#39;./offline.appcche&#39;>

Salin selepas log masuk

Apabila atribut ini benar, ia bermakna dalam talian, dan apabila ia palsu, ia bermakna luar talian

** Nota: penyemak imbas IE6 dan ke atas serta penyemak imbas standard lain menyokong atribut ini**

  if(navigator.onLine){      //联网  }else{      //离线  }

Salin selepas log masuk

acara dalam talian (disokong oleh penyemak imbas IE9)

 window.online = function(){        //需要触发的事件    }

Salin selepas log masuk

apabila Acara ini dicetuskan apabila rangkaian berubah dari dalam talian kepada luar talian Seperti acara dalam talian, acara ini dicetuskan pada tetingkap dan tidak perlu dimuat semula

<. 🎜>

window.offline = function(){      //需要触发的事件  }

Salin selepas log masuk

Cache Aplikasi ialah kawasan cache yang dipisahkan daripada cache penyemak imbas (saiz bergantung pada penyemak imbas tertentu, biasanya 5M)

Perbezaan antara cache aplikasi dan halaman web cache:

Cache aplikasi berfungsi untuk keseluruhan aplikasi web, dan cache halaman web menyediakan satu halaman web

Kelebihan caching aplikasi

离线浏览
速度更快--已缓存资源加载更快
减少负载--浏览器只从服务器下载更新过的文件

一个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();

Salin selepas log masuk

update()一经调用，应用缓存就会去检查描述文件是否更新，触发checking事件，然后页面就会像刚刚加载一样，继续执行后续操作。如果触发了cached事件，则说明应用缓存已经准备就绪，不会再发生其他操作。

swapCache()方法

如果触发了updateready事件，则说明新版本的应用缓存已经可用，需要调用swapCache()方法来启用新的应用缓存。

    applicationCache.onupdateready = function(){
        applicationCache.swapCache();
    };

Salin selepas log masuk

浏览器检查清单文件，以及更新缓存的操作是异步的，因此可能是在载入旧缓存之后进行，因此可能需要载入两次才能显示最新的内容，因此需要提示用户

    window.applicationCache.onupdateready = function(){
        var con = comfirm(&#39;有新内容可用，是否重新加载？&#39;);
        if(con){
            location.reload();
        }
    }

Salin selepas log masuk