Ekstensi API utama telah dirangkum sebelumnya. Ekstensi berikut hanya akan memainkan peran terbesar dalam acara -acara khusus. Mari kita lihat sebentar di sini. Tanpa kecuali, IE tidak mendukung fitur -fitur berikut. Cache aplikasi dan pesan server didukung di browser utama lainnya. Pemberitahuan desktop saat ini hanya didukung oleh Chrome.
Cache aplikasiSering kali, kita perlu menyimpan beberapa halaman yang tidak sering diubah untuk meningkatkan kecepatan akses; Dan untuk beberapa aplikasi, kami juga berharap dapat menggunakannya secara offline. Di HTML5, Anda dapat dengan mudah mengimplementasikan fungsi -fungsi ini melalui teknologi yang disebut caching aplikasi.
Dalam implementasi cache aplikasi, HTML5 memungkinkan kami untuk membuat file manifes yang di -cache untuk dengan mudah menghasilkan versi offline dari aplikasi.
Langkah Implementasi :1. Mengaktifkan caching halaman, sangat sederhana. Anda hanya perlu memasukkan atribut manifes dalam HTML dokumen:
<! Doctype html>
<html manifest = "demo.appcache">
...
</html>
Setiap halaman yang berisi atribut manifes ini akan di -cache ketika pengguna mengaksesnya. Jika properti manifes tidak ditentukan, itu tidak akan di -cache (kecuali halaman web secara langsung ditentukan dalam file manifes). Tidak ada standar terpadu untuk ekstensi file manifes, dan ekstensi yang disarankan adalah .AppCache.
2. Mengkonfigurasi jenis MIME dari file manifes di sisi server
File manifes perlu didukung oleh tipe MIME yang benar, yang merupakan teks/cache-manifest. Itu harus dikonfigurasi di server web yang digunakan. Misalnya: Di Apache, Anda dapat menambahkan: AddType Text/cache-manifest manifes di .htaccess.
3. Tulis file manifes
File manifes adalah file teks sederhana yang memberi tahu browser apa yang harus disimpan (atau apa yang harus disimpan).
File manifes berisi tiga bagian berikut:
• Cache Manifest - File di bawah judul daftar ini akan di -cache setelah diunduh.
• Jaringan - File di bawah judul daftar ini akan memerlukan koneksi ke server dan tidak akan di -cache.
• Fallback - Menampilkan halaman tertentu jika file di bawah judul daftar ini tidak dapat diakses.
File lengkap ditampilkan dalam contoh berikut:
Cache Manifest
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
JARINGAN:
login.asp
Fallback:
/html5 //offline.html
petunjuk:
Komentar representatif dimulai dengan #.
* Dapat digunakan untuk mewakili semua sumber daya atau file lainnya. Misalnya:
JARINGAN:
*
Ini berarti bahwa semua sumber daya atau file tidak akan di -cache.
4. Perbarui cache
Setelah aplikasi di -cache, itu akan tetap di -cache kecuali situasi berikut terjadi:
• Pengguna menghapus cache
• File manifes dimodifikasi
• cache aplikasi dimodifikasi oleh program
Jadi setelah file di -cache, selain modifikasi buatan, browser akan terus menampilkan konten versi yang di -cache, bahkan jika Anda memodifikasi file server. Untuk membuat browser memperbarui cache, Anda hanya dapat memodifikasi file manifes.
: Garis yang dimulai dengan # adalah garis komentar, tetapi dapat memiliki kegunaan lain. Jika modifikasi Anda hanya melibatkan satu gambar atau fungsi JavaScript, perubahan itu tidak akan dikecam. Perbarui tanggal dan versi dalam komentar adalah cara untuk membuat browser Anda mengulang file Anda
: Browser dapat memiliki banyak data cache dengan batas ukuran yang berbeda (beberapa browser memungkinkan data di -cache 5M).
<strong> pesan server </strong>
Skenario umum lainnya adalah: Ketika data di server berubah, bagaimana memberi tahu klien? Ini adalah praktik sebelumnya: halaman secara aktif memeriksa apakah ada pembaruan di server. Menurut pengantar sebelumnya, kita tahu bahwa menggunakan WebSocket dapat mencapai komunikasi dua arah. Di sini kami memperkenalkan fitur baru lain di HTML5: Acara Sent-Sent.
Di HTML5, objek yang meng -host fitur ini adalah objek Eventource.
Langkah -langkah untuk digunakan adalah sebagai berikut:
1. Periksa dukungan browser untuk objek sumber daya, semua orang tahu ini:
if (typeof (eventsource)! == "tidak ditentukan")
{
// Ya! Dukungan acara server-sent!
// Beberapa kode ...
}kalau tidak {
// Maaf! Tidak ada dukungan acara server-sent ..
}
2. Kode pesan pengiriman sisi server
Mengirim pesan pembaruan di sisi server sangat sederhana: Setelah mengatur informasi header tipe konten ke teks/event-stream, Anda dapat mengirim acara. Ambil kode ASP sebagai contoh:
<%
Response.contentType = "Teks/Event-stream"
Response.expires = -1
Response.write ("data: >> waktu server" & now ())
Response.flush ()
%>
3. Terima kode pesan di sisi browser
var source = eventsource baru ("demo_sse.php");
Source.onMessage = function (event) {
document.geteLementById ("result"). innerHtml+= event.data+"
";
};
Deskripsi Kode:
• Buat objek Eventource, menentukan URL halaman untuk mengirim pembaruan (di sini adalah demo_see.jsp)
• Setelah setiap pembaruan diterima, acara OnMessage dipicu
• Saat waktu OnMessage dipicu, atur data yang dihasilkan ke elemen dengan ID = hasil
Selain peristiwa OnMessage, objek Eventource juga menangani peristiwa kesalahan OnError, acara OnOpen yang ditetapkan oleh koneksi, dll.
Pemberitahuan Desktop - Fitur Quasi -HTML5Fitur pemberitahuan desktop memungkinkan browser untuk memberi tahu pengguna pesan bahkan jika meminimalkan status. Ini adalah kombinasi paling alami dengan Webim. Namun, saat ini hanya Chrome adalah browser yang mendukung fitur ini. Jendela pop-up adalah sesuatu yang dibenci semua orang, jadi Anda perlu mendapatkan izin pengguna untuk mengaktifkan fitur ini.
<script>
fungsi requestPerMission (callback) {
window.webkitnotifications.RequestperMission (callback);
}
fungsi ditampilkan () {
// Istilah apakah browser mendukung pemberitahuan melalui window.webkitnotification
if (!! window.webkitnotifications) {
if (window.webkitnotifications.checkpermission ()> 0) {
RequestPerMisi (Ditunjukkan);
} kalau tidak {
var notification = window.webkitnotification.createnotification ("[imgurl]", "title", "body");
notification.ondisplay = function () {
setTimeout ('notification.cancel ()', 5000);
}
notification.show ();
}
}
}
</script>
Buka halaman ini di browser Anda dan Anda akan melihat jendela pesan yang berlangsung selama 5 detik muncul di sudut kanan bawah desktop.
Fitur ini sangat mudah digunakan, tetapi dalam operasi aktual, gangguan fungsi pemberitahuan kepada pengguna harus diminimalkan dan terjadinya fungsi pemberitahuan harus diminimalkan.
Berikut adalah beberapa pengalaman ahli online dalam membuat aplikasi ini :1. Pastikan hanya satu pemberitahuan yang muncul ketika beberapa pesan diterima;
Masalah ini lebih mudah dipecahkan karena objek pemberitahuan memiliki properti bernama RepliverID. Setelah menentukan properti ini, selama jendela pemberitahuan dengan RepliceID yang sama muncul, itu akan menimpa jendela yang sebelumnya muncul. Dalam proyek yang sebenarnya, semua jendela pop-up diberi ganti yang identik. Namun, perlu dicatat bahwa perilaku cakupan ini hanya berlaku di domain yang sama.
2. Ketika pengguna berada di halaman tempat IM muncul (halaman berada dalam keadaan fokus), tidak akan ada pemberitahuan;
Masalah ini terutama untuk menentukan apakah jendela browser dalam keadaan fokus. Saat ini, tampaknya tidak ada cara yang lebih baik untuk memantau peristiwa Onfocus dan Onblur dari jendela. Dalam proyek, cara ini digunakan untuk merekam status fokus jendela, dan kemudian menentukan apakah jendela pop-up didasarkan pada status fokus ketika pesan tiba.
$ (window) .bind ('blur', this.windowblur) .bind ('focus', this.windowfocus);
Apa yang perlu Anda perhatikan saat menggunakan metode ini adalah bahwa titik pendaftaran acara harus setinggi mungkin. Jika pendaftaran sudah terlambat, mudah untuk menyebabkan kesalahan status ketika pengguna membuka halaman dan pergi.
3. Ketika pengguna menggunakan beberapa tab untuk membuka beberapa halaman dengan IM, tidak ada pemberitahuan akan muncul selama satu halaman dalam keadaan fokus;
Berbagi negara antara beberapa halaman dapat dicapai melalui penyimpanan lokal:
• Saat berfokus pada jendela browser, ubah nilai kunci yang ditentukan di penyimpanan lokal untuk fokus.
• Ketika jendela browser blur dimodifikasi untuk memodifikasi nilai kunci yang ditentukan dalam penyimpanan lokal menjadi kabur.
Perlu dicatat bahwa ketika beralih dari satu tab ke tab lainnya di Chrome, Blur dapat ditulis ke penyimpanan lebih dari fokus, sehingga membutuhkan pemrosesan asinkron saat memodifikasi status fokus.
/*jendela pada acara fokus*/
// Gunakan penundaan adalah menyelesaikan masalah beralih di antara beberapa tab, selalu biarkan fokus menimpa peristiwa blur dari tab lainnya.
// Catatan: Jika Anda tidak fokus pada dokumen sebelum mengklik tab, mengklik tab tidak akan memicu fokus.
setTimeout (function () {
Storage.setitem ('kxchat_focus_win_state', 'fokus');
}, 100);
/*Window on blur event*/
Storage.setitem ('kxchat_focus_win_state', 'blur');
Setelah menerapkan berbagi keadaan di atas, setelah pesan baru tiba, Anda hanya perlu memeriksa apakah nilai 'kxchat_focus_win_state' di penyimpanan lokal kabur, dan jika kabur, jendela pop-up akan muncul.
4. Cara Membiarkan Pengguna mengklik Notification Floating Layer untuk menemukan jendela obrolan tertentu
Jendela pemberitahuan mendukung respons acara seperti OnClick, dan ruang lingkup fungsi dalam fungsi respons milik halaman tempat jendela dibuat. Kode berikut:
var n = dn.createNotification (
img,
judul,
isi
);
// Pastikan hanya ada satu pengingat
n.replaceid = this.replaceid;
n.onClick = function () {
// Aktifkan jendela browser yang muncul di jendela pemberitahuan
window.focus ();
// buka jendela IM
Wm.openwinbyid (data);
// tutup jendela pemberitahuan
n.cancel ();
};
Objek jendela yang diakses dalam fungsi respons OnClick milik halaman yang saat ini dibuat, sehingga dapat dengan mudah berinteraksi dengan halaman saat ini. Kode di atas mengimplementasikan yang mengklik pada jendela pop-up akan melompat ke jendela browser yang sesuai dan buka jendela IM.
: Peristiwa terkait di halaman seringkali merupakan seri waktu tanpa batas waktu, sehingga kode kami mencoba untuk tidak berasumsi bahwa urutan memicu peristiwa tertentu pasti. Misalnya, acara kabur dan fokus di atas
Referensi Praktis:Dokumen Resmi: http://www.w3schools.com/html5/
Tutorial Cina untuk html5: http://www.gbin1.com/tutorials/html5-tutorial/