วิธีทำให้การประปาส่วนภูมิภาคของคุณทำงานแบบออฟไลน์

คุณอาจรู้ว่า Progressive Web App เป็นอย่างไร ควบคู่ไปกับคุณลักษณะที่เปลี่ยนแปลงวงการอุตสาหกรรมอยู่แล้ว แต่เพื่อการทำซ้ำ ให้เราทำซ้ำคุณลักษณะ PWA ที่น่าทึ่งและไม่ซ้ำใครอีกครั้งซึ่งอาจปฏิวัติประสบการณ์การใช้เว็บ ซึ่งเป็น ความสามารถแบบออฟไลน์ .

 การอ่านที่แนะนำ: กปภ. คืออะไร?

Progressive Web App แตกต่างจากเว็บทั่วไปที่มีการดูเนื้อหาเฉพาะการเชื่อมต่อเท่านั้น Progressive Web App แตกต่างไปจากที่เมื่อ พนักงานบริการ ซึ่งเป็นกลไกในตัวที่รับผิดชอบ คุณลักษณะ ขั้นสูงของ กปภ. ได้โหลดไฟล์ที่จำเป็น ดูแบบออฟไลน์ จะทำให้เป็นไปได้และ ผู้ใช้สามารถโต้ตอบกับแอพได้แม้ในขณะออฟไลน์

เว็บแอปโปรเกรสซีฟและความพร้อมใช้งานออฟไลน์

หากต้องการทราบว่าเอะอะทั้งหมดเกี่ยวกับ กปปส. เกี่ยวกับอะไร โดยเฉพาะอย่างยิ่งความสามารถออฟไลน์ของมัน อาจถึงเวลาที่คุณควรสัมผัสประสบการณ์โดยตรง ในการดูเว็บไซต์หลักของเราแบบออฟไลน์ ซึ่งเป็นการนิยาม กปภ. ด้วย

ด้วย Progressive Web App ประสบการณ์ออฟไลน์ทั้งหมดไม่ต่างจากประสบการณ์ทั่วไปที่มีการเชื่อมต่อ—และนั่นคือความงดงามของมัน นี่เป็นคุณสมบัติที่มีประโยชน์อย่างยิ่งสำหรับร้านค้าอีคอมเมิร์ซที่ต้องการประสบการณ์การท่องเว็บอย่างต่อเนื่อง แม้จะไม่มีการเชื่อมต่อก็ตาม

หมายเหตุ : ไซต์ PWA ทุกแห่งต้องการแคชเริ่มต้นของทรัพยากรที่จำเป็นก่อนที่จะเปิดให้ผู้ใช้ดูแบบออฟไลน์ได้

วิธีทำให้การประปาส่วนภูมิภาคของคุณทำงานแบบออฟไลน์

การลงรายละเอียดทั้งหมดเกี่ยวกับการสร้าง Progressive Web App ที่ทำงานได้อย่างสมบูรณ์และใช้งานแบบออฟไลน์ได้นั้นคงจะซับซ้อน จึงเป็นเหตุให้วันนี้เราจะเริ่มต้นด้วยพื้นฐานก่อน เป้าหมายของเราคือการ สร้างเว็บแอปโปรเกรสซีฟที่ทำงานแบบออฟไลน์

ข้อกำหนดเบื้องต้น

• เว็บไซต์/เว็บแอปธรรมดา อะไรก็ได้ที่มีหนึ่ง index.html หนึ่ง index.js และหนึ่ง style.css จะทำ

เมื่อคุณมีข้อกำหนดเบื้องต้นทั้งหมดแล้ว ก็ถึงเวลาทำให้ PWA แบร์โบนของคุณทำงานแบบออฟไลน์!

การสร้างพนักงานบริการขั้นพื้นฐาน

ก่อนอื่น คุณต้องสร้าง sw.js ซึ่งมีรหัสที่จำเป็นทั้งหมดสำหรับผู้ปฏิบัติงานบริการที่ใช้งานได้

 // sw.js
self.addEventListener ("ดึงข้อมูล", เหตุการณ์ => {
    console.log("คุณดึงข้อมูลแล้ว" + event.url);
});

เมื่อคุณสร้างพนักงานบริการแล้ว ให้ตรวจสอบว่าเบราว์เซอร์ของคุณรองรับและอ้างอิงใน index.js หรือไม่:

 // index.js
if ("serviceWorker" ในตัวนำทาง) {
    navigator.serviceWorker
        .register("sw.js")
        .then(() => console.log("พนักงานบริการที่ลงทะเบียน!"));
}
// รหัสที่เหลือของหน้าของคุณ...

รหัสข้างต้นควรจะง่ายพอ จะตรวจสอบว่าเบราว์เซอร์ของคุณรองรับพนักงานบริการหรือไม่ และหากใช่ ให้ส่งคืน “ พนักงานบริการที่ลงทะเบียนแล้ว! ” โดยการลงทะเบียนพนักงานบริการ คุณกำลังบอกให้เบราว์เซอร์ใช้ sw.js เป็นคำแนะนำสำหรับผู้ปฏิบัติงานบริการของคุณ และในทางกลับกัน เชื่อมโยงพนักงานบริการใหม่กับไซต์ของคุณ

ตอนนี้กลับไปที่ sw.js เพิ่มรหัสต่อไปนี้:

 // sw.js
self.addEventListener ("ดึงข้อมูล", เหตุการณ์ => {
    console.log("คุณดึงข้อมูลแล้ว" + event.url);
});

โค้ดนี้เพิ่ม EventListener ที่จำเป็นสำหรับการดำเนินการต่อไปของเรา ที่จริงแล้ว เบราว์เซอร์จำนวนมากรวมถึง Chrome จะไม่อนุญาตให้ติดตั้ง PWA ของคุณ เว้นแต่จะลงทะเบียนฟังการ fetch ไว้

addEventListener ในโค้ดด้านบนมีสองอาร์กิวเมนต์: เหตุการณ์ที่จะรับฟังและการเรียกกลับที่รับวัตถุเหตุการณ์ เมื่อกิจกรรมนี้พร้อมแล้ว เจ้าหน้าที่บริการของคุณจะเริ่มรับฟังเหตุการณ์การ fetch ซึ่งรวมถึงคำขอ HTML, CSS, JS, เสียง, รูปภาพ และคำขออื่นๆ ที่ส่งไปยัง API/เว็บไซต์อื่นๆ ของเว็บไซต์ของคุณ

การแคชทรัพยากรของคุณ

เพื่อให้ PWA ของคุณสามารถทำงานแบบออฟไลน์ได้ พนักงานบริการจะจ่ายเงินส่วนหนึ่งใน การให้บริการเนื้อหา แต่คุณจะต้องแคชทรัพยากรของเพจด้วย

ในการแคชทรัพยากรของเพจ ขั้นแรกคุณต้องวางแผนขนาดพื้นที่เก็บข้อมูลแคชของคุณ เนื่องจากมีขีดจำกัด

ขีด จำกัด การจัดเก็บแคช

แต่ละเบราว์เซอร์มีวิธีการจัดการที่เก็บข้อมูลแคชต่างกัน อย่างไรก็ตาม เกือบทั้งหมดมีขีดจำกัดของขนาดสำหรับ Cache Storage — ข้อจำกัดนี้มักจะเป็นสาเหตุว่าทำไมคุณจึงไม่เห็นไซต์ขนาดใหญ่และเป็นโรคอ้วน เช่น Amazon แคชทั้งร้านโดยใช้พนักงานบริการ

ขณะนี้ ขีดจำกัดนี้แตกต่างกันไปเนื่องจากขึ้นอยู่กับอุปกรณ์ของผู้ใช้ปลายทาง แต่ปกติแล้วควรจะประมาณ 20% ของพื้นที่ดิสก์สูงสุดของผู้ใช้ของคุณ สำหรับข้อมูลเพิ่มเติม คุณสามารถดูแผนภูมิด้านล่างหรือคู่มืออย่างเป็นทางการของ Google เกี่ยวกับที่เก็บข้อมูลออฟไลน์สำหรับ Progressive Web Apps

ตอนนี้เราได้ขีดจำกัดของ Cache Storage แล้ว ไปที่ แคชทรัพยากรของคุณ

ในการแคชทรัพยากรของเพจของคุณ เราจำเป็นต้องมีอาร์เรย์ส่วนกลางที่มีเนื้อหาทั้งหมดที่เราต้องการจัดเก็บ:

 /* 
  นี่คือข้อมูลทั้งหมดที่เราต้องการบันทึกไว้ในแคช
  เพื่อให้แอปทำงานแบบออฟไลน์/สามารถติดตั้งได้
  เราต้องบันทึกไม่เพียงแต่รูปภาพเท่านั้น แต่ยังต้องบันทึก HTML, JS และ CSS . ของเราอีกด้วย
  เช่นกัน - อะไรก็ได้ที่เราต้องการใช้เมื่อออฟไลน์
*/
สินทรัพย์คงตัว = [
    "https://i.imgur.com/Kbkqr2n.png",
    "https://i.imgur.com/lgLaG0x.png",
    "https://i.imgur.com/0iL8mxP.png",
    "https://i.imgur.com/KDsdYeS.png",
    "https://i.imgur.com/mK50fqL.png",
    "https://i.imgur.com/KYGH2Qa.png",
    "/style.css",
    "/index.html",
    "/offline.html",
    "/"
];

นี่คือที่จัดเก็บทุกอย่างที่คุณต้องการใช้ออฟไลน์ ในตัวอย่างข้างต้น ภาพสองสามภาพแรกคือเส้นทางไปยัง Imgur ซึ่งจัดเก็บโลโก้ของ SimiCart ไว้หลากหลาย

ด้วยขั้นตอนนี้ รายการทรัพยากรที่จำเป็นสำหรับการใช้งานออฟไลน์ของเราพร้อมแล้ว แคชพวกเขาโดยใช้พนักงานบริการ

เพิ่มด้านบนนี้ที่ด้านบนสุดของ sw.js ของคุณ:

 // sw.js

ให้ cache_name = "SimiCart"; // สตริงที่ใช้ระบุแคชของเรา

self.addEventListener ("ติดตั้ง", เหตุการณ์ => {
    console.log("กำลังติดตั้ง...");
    เหตุการณ์. waitUntil(
        แคช
            .open(cache_name)
            .then (แคช => {
                ส่งคืน cache.addAll (สินทรัพย์);
            })
            .catch(err => console.log(err))
    );
});

โดยพื้นฐานแล้ว รหัสนี้สั่งให้เบราว์เซอร์รอ (โดยใช้การ waitUntil() ) สำหรับการแคชของเรา

ด้วยการใช้ API ของแคช โดยเฉพาะ addAll() อาร์เรย์ของเนื้อหาของเราสามารถเพิ่มไปยังแคชได้อย่างง่ายดาย พร้อมที่จะให้บริการโดยพนักงานบริการ อืม คิดอีกที มันไม่พร้อมขนาด นั้น เรายังคงต้องแก้ไขตัวจัดการเหตุการณ์ fetch ของเราเล็กน้อย

นี่คือลักษณะที่ปรากฏในขณะนี้:

 self.addEventListener ("ดึงข้อมูล", เหตุการณ์ => {
    if (event.request.url === "https://www.simicart.com/") {
        // หรือ URL ของแอปของคุณคือ
        event.respondWith(
            fetch(event.request).catch(err => .) ดึงข้อมูล(event.request).catch(err =>
                self.cache.open(cache_name).then(cache => cache.match("/offline.html"))
            )
        );
    } อื่น {
        event.respondWith(
            fetch(event.request).catch(err => .) ดึงข้อมูล(event.request).catch(err =>
                caches.match(event.request).then(response => ตอบกลับ)
            )
        );
    }
});

ตอนนี้ควรมีความชัดเจนในโค้ดด้านบนว่าเรากำลังพยายามแคชทรัพยากรแม้ว่าแอปจะออฟไลน์อยู่ ตรรกะมีดังนี้:

• ขั้นแรก แอปพยายามรับทรัพยากรออนไลน์และตอบกลับด้วยทรัพยากรที่แคชไว้ หากการดึงข้อมูลล้มเหลว (โดยใช้ respondWith() )
• ภายใน respondWith() เราเรียก fetch(event.request) เพื่อพยายามดึงทรัพยากรจากเครือข่าย และเนื่องจากการดึงข้อมูลเป็นไปตาม Promise Promise จะปฏิเสธหากไม่สามารถเชื่อมต่อกับเครือข่ายได้ และในทางกลับกัน ทริกเกอร์ catch() คำสั่ง
• ในคำสั่ง catch() เป็นที่ที่คุณต้องการเรียกทรัพยากรที่แคชไว้

และนั่นแหล่ะ PWA ของคุณควรทำงานแบบออฟไลน์ได้แล้ว! ค่อนข้างง่ายใช่มั้ย

บทสรุป

สิ่งต่างๆ ดำเนินไปอย่างรวดเร็วในโลกของเทคโนโลยี และยิ่งคุณรอการแปลงเป็น PWA หรือรวมฟังก์ชันที่สำคัญ เช่น ความสามารถออฟไลน์เข้ากับ PWA ของคุณนานเท่าใด ค่าเสียโอกาสสำหรับคุณและธุรกิจของคุณก็จะยิ่งสูงขึ้น

ยังมีผู้ให้บริการโซลูชันที่พร้อมเสมอเช่น SimiCart ที่สามารถดูแลทุกความต้องการของคุณ หากคุณเป็นผู้ค้าออนไลน์และกำลังมองหาโซลูชัน Magento PWA ที่สมบูรณ์แบบโดยบังเอิญ คุณมาถูกที่แล้ว เราเป็นผู้ให้บริการโซลูชันที่เป็นที่รู้จักสำหรับเว็บไซต์ Magento eCommerce ที่มีความเชี่ยวชาญมากกว่า 5 ปีในด้าน PWAs และ Native Apps