แอปออฟไลน์แรกในแง่ดีพร้อม Vuex
TL;DR — ใช้ ปลั๊กอิน Vuex ร่วมกับ localForage เพื่อคงข้อมูลแอปพลิเคชันอย่างง่ายดายในลักษณะเชิงบวก
คุณอาจสงสัยว่าเบื้องหลังคำศัพท์เหล่านี้คืออะไร ดังนั้นเรามาเริ่มอธิบายทีละคำกันดีกว่า
การล็อคในแง่ดี
กลยุทธ์การควบคุมภาวะพร้อมกันซึ่งถือว่าความขัดแย้งโดยทั่วไปจะไม่เกิดขึ้น ดังนั้น ขั้นแรกให้ทำเสมือนว่าการดำเนินการเสร็จสมบูรณ์และเปลี่ยนกลับในกรณีที่เกิดความล้มเหลว กลยุทธ์นี้ค่อนข้างแพร่หลายในปัจจุบันในโดเมนการพัฒนาเว็บ คุณสามารถดูการทำงานได้เมื่อคุณ "ถูกใจ" บน Facebook เมื่อคุณเขียนโพสต์บนบล็อกบน Medium และในเกือบทุกที่ ในการใช้งานอย่างชาญฉลาด คุณต้องจำไว้ว่าต้องจัดการกับความล้มเหลวด้วย และวิธีเปลี่ยนกลับเมื่อการดำเนินการล้มเหลว ประสบการณ์ผู้ใช้ที่ชาญฉลาด กลยุทธ์นี้เป็นสิ่งที่ดีที่สุด เนื่องจากผู้ใช้ไม่ต้องรอให้คำขอเสร็จสิ้น
ออฟไลน์ก่อน
เราอาศัยอยู่ในโลกที่ขาดการเชื่อมต่อและใช้พลังงานจากแบตเตอรี่ แต่เทคโนโลยีและแนวทางปฏิบัติที่ดีที่สุดของเรานั้นเป็นสิ่งที่หลงเหลือจากอดีตที่เชื่อมต่ออยู่ตลอดเวลาและขับเคลื่อนอย่างต่อเนื่อง — offlinefirst.org
ความสามารถแบบออฟไลน์เป็นสิ่งจำเป็นและไม่ยากอย่างที่คุณจะเห็นในโพสต์บนบล็อกนี้ โดยพื้นฐานแล้วหมายความว่าแอปพลิเคชันของคุณสามารถทำงานได้แม้ไม่มีการเชื่อมต่อเลย แน่นอนว่าไม่ได้หมายความว่าจะมีการจัดเตรียมคุณสมบัติทั้งหมดไว้ แต่เป็นชุดย่อย เพื่อจุดประสงค์นี้ เราสามารถใช้ Service Workers, Web SQL, IndexedDB และเครื่องมืออื่นๆ อีกมากมายที่เบราว์เซอร์มอบให้ ฉันใช้ localForage เป็นนามธรรมสำหรับการจัดเก็บแบบออฟไลน์ แทนที่จะทำงานกับ API ระดับต่ำ
วูเอกซ์
รูปแบบการจัดการสถานะ + ไลบรารีสำหรับแอปพลิเคชัน Vue.js มันทำหน้าที่เป็นร้านค้ารวมศูนย์สำหรับส่วนประกอบทั้งหมดในแอปพลิเคชัน — vuex.vuejs.org
Vuex คล้ายกับ Redux และร้านค้ารวมศูนย์อื่นๆ มาก ฉันจะพยายามทำให้ทุกอย่างเป็นแบบสแต็กที่ไม่เชื่อเรื่องพระเจ้า เนื่องจากแนวคิดเกือบจะเหมือนกันในร้านค้าส่วนกลางทุกแห่ง สิ่งที่สำคัญที่สุดสำหรับเราคือความสามารถในการสมัครรับการเปลี่ยนแปลงที่เกิดขึ้นกับร้านค้า วิธีนี้ทำให้เราสามารถแคชข้อมูลที่เกี่ยวข้องหรือซิงค์กลับไปยังเซิร์ฟเวอร์ของเราได้ ตราบใดที่คุณสามารถสมัครรับการเปลี่ยนแปลงได้ ห้องสมุดอื่นก็สามารถทำได้
เริ่มจากส่วนง่ายๆ กันก่อน นั่นคือการแคชข้อมูลสำหรับการทำงานแบบออฟไลน์
ก่อนอื่น เราต้องการบริการสำหรับจัดการการทำงานของแคช เรียกอีกอย่างว่าที่เก็บข้อมูล ควรส่งออกฟังก์ชัน 3 รายการสำหรับจัดการสถานะ รับ ตั้งค่า และลบ ทุกอย่างที่นี่ค่อนข้างตรงไปตรงมา สิ่งเดียวที่เหลืออยู่ที่นี่คือการเขียนฟังก์ชันเพื่อแมปวัตถุสถานะกับวัตถุแคช โดยปกติแล้วคุณต้องการลบฟิลด์ชั่วคราวบางฟิลด์หรือจัดการสถานะไม่ทางใดก็ทางหนึ่ง
ตอนนี้เราต้องสร้างปลั๊กอินที่ใช้บริการพื้นที่เก็บข้อมูลของเราเพื่ออัปเดตสถานะแคชในเกือบทุกการเปลี่ยนแปลง อีกครั้งที่การใช้งานนั้นง่ายมาก สิ่งเดียวที่เหลืออยู่ที่นี่คือการเขียนฟังก์ชันที่ตัดสินใจว่าควรอัพเดตแคชหรือไม่ขึ้นอยู่กับการกลายพันธุ์ (หากจำเป็นก็รวมถึงสถานะด้วย)
สถานะของเรากำลังถูกแคชในทุกการกลายพันธุ์ แต่เรายังต้องโหลดมันเมื่อแอปพลิเคชันเริ่มทำงาน มาเพิ่มการกลายพันธุ์ซึ่งกำหนดสถานะจากแคชและปลั๊กอินของเรา (สำหรับตอนนี้ โปรดเพิกเฉยต่อปลั๊กอินการซิงค์ เราจะดำเนินการต่อไป) การกลายพันธุ์ loadFromCache ได้รับวัตถุแคชและอัปเดตสถานะตามนั้น (ใน vuex คุณต้องวนซ้ำคุณสมบัติต่างๆ เพื่อเหตุผลเชิงปฏิกิริยา) ฉันยังต้องการเก็บแฟล็กไว้ในสถานะเพื่อทราบว่าสถานะนั้นเริ่มต้นจากแคชแล้วหรือไม่
สิ่งเดียวที่เหลืออยู่คือการเรียก loadFromCache การกลายพันธุ์ทุกครั้งที่แอปบูทขึ้นมา คุณสามารถใช้มันเป็นการ์ดป้องกัน Vue Router หรือตามที่คุณต้องการก็ได้ ด้านล่างนี้เป็นแนวคิดทั่วไปของการนำไปปฏิบัติ
ขณะนี้แอปพลิเคชันของเราเก็บข้อมูลทั้งหมดไว้ในที่จัดเก็บแคช เพื่อให้แน่ใจว่าเราสามารถเข้าถึงข้อมูลได้แม้ว่าจะไม่มีการเชื่อมต่อก็ตาม ตอนนี้เราต้องตรวจสอบให้แน่ใจว่าข้อมูลที่เกี่ยวข้องถูกส่งไปยังเซิร์ฟเวอร์ ปลั๊กอินที่นี่เต็มไปด้วยตรรกะทางธุรกิจ แต่ฉันจะให้โครงร่างเพื่อให้คุณสามารถเขียนของคุณเองได้ ปลั๊กอินสมัครรับการเปลี่ยนแปลงของร้านค้า และขึ้นอยู่กับประเภทการกลายพันธุ์ คุณต้องส่งคำขอตามลำดับไปยังเซิร์ฟเวอร์ ในกรณีที่เกิดความล้มเหลว ปลั๊กอินจะต้องส่งการเปลี่ยนแปลงไปยังร้านค้าเพื่อแจ้งให้แอปพลิเคชันทราบว่าคำขอล้มเหลว
แค่นั้นแหละ เราทำได้แล้ว! หวังว่าตอนนี้คุณคงเข้าใจแล้วว่าแอปพลิเคชันออฟไลน์แรกในแง่ดีคืออะไร และคุณจะทำให้สำเร็จได้ง่ายเพียงใด นอกจากนี้ยังช่วยปรับปรุงประสบการณ์ผู้ใช้เนื่องจากแอปพลิเคชันมีความทนทานต่อสิ่งต่างๆ มากขึ้น เช่น การเชื่อมต่อ เวลาร้องขอที่ยาวนาน ฯลฯ ในท้ายที่สุดผู้ใช้ของคุณจะได้รับประสบการณ์ที่ดีขึ้นมาก ทำให้พวกเขากลับมาและมีส่วนร่วมกับแอปของคุณมากขึ้น
เราได้ใช้เทคนิคนี้และอื่นๆ อีกมากมายในขณะที่สร้าง Daily Go ลองดูสิ!
