ส่วนขยาย API หลักได้รับการสรุปก่อนหน้านี้ ส่วนขยายต่อไปนี้จะมีบทบาทที่ยิ่งใหญ่ที่สุดในโอกาสที่ทุ่มเทเท่านั้น มาดูสั้น ๆ ที่นี่ โดยไม่มีข้อยกเว้น IE ไม่รองรับคุณสมบัติต่อไปนี้ แอปพลิเคชันแคชและข้อความเซิร์ฟเวอร์ได้รับการสนับสนุนในเบราว์เซอร์กระแสหลักอื่น ๆ ปัจจุบันการแจ้งเตือนบนเดสก์ท็อปได้รับการสนับสนุนโดย Chrome เท่านั้น
แคชแอปพลิเคชันหลายครั้งที่เราต้องแคชบางหน้าที่ไม่เปลี่ยนแปลงบ่อยครั้งเพื่อปรับปรุงความเร็วในการเข้าถึง และสำหรับแอปพลิเคชันบางอย่างเราหวังว่าจะใช้พวกเขาแบบออฟไลน์ ใน HTML5 คุณสามารถใช้ฟังก์ชั่นเหล่านี้ได้อย่างง่ายดายผ่านเทคโนโลยีที่เรียกว่าการแคชแอปพลิเคชัน
ในการใช้งานแอปพลิเคชันแคช HTML5 ช่วยให้เราสามารถสร้างไฟล์รายการแคชเพื่อสร้างแอปพลิเคชันแบบออฟไลน์ได้อย่างง่ายดาย
ขั้นตอนการใช้งาน :1. เปิดใช้งานการแคชหน้ามันง่ายมาก คุณจะต้องรวมแอตทริบิวต์รายการไว้ใน HTML ของเอกสาร:
<! doctype html>
<html manifest = "demo.appcache">
-
</html>
แต่ละหน้าที่มีแอตทริบิวต์รายการนี้จะถูกแคชเมื่อผู้ใช้เข้าถึงได้ หากไม่ได้ระบุคุณสมบัติรายการจะไม่ถูกแคช (เว้นแต่ว่าหน้าเว็บจะถูกระบุโดยตรงในไฟล์รายการ) ไม่มีมาตรฐานรวมสำหรับการขยายไฟล์รายการและส่วนขยายที่แนะนำคือ .AppCache
2. กำหนดค่าประเภท MIME ของไฟล์รายการทางฝั่งเซิร์ฟเวอร์
ไฟล์รายการจะต้องได้รับการสนับสนุนโดยประเภท MIME ที่ถูกต้องซึ่งเป็นข้อความ/แคช-manifest จะต้องกำหนดค่าบนเว็บเซิร์ฟเวอร์ที่ใช้ ตัวอย่างเช่น: ใน Apache คุณสามารถเพิ่ม: AddType Text/Cache-Manifest Manifest ใน. htaccess
3. เขียนไฟล์รายการ
ไฟล์รายการเป็นไฟล์ข้อความง่าย ๆ ที่บอกเบราว์เซอร์ว่าจะแคชอะไร (หรือสิ่งที่จะแคช)
ไฟล์รายการมีสามส่วนต่อไปนี้:
• Cache Manifest - ไฟล์ภายใต้ชื่อรายการนี้จะถูกแคชหลังจากดาวน์โหลด
•เครือข่าย - ไฟล์ภายใต้ชื่อรายการนี้จะต้องมีการเชื่อมต่อกับเซิร์ฟเวอร์และจะไม่ถูกแคช
•ทางเลือก - แสดงหน้าเฉพาะหากไฟล์ภายใต้ชื่อรายการนี้ไม่สามารถเข้าถึงได้
ไฟล์ที่สมบูรณ์จะแสดงในตัวอย่างต่อไปนี้:
แคชที่ประจักษ์
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
เครือข่าย:
เข้าสู่ระบบ
ทางเลือก:
/html5 //offline.html
คำใบ้:
ความคิดเห็นของตัวแทนเริ่มต้นด้วย #
* สามารถใช้เพื่อแสดงทรัพยากรหรือไฟล์อื่น ๆ ทั้งหมด ตัวอย่างเช่น:
เครือข่าย:
-
หมายความว่าทรัพยากรหรือไฟล์ทั้งหมดจะไม่ถูกแคช
4. อัปเดตแคช
เมื่อแอปถูกแคชแล้วมันจะยังคงถูกแคชเว้นแต่จะเกิดสถานการณ์ต่อไปนี้:
•ผู้ใช้ลบแคช
•มีการแก้ไขไฟล์รายการ
•แคชแอปพลิเคชันได้รับการแก้ไขโดยโปรแกรม
ดังนั้นเมื่อไฟล์ถูกแคชนอกเหนือจากการดัดแปลงเทียมเบราว์เซอร์จะยังคงแสดงเนื้อหาเวอร์ชันที่แคชต่อไปแม้ว่าคุณจะแก้ไขไฟล์เซิร์ฟเวอร์ เพื่อให้เบราว์เซอร์อัปเดตแคชคุณสามารถแก้ไขไฟล์รายการได้เท่านั้น
: บรรทัดที่เริ่มต้นด้วย # เป็นบรรทัดความคิดเห็น แต่สามารถใช้งานอื่นได้ หากการดัดแปลงของคุณเกี่ยวข้องกับฟังก์ชั่นหนึ่งภาพหรือ JavaScript การเปลี่ยนแปลงเหล่านั้นจะไม่ได้รับการปรับปรุงใหม่ อัปเดตวันที่และเวอร์ชันในความคิดเห็นเป็นวิธีที่จะทำให้เบราว์เซอร์ของคุณกลายเป็นไฟล์ของคุณ
: เบราว์เซอร์สามารถมีข้อมูลแคชจำนวนมากที่มีขีด จำกัด ขนาดที่แตกต่างกัน (เบราว์เซอร์บางตัวอนุญาตให้มีข้อมูลแคช 5M)
<strong> ข้อความเซิร์ฟเวอร์ </strong>
สถานการณ์ทั่วไปอีกประการหนึ่งคือ: เมื่อข้อมูลบนเซิร์ฟเวอร์เปลี่ยนไปจะแจ้งให้ไคลเอนต์ทราบอย่างไร นี่คือการปฏิบัติก่อนหน้านี้: หน้าตรวจสอบอย่างแข็งขันว่ามีการอัปเดตบนเซิร์ฟเวอร์หรือไม่ จากการแนะนำก่อนหน้านี้เรารู้ว่าการใช้ WebSocket สามารถสื่อสารสองทางได้ ที่นี่เราแนะนำคุณสมบัติใหม่อื่น ๆ ใน HTML5: เหตุการณ์เซิร์ฟเวอร์-ส่ง
ใน HTML5 วัตถุที่โฮสต์คุณสมบัตินี้คือวัตถุ EventsOrce
ขั้นตอนการใช้งานมีดังนี้:
1. ตรวจสอบการสนับสนุนของเบราว์เซอร์สำหรับวัตถุ Eventsource ทุกคนรู้เรื่องนี้:
if (typeof (eventsource)! == "undefined")
-
// ใช่! รองรับเหตุการณ์เซิร์ฟเวอร์!
// บางรหัส ...
}อื่น {
// ขอโทษ! ไม่มีการรองรับเหตุการณ์เซิร์ฟเวอร์ ..
-
2. รหัสข้อความฝั่งเซิร์ฟเวอร์
การส่งข้อความอัปเดตทางฝั่งเซิร์ฟเวอร์นั้นง่ายมาก: หลังจากตั้งค่าข้อมูลส่วนหัวประเภทเนื้อหาเป็นข้อความ/เหตุการณ์กระแสคุณสามารถส่งเหตุการณ์ได้ ใช้รหัส ASP เป็นตัวอย่าง:
-
Response.contentType = "ข้อความ/เหตุการณ์สตรีม"
Response.expires = -1
Response.write ("data: >> เวลาเซิร์ฟเวอร์" & ตอนนี้ ())
Response.flush ()
-
3. รับรหัสข้อความทางด้านเบราว์เซอร์
var source = eventsource ใหม่ ("demo_sse.php");
source.onMessage = ฟังก์ชั่น (เหตุการณ์) {
document.getElementById ("ผลลัพธ์"). innerhtml+= event.data+"
-
-
รหัสคำอธิบาย:
•สร้างวัตถุ EventsOrce ระบุ URL หน้าเพื่อส่งการอัปเดต (นี่คือ demo_see.jsp)
•หลังจากได้รับการอัปเดตแต่ละครั้งเหตุการณ์ onMessage จะถูกทริกเกอร์
•เมื่อเวลา onMessage ถูกเรียกใช้ให้ตั้งค่าข้อมูลผลลัพธ์เป็นองค์ประกอบด้วย id = ผลลัพธ์
นอกเหนือจากเหตุการณ์ onMessage วัตถุ EventsOrce ยังจัดการกับเหตุการณ์ onerror เหตุการณ์ที่เกิดขึ้นจากการเชื่อมต่อที่กำหนดโดยการเชื่อมต่อ ฯลฯ
การแจ้งเตือนเดสก์ท็อป - คุณสมบัติเสมือน HTML5คุณลักษณะการแจ้งเตือนเดสก์ท็อปช่วยให้เบราว์เซอร์แจ้งผู้ใช้ข้อความแม้ว่าจะช่วยลดสถานะให้น้อยที่สุด นี่คือการผสมผสานที่เป็นธรรมชาติที่สุดกับ webim อย่างไรก็ตามปัจจุบันมีเฉพาะ Chrome คือเบราว์เซอร์ที่รองรับคุณสมบัตินี้ หน้าต่างป๊อปอัพเป็นสิ่งที่ทุกคนเกลียดดังนั้นคุณต้องได้รับอนุญาตจากผู้ใช้เพื่อเปิดใช้งานคุณสมบัตินี้
<script>
function requestpermission (โทรกลับ) {
window.webkitnotifications.requestpermission (โทรกลับ);
-
ฟังก์ชั่นแสดงให้เห็น () {
// คำว่าเบราว์เซอร์รองรับการแจ้งเตือนผ่าน window.webkitNotifications
if (!! window.webkitnotifications) {
if (window.webkitnotifications.checkpermission ()> 0) {
requestpermission (แสดงให้เห็น);
} อื่น {
var notification = window.webkitnotifications.createnotification ("[imgurl]", "title", "body");
Notification.ondIsplay = function () {
Settimeout ('Notification.cancel ()', 5000);
-
การแจ้งเตือน. show ();
-
-
-
</script>
เปิดหน้านี้ในเบราว์เซอร์ของคุณและคุณจะเห็นหน้าต่างข้อความที่ใช้เวลานาน 5 วินาทีปรากฏขึ้นที่มุมล่างขวาของเดสก์ท็อป
คุณลักษณะนี้ใช้งานง่ายมาก แต่ในการดำเนินการจริงการรบกวนของฟังก์ชั่นการแจ้งเตือนแก่ผู้ใช้ควรย่อให้เล็กสุดและควรลดฟังก์ชั่นการแจ้งเตือน
นี่คือประสบการณ์บางอย่างของผู้เชี่ยวชาญออนไลน์ในการสร้างแอปพลิเคชันนี้ :1. ตรวจสอบให้แน่ใจว่ามีการแจ้งเตือนเพียงครั้งเดียวเมื่อได้รับข้อความหลายข้อความ
ปัญหานี้ง่ายกว่าที่จะแก้ไขได้เนื่องจากวัตถุการแจ้งเตือนมีคุณสมบัติที่ชื่อว่า replentId หลังจากระบุคุณสมบัตินี้ตราบใดที่หน้าต่างการแจ้งเตือนที่มีการแทนที่ตัวเดียวกันปรากฏขึ้นมันจะเขียนทับหน้าต่างที่ผุดขึ้นก่อนหน้านี้ ในโครงการจริงหน้าต่างป๊อปอัพทั้งหมดจะได้รับการแทนที่เหมือนกัน อย่างไรก็ตามควรสังเกตว่าพฤติกรรมการครอบคลุมนี้ใช้ได้เฉพาะในโดเมนเดียวกัน
2. เมื่อผู้ใช้อยู่ในหน้าเว็บที่ IM ปรากฏขึ้น (หน้าอยู่ในสถานะโฟกัส) จะไม่มีการแจ้งเตือน
ปัญหานี้เป็นหลักเพื่อตรวจสอบว่าหน้าต่างเบราว์เซอร์อยู่ในสถานะโฟกัสหรือไม่ ปัจจุบันดูเหมือนว่าจะไม่มีวิธีที่ดีกว่าในการตรวจสอบเหตุการณ์ onfocus และ onblur ของหน้าต่าง ในโครงการวิธีนี้ใช้เพื่อบันทึกสถานะโฟกัสของหน้าต่างแล้วพิจารณาว่าหน้าต่างป๊อปอัปนั้นขึ้นอยู่กับสถานะโฟกัสเมื่อข้อความมาถึงหรือไม่
$ (หน้าต่าง). -bind ('เบลอ', this.windowblur). -bind ('โฟกัส', this.windowfocus);
สิ่งที่คุณต้องให้ความสนใจเมื่อใช้วิธีนี้คือจุดลงทะเบียนเหตุการณ์ควรสูงที่สุดเท่าที่จะทำได้ หากการลงทะเบียนนั้นสายเกินไปมันเป็นเรื่องง่ายที่จะทำให้สถานะการพิจารณาผิดพลาดเมื่อผู้ใช้เปิดหน้าและออก
3. เมื่อผู้ใช้ใช้หลายแท็บเพื่อเปิดหลายหน้าด้วย IM จะไม่มีการแจ้งเตือนใด ๆ จะปรากฏขึ้นตราบใดที่หน้าหนึ่งอยู่ในสถานะโฟกัส
การแบ่งปันสถานะระหว่างหลาย ๆ หน้าสามารถทำได้ผ่านการจัดเก็บในท้องถิ่น:
•เมื่อมุ่งเน้นไปที่หน้าต่างเบราว์เซอร์ให้แก้ไขค่าของคีย์ที่ระบุในที่เก็บข้อมูลท้องถิ่นเพื่อโฟกัส
•เมื่อหน้าต่างเบราว์เซอร์เบลอได้รับการแก้ไขเพื่อแก้ไขค่าของคีย์ที่ระบุในที่เก็บข้อมูลท้องถิ่นเพื่อเบลอ
ควรสังเกตว่าเมื่อเปลี่ยนจากแท็บหนึ่งไปอีกแท็บในโครเมี่ยมอาจเขียนเบลอไปยังการจัดเก็บมากกว่าโฟกัสดังนั้นจึงต้องใช้การประมวลผลแบบอะซิงโครนัสเมื่อปรับเปลี่ยนสถานะโฟกัส
/*หน้าต่างในเหตุการณ์โฟกัส*/
// ใช้การหน่วงเวลาคือการแก้ปัญหาการสลับระหว่างหลายแท็บให้โฟกัสแทนที่เหตุการณ์เบลอของแท็บอื่น ๆ
// หมายเหตุ: หากคุณไม่ได้มุ่งเน้นไปที่เอกสารก่อนคลิกแท็บการคลิกแท็บจะไม่เรียกโฟกัส
settimeout (function () {
Storage.setItem ('kxchat_focus_win_state', 'โฟกัส');
}, 100);
/*หน้าต่างในเหตุการณ์เบลอ*/
Storage.setItem ('KXCHAT_FOCUS_WIN_STATE', 'Blur');
หลังจากใช้การแชร์สถานะข้างต้นหลังจากข้อความใหม่มาถึงคุณจะต้องตรวจสอบว่าค่าของ 'kxchat_focus_win_state' ในพื้นที่เก็บข้อมูลท้องถิ่นนั้นเบลอและถ้ามันเบลอหน้าต่างป๊อปอัพจะปรากฏขึ้น
4. วิธีการให้ผู้ใช้คลิกที่เลเยอร์ลอยตัวเพื่อค้นหาหน้าต่างแชทเฉพาะ
หน้าต่างการแจ้งเตือนรองรับการตอบสนองเหตุการณ์เช่น onclick และขอบเขตของฟังก์ชั่นในฟังก์ชั่นการตอบสนองเป็นของหน้าเว็บที่สร้างหน้าต่าง รหัสต่อไปนี้:
var n = dn.createnotification (
img,
ชื่อ,
เนื้อหา
-
// ตรวจสอบให้แน่ใจว่ามีการเตือนเพียงอย่างเดียว
n.replaceid = this.replaceid;
n.onclick = function () {
// เปิดใช้งานหน้าต่างเบราว์เซอร์ที่ปรากฏขึ้นในหน้าต่างการแจ้งเตือน
window.focus ();
// เปิดหน้าต่าง IM
Wm.openwinbyid (ข้อมูล);
// ปิดหน้าต่างการแจ้งเตือน
N.Cancel ();
-
วัตถุหน้าต่างที่เข้าถึงได้ในฟังก์ชั่นการตอบสนอง onclick เป็นของหน้าสร้างขึ้นในปัจจุบันดังนั้นจึงสามารถโต้ตอบกับหน้าปัจจุบันได้อย่างง่ายดาย รหัสด้านบนใช้งานที่คลิกที่หน้าต่างป๊อปอัปจะข้ามไปที่หน้าต่างเบราว์เซอร์ที่เกี่ยวข้องและเปิดหน้าต่าง IM
: เหตุการณ์ที่เกี่ยวข้องในหน้ามักจะเป็นอนุกรมเวลาอย่างไม่มีกำหนดดังนั้นรหัสของเราจึงไม่คิดว่าลำดับของการเรียกเหตุการณ์บางอย่างนั้นแน่นอน ตัวอย่างเช่นเหตุการณ์เบลอข้างต้นและโฟกัส
การอ้างอิงเชิงปฏิบัติ:เอกสารอย่างเป็นทางการ: http://www.w3schools.com/html5/
การสอนภาษาจีนสำหรับ html5: http://www.gbin1.com/tutorials/html5-tutorial/