Serbuan pada Sambungan API Javascript HTML5 5—Pelanjutan Lain (Cache Aplikasi/Mesej Pelayan/Pemberitahuan Desktop)_html5 Petua Tutorial

Sambungan API utama telah diringkaskan sebelum ini. Sambungan berikut hanya akan memainkan peranan terbesar mereka dalam majlis khas. Ciri-ciri berikut tidak disokong oleh IE tanpa pengecualian. Caching aplikasi dan pemesejan sebelah pelayan disokong dalam pelayar utama yang lain. Pemberitahuan desktop pada masa ini hanya disokong oleh Chrome.
Cache Aplikasi
Banyak kali, kami perlu menyimpan cache beberapa halaman yang tidak kerap berubah untuk meningkatkan kelajuan akses dan untuk sesetengah aplikasi, kami juga mahu menggunakannya di luar talian. Dalam HTML5, anda boleh melaksanakan fungsi ini dengan mudah melalui teknologi yang dipanggil "cache aplikasi".
Dalam pelaksanaan caching aplikasi, HTML5 membenarkan kami mencipta fail manifes cache untuk menjana versi luar talian aplikasi dengan mudah.
Langkah pelaksanaan:
1 Dayakan cache halaman Anda hanya perlu memasukkan atribut manifes dalam html dokumen:

Salin kod

Kod adalah seperti berikut:

...

Setiap halaman yang mengandungi atribut manifes ini akan dicache apabila pengguna mengaksesnya. Jika atribut manifes tidak ditentukan, ia tidak akan dicache (melainkan halaman dinyatakan secara langsung dalam fail manifes). Tiada standard bersatu untuk sambungan fail manifes Sambungan yang disyorkan ialah ".appcache".
2. Konfigurasikan jenis MIME fail manifes pada bahagian pelayan
Fail manifes perlu disokong oleh jenis MIME yang betul Jenis fail ini ialah "teks/cache-manifest". Mesti dikonfigurasikan pada pelayan web yang digunakan. Contohnya: Dalam Apache, anda boleh menambah: AddType text/cache-manifest manifes dalam .htaccess.
3. Tulis fail manifes
Fail manifes ialah fail teks ringkas yang memberitahu penyemak imbas kandungan yang hendak dicache (atau kandungan yang tidak dicache).
Fail manifes mengandungi tiga bahagian berikut:
• MANIFEST CACHE - Fail di bawah pengepala senarai ini akan dicache selepas dimuat turun.
• RANGKAIAN - Fail di bawah tajuk senarai ini memerlukan sambungan ke pelayan dan tidak akan dicache.
• FALLBACK - Memaparkan halaman tertentu jika fail di bawah tajuk senarai ini tidak boleh diakses.
Fail lengkap ditunjukkan dalam contoh di bawah:

Salin kod

Kod adalah seperti berikut:

MANIFEST CACHE
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
RANGKAIAN:
log masuk. asp
FALLBACK:
/html5/ /offline.html

Petua:
# bermula dengan ulasan.
* boleh digunakan untuk mewakili semua sumber atau fail lain. Contohnya:

Salin kod

Kod tersebut adalah seperti berikut:

RANGKAIAN:
*

bermakna semua sumber atau fail tidak akan dicache.
4. Kemas kini cache
Setelah aplikasi dicache, ia akan kekal dicache melainkan perkara berikut berlaku:
• Pengguna memadamkan cache
• Fail manifes diubah suai
• Aplikasi cache diubah suai oleh program
Jadi setelah fail dicache, kecuali untuk pengubahsuaian manusia, penyemak imbas akan terus memaparkan kandungan versi cache, walaupun anda mengubah suai fail pelayan. Untuk membolehkan penyemak imbas mengemas kini cache, anda hanya boleh mengubah suai fail manifes.
: Baris yang bermula dengan "#" ialah baris ulasan, tetapi boleh digunakan untuk tujuan lain. Jika pengubahsuaian anda hanya melibatkan imej atau fungsi JavaScript, perubahan tersebut tidak akan dicache semula. Mengemas kini tarikh dan versi dalam ulasan ialah satu cara untuk mendapatkan penyemak imbas meng-cache semula fail anda
: Penyemak imbas boleh mempunyai banyak had saiz yang berbeza untuk data cache (sesetengah penyemak imbas membenarkan data cache 5M).

Salin kod

Kod tersebut adalah seperti berikut:

Mesej pelayan< ; /strong>
Senario lain yang biasa digunakan ialah: apabila data pada pelayan berubah, bagaimana anda memberitahu pelanggan? Ini telah dilakukan pada masa lalu: halaman mengambil inisiatif untuk menanyakan pelayan untuk kemas kini. Menurut pengenalan sebelum ini, kita tahu bahawa komunikasi dua hala boleh dicapai menggunakan WebSocket. Di sini kami memperkenalkan satu lagi ciri baharu dalam HTML5: Acara Dihantar Pelayan.
Dalam HTML5, objek yang membawa ciri ini ialah objek EventSource.
Langkah-langkahnya adalah seperti berikut:
1 Periksa sokongan penyemak imbas untuk objek EventSource Semua orang tahu ini:

Salin kod

Kod tersebut adalah seperti berikut:

if(typeof(EventSource) !== "undefined")
{
// Ya! sokongan acara dihantar pelayan..
}


2. Kod penghantaran mesej sebelah pelayan
Mesej kemas kini penghantaran sebelah pelayan adalah sangat mudah: selepas menetapkan maklumat pengepala jenis kandungan kepada "text/event-stream" , anda boleh menghantar acara. Ambil kod ASP sebagai contoh:

Salin kod

Kodnya adalah seperti berikut:

<%

Response.ContentType="text/event-stream"

Response.Expires=-1
Response.Write("data: >> Server Time" & now() )
Balas()
%>


3. Kod penerimaan mesej sebelah penyemak imbas. Salin kod

Kodnya adalah seperti berikut:

var source=new EventSource("demo_sse.php"); {

document.getElementById(" result").innerHTML =event.data ""; };

Perihalan kod:

• Buat objek EventSource dan nyatakan URL halaman untuk menghantar kemas kini (di sini ialah demo_see.jsp)

• Setiap kali kemas kini diterima, acara onmessage dicetuskan
• Apabila masa onmessage dicetuskan, data yang diperoleh ditetapkan kepada elemen dengan id="result"
Objek EventSource adalah sebagai tambahan kepada acara onmessage Selain itu, terdapat peristiwa ralat untuk pemprosesan ralat, peristiwa onobuka untuk penubuhan sambungan, dsb.

Pemberitahuan desktop - ciri kuasi HTML5

Fungsi pemberitahuan desktop membenarkan penyemak imbas untuk memberitahu pengguna tentang mesej walaupun ia diminimumkan. Ini adalah gabungan paling semula jadi dengan WebIM. Walau bagaimanapun, satu-satunya penyemak imbas yang menyokong ciri ini pada masa ini ialah Chrome. Tetingkap timbul ialah sesuatu yang semua orang benci, jadi menghidupkan ciri ini memerlukan kebenaran pengguna.

Salin kod
Kodnya adalah seperti berikut:


>fungsi RequestPermission (panggilan balik) {

window.webkitNotifications.requestPermission(callback);

} function showNotification() { //Tentukan sama ada penyemak imbas menyokong pemberitahuan melalui window.webkitNotifications jika (!! window.webkitNotifications) { if (window.webkitNotifications.checkPermission() > 0) {

RequestPermission(showNotification);} else {

var notification =window.webkitNotifications.createNotification ("[ imgurl]","Tajuk", "Body");

notification.ondisplay = function() {
setTimeout('notification.cancel()', 5000
}
notification.show ();
}
}
}



Buka halaman ini dalam penyemak imbas, dan anda akan melihat pop timbul mesej di sudut kanan bawah tetingkap mesej 5 saat.
Ciri ini sangat mudah digunakan, tetapi semasa operasi sebenar, gangguan fungsi pemberitahuan kepada pengguna harus diminimumkan dan kejadian fungsi pemberitahuan harus diminimumkan.

Berikut adalah beberapa pengalaman pakar dalam talian dalam membuat aplikasi ini
:
1 Pastikan hanya satu pemberitahuan muncul apabila berbilang mesej diterima
Masalah ini lebih mudah diselesaikan kerana objek pemberitahuan mempunyai sifat yang dipanggil "replaceId". Selepas menentukan atribut ini, selagi tetingkap pemberitahuan dengan replaceId yang sama muncul, tetingkap pop timbul sebelumnya akan ditimpa. Dalam projek sebenar, semua tetingkap pop timbul diberikan replaceId yang sama. Walau bagaimanapun, perlu diingatkan bahawa tingkah laku penggantian ini hanya sah dalam domain yang sama.
2. Apabila pengguna berada di halaman di mana IM muncul (halaman berada dalam keadaan Fokus), tiada pemberitahuan akan muncul
Masalah ini terutamanya untuk menentukan sama ada tetingkap penyemak imbas berada dalam keadaan Fokus selain mengawasi onfocus dan onblur of the window Selain daripada kejadian itu, nampaknya tiada cara yang lebih baik. Dalam projek, kaedah ini digunakan untuk merekod status Fokus tetingkap, dan kemudian apabila mesej tiba, ia dinilai sama ada untuk muncul tetingkap berdasarkan status Fokus.

Salin kod
Kod tersebut adalah seperti berikut:


$(window).bind ( 'kabur', this.windowBlur).bind( 'focus', this.windowFocus);
Apa yang perlu diambil perhatian apabila menggunakan kaedah ini ialah titik acara pendaftaran acara harus seawal mungkin Jika pendaftaran terlalu lewat, ia akan menjadi mudah untuk salah menilai status apabila pengguna membuka halaman dan kemudian daun.
3. Apabila pengguna menggunakan berbilang tab untuk membuka berbilang halaman dengan IM, tiada pemberitahuan akan muncul selagi satu halaman berada dalam keadaan Fokus
Perkongsian keadaan antara berbilang halaman boleh dicapai melalui storan setempat:
• Apabila tetingkap penyemak imbas adalah Fokus, ubah suai nilai kunci yang ditentukan dalam storan setempat kepada "fokus"
• Apabila tetingkap penyemak imbas adalah Kabur, ubah suai nilai kunci yang ditentukan dalam storan setempat kepada "kabur" .
Perlu diambil perhatian bahawa apabila menukar daripada satu Tab ke Tab lain dalam Chrome, Kabur mungkin ditulis ke storan selepas Fokus, jadi pemprosesan tak segerak diperlukan apabila mengubah suai keadaan Fokus.

Salin kod

Kod adalah seperti berikut:

/*tetingkap pada acara fokus */
//Lengah digunakan untuk menyelesaikan masalah sentiasa membiarkan Fokus menutup peristiwa Kabur Tab lain apabila bertukar antara berbilang Tab
//Nota: Jika tiada Fokus pada dokumen sebelum mengklik Tab, mengklik Tab tidak akan mencetuskan
setTimeout( function(){
Storage.setItem( 'kxchat_focus_win_state', 'focus' );
}, 100);
Storage.setItem( 'kxchat_focus_win_state', 'blur' );

Setelah menyedari perkongsian keadaan di atas, selepas mesej baru tiba, anda hanya perlu menyemak sama ada nilai 'kxchat_focus_win_state' dalam storan tempatan adalah kabur.
4. Cara membenarkan pengguna mengklik pada lapisan terapung pemberitahuan untuk mencari tetingkap sembang tertentu
Tetingkap pemberitahuan menyokong onclick dan respons acara lain, dan skop fungsi respons adalah kepunyaan halaman yang mencipta tetingkap . Kod berikut:

Salin kod Kod tersebut adalah seperti berikut:

var n = dn.createNotification (
img,
tajuk,
kandungan
);
//Pastikan hanya ada satu peringatan
n.replaceId = this.replaceId; n.onclick = function() {
//Aktifkan tetingkap penyemak imbas yang muncul tetingkap pemberitahuan
window.focus();
//Buka tetingkap IM
WM.openWinByID( data ) ;
//Tutup tetingkap pemberitahuan
n.cancel(); ia adalah mudah untuk berinteraksi dengan halaman semasa. Kod di atas menyedari bahawa mengklik pada tetingkap pop timbul akan melompat ke tetingkap penyemak imbas yang sepadan dan membuka tetingkap IM.
: Peristiwa berkaitan pada halaman selalunya mempunyai masa yang tidak menentu, jadi kod kami harus cuba untuk tidak menganggap bahawa urutan peristiwa tertentu dicetuskan adalah pasti. Contohnya, acara kabur dan fokus
di atas

Rujukan praktikal:

Dokumen rasmi:
http://www.w3schools.com/html5/

Tutorial bahasa Cina untuk html5: http: //www.gbin1.com/tutorials/html5-tutorial/