ดาวน์โหลด offline - ดาวน์โหลดซอร์สโค้ด offline

offline

ซอร์สโค้ดอื่น ๆ

Add Turkish + miscellaneous fixups

ดาวน์โหลด

โปรเจ็กต์นี้ไม่ได้รับการดูแลอย่างแข็งขัน

ออฟไลน์

หมายเหตุสำหรับผู้ใช้ก่อน 0.6.0: ก่อนหน้านี้ออฟไลน์ใช้ไฟล์ที่โฮสต์บน Cloudfront เป็นหนึ่งในวิธีการตรวจสอบสถานะการเชื่อมต่อ วิธีการนี้เลิกใช้แล้วและรูปภาพถูกลบออกไปแล้ว โปรดอัปเกรดเป็นออฟไลน์ 0.7.0+

ปรับปรุงประสบการณ์การใช้งานแอปของคุณเมื่อผู้ใช้ขาดการเชื่อมต่อ

มอนิเตอร์คำขอ ajax เพื่อค้นหาความล้มเหลว
ยืนยันสถานะการเชื่อมต่อโดยขอรูปภาพหรือทรัพยากรปลอม
ดึงคำขอ ajax ที่ทำขึ้นโดยอัตโนมัติในขณะที่การเชื่อมต่อหยุดทำงาน และสร้างใหม่อีกครั้งหลังจากการเชื่อมต่อได้รับการกู้คืนแล้ว
UI เรียบง่ายพร้อมธีมที่สวยงาม
3kb ย่อและบีบอัด

การติดตั้ง

รวมจาวาสคริปต์ หนึ่งในธีม และภาษาใดภาษาหนึ่งบนเว็บไซต์ของคุณ คุณทำเสร็จแล้ว!

หากต้องการใช้เฉพาะ JavaScript API โดยไม่มีตัวบ่งชี้ UI เพียงปล่อยไฟล์ CSS ออก

หากคุณต้องการดูว่าเว็บไซต์มีลักษณะอย่างไร ให้ยกเลิกการเชื่อมต่ออินเทอร์เน็ต หรือลองใช้โปรแกรมจำลอง

ขั้นสูง

หรือคุณสามารถจัดเตรียมการกำหนดค่าบางอย่างโดยตั้งค่า Offline.options หลังจากนำเข้าสคริปต์แล้ว

ตัวเลือก (สามารถระบุเป็นฟังก์ชันได้) โดยมีค่าเริ่มต้น:

 { // เราควรตรวจสอบสถานะการเชื่อมต่อทันทีเมื่อโหลดหน้าเว็บ  checkOnLoad: false, // เราควรตรวจสอบคำขอ AJAX เพื่อช่วยตัดสินใจว่าเรามีการเชื่อมต่อหรือไม่  interceptRequests: true, // เราควรทดสอบซ้ำโดยอัตโนมัติเป็นระยะๆ เมื่อการเชื่อมต่อขัดข้อง (ตั้งค่าเป็น false เพื่อปิดใช้งาน)  เชื่อมต่อใหม่: { // เราควรรอกี่วินาทีก่อนที่จะตรวจสอบอีกครั้ง    InitialDelay: 3, // เราควรรอนานแค่ไหนระหว่างการลองใหม่    ความล่าช้า: (1.5 * ความล่าช้าล่าสุด ต่อยอดที่ 1 ชั่วโมง) }, // เราควรจัดเก็บและพยายามสร้างคำขอใหม่ซึ่งล้มเหลวในขณะที่การเชื่อมต่อขัดข้อง  คำขอ: จริง // เราควรแสดงเกมงูในขณะที่การเชื่อมต่อขัดข้องเพื่อให้ผู้ใช้เพลิดเพลินหรือไม่?  // มันไม่รวมอยู่ในบิลด์ปกติ คุณควรเพิ่ม js/snake.js เพิ่มเติมจาก // offline.min.js  เกม: เท็จ}

คุณสมบัติ

Offline.check() : ตรวจสอบสถานะปัจจุบันของการเชื่อมต่อ

Offline.state : สถานะปัจจุบันของการเชื่อมต่อ 'ขึ้น' หรือ 'ลง'

Offline.on(event, handler, context) : ผูกเหตุการณ์ กิจกรรม:

ขึ้น: การเชื่อมต่อได้เปลี่ยนจากล่างขึ้นบน
down: การเชื่อมต่อเปลี่ยนจากบนลงล่าง
ยืนยันแล้ว: การทดสอบการเชื่อมต่อสำเร็จแล้ว เริ่มทำงานแม้ว่าการเชื่อมต่อจะหมดไปแล้วก็ตาม
ยืนยันแล้ว: การทดสอบการเชื่อมต่อล้มเหลว เริ่มทำงานแม้ว่าการเชื่อมต่อจะหยุดลงแล้วก็ตาม
การตรวจสอบ: เรากำลังทดสอบการเชื่อมต่อ
เชื่อมต่อใหม่: เริ่มต้นแล้ว: เรากำลังเริ่มกระบวนการเชื่อมต่อใหม่
เชื่อมต่อใหม่: หยุด: เราพยายามเชื่อมต่อใหม่เสร็จแล้ว
เชื่อมต่อใหม่: ติ๊ก: เริ่มทำงานทุกวินาทีระหว่างพยายามเชื่อมต่อใหม่ เมื่อไม่มีการตรวจสอบเกิดขึ้น
เชื่อมต่อใหม่: กำลังเชื่อมต่อ: เรากำลังเชื่อมต่อใหม่ในขณะนี้
เชื่อมต่อใหม่: ล้มเหลว: ความพยายามตรวจสอบการเชื่อมต่อใหม่ล้มเหลว
คำขอ: ล้าง: คำขอที่ค้างอยู่ใด ๆ ได้รับการจัดแจงใหม่
คำขอ: จับ: มีการระงับคำขอใหม่

Offline.off(event, handler) : ยกเลิกการเชื่อมโยงเหตุการณ์

กำลังตรวจสอบ

ตามค่าเริ่มต้น Offline จะส่งคำขอ XHR เพื่อโหลด /favicon.ico ของคุณเพื่อตรวจสอบการเชื่อมต่อ หากคุณไม่มีไฟล์ดังกล่าว ไฟล์นั้นจะอยู่ที่ 404 ในคอนโซล แต่อย่างอื่นก็ใช้งานได้ดี (แม้แต่ 404 ก็หมายความว่าการเชื่อมต่อไม่ทำงาน) คุณสามารถเปลี่ยน URL ที่เข้าชมได้ (จุดสิ้นสุดซึ่งจะตอบสนองด้วยความรวดเร็ว 204 นั้นสมบูรณ์แบบ):

 Offline.options = {ตรวจสอบ: {xhr: {url: '/connection-test'}}};

ตรวจสอบให้แน่ใจว่า URL ที่คุณตรวจสอบมีต้นกำเนิดเดียวกันกับเพจของคุณ (วิธีการเชื่อมต่อ โดเมน และพอร์ตทั้งหมดจะต้องเหมือนกัน) ไม่เช่นนั้นคุณจะพบปัญหา CORS คุณสามารถเพิ่มส่วนหัว Access-Control ไปที่ตำแหน่งข้อมูลเพื่อแก้ไขในเบราว์เซอร์รุ่นใหม่ได้ แต่จะยังคงทำให้เกิดปัญหาใน IE9 และรุ่นต่ำกว่า

หากคุณต้องการทำการทดสอบบนโดเมนอื่น ให้ลองใช้วิธีอิมเมจ มันโหลดรูปภาพซึ่งได้รับอนุญาตให้ข้ามโดเมน

 Offline.options = {ตรวจสอบ: {image: {url: 'my-image.gif'} ใช้งานอยู่: 'image'}}

ข้อแม้ประการหนึ่งก็คือ เมื่อใช้วิธีอิมเมจ เราไม่สามารถแยกแยะ 404 ออกจากปัญหาการเชื่อมต่อของแท้ได้ ดังนั้นข้อผิดพลาดใดๆ เลยจะปรากฏเป็นออฟไลน์ว่าเป็นปัญหาการเชื่อมต่อ

ออฟไลน์ยังรวมการตรวจสอบที่เรียกว่า 'up' และอีกรายการหนึ่งเรียกว่า 'down' ซึ่งจะรายงานการขึ้นหรือลงตามลำดับสำหรับการทดสอบเสมอ คุณสามารถเปิดใช้งานได้โดยการตั้งค่าตัวเลือก active เพิ่มแอตทริบิวต์ data ให้กับแท็กสคริปต์ของคุณด้วยชื่อ data-simulate และค่า 'up' หรือ 'down' หรือโดยการตั้งค่า localStorage.OFFLINE_SIMULATE เป็น 'up' หรือ 'down'

เชื่อมต่อใหม่

โมดูลเชื่อมต่อใหม่จะทดสอบการเชื่อมต่ออีกครั้งโดยอัตโนมัติเป็นระยะๆ เมื่อการเชื่อมต่อไม่ทำงาน คำขอ AJAX ที่สำเร็จจะทริกเกอร์การตรวจสอบซ้ำโดยไม่โต้ตอบด้วย (หาก interceptRequests ไม่ใช่เท็จ)

คุณสามารถปิดใช้งานโมดูลเชื่อมต่อใหม่ได้โดยการตั้งค่า reconnect เป็นเท็จ เชื่อมต่อใหม่สามารถกำหนดค่าได้โดยการตั้งค่าตัวเลือกในการตั้งค่าเชื่อมต่อใหม่