Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

เหตุการณ์พุช

Matt Gaunt

ถึงตอนนี้ เราได้พูดถึงการสมัครรับข้อมูลของผู้ใช้และการส่งข้อความ Push ไปแล้ว ขั้นตอนถัดไปคือการรับข้อความพุชนี้ในอุปกรณ์ของผู้ใช้และแสดงการแจ้งเตือน (รวมถึงทำงานอื่นๆ ที่เราอาจต้องการทำ)

เหตุการณ์พุช

เมื่อได้รับข้อความ ระบบจะส่งเหตุการณ์พุชใน Service Worker

โค้ดสำหรับการตั้งค่า Listener เหตุการณ์พุชควรคล้ายกับ Listener เหตุการณ์อื่นๆ ที่คุณเขียนใน JavaScript ดังนี้

self.addEventListener('push', function(event) {
    if (event.data) {
    console.log('This push event has data: ', event.data.text());
    } else {
    console.log('This push event has no data.');
    }
});

ส่วนที่แปลกที่สุดของโค้ดนี้สำหรับนักพัฒนาซอฟต์แวร์ส่วนใหญ่ที่เพิ่งเริ่มใช้ Service Worker คือตัวแปร self self ใช้กันโดยทั่วไปใน Web Worker ซึ่งเป็น Service Worker โดย self หมายถึงขอบเขตส่วนกลาง คล้ายกับ window ในหน้าเว็บ แต่สำหรับ Web Worker และ Service Worker self จะหมายถึงตัวผู้ปฏิบัติงานเอง

ในตัวอย่างข้างต้น คุณอาจมองว่า self.addEventListener() เป็นการเพิ่ม Listener เหตุการณ์ลงใน Service Worker เอง

ในตัวอย่างเหตุการณ์พุช เราจะตรวจสอบว่ามีข้อมูลหรือไม่ และพิมพ์บางอย่างลงในคอนโซล

คุณสามารถแยกวิเคราะห์ข้อมูลจากเหตุการณ์พุชได้ด้วยวิธีอื่นๆ ดังนี้

// Returns string
event.data.text()

// Parses data as JSON string and returns an Object
event.data.json()

// Returns blob of data
event.data.blob()

// Returns an arrayBuffer
event.data.arrayBuffer()

ผู้ใช้ส่วนใหญ่ใช้ json() หรือ text() โดยขึ้นอยู่กับสิ่งที่คาดหวังจากแอปพลิเคชัน

ตัวอย่างนี้แสดงวิธีเพิ่ม Listener เหตุการณ์พุชและวิธีเข้าถึงข้อมูล แต่ขาดฟังก์ชันการทำงานที่สำคัญมาก 2 อย่าง โดยไม่แสดงการแจ้งเตือนและไม่ใช้ event.waitUntil()

รอจนถึง

สิ่งหนึ่งที่ควรทำความเข้าใจเกี่ยวกับ Service Worker คือคุณควบคุมเวลาที่โค้ด Service Worker จะทำงานได้เพียงเล็กน้อย เบราว์เซอร์จะตัดสินใจว่าจะปลุกและสิ้นสุดการทำงานเมื่อใด วิธีเดียวที่คุณจะบอกเบราว์เซอร์ได้ว่า "ฉันกำลังยุ่งมากกับการทำสิ่งสำคัญ" คือการส่ง Promise ไปยังเมธอด event.waitUntil() ซึ่งจะทำให้เบราว์เซอร์ทำให้ Service Worker ทำงานต่อไปจนกว่าสัญญาที่คุณส่งเข้ามาจะได้รับการดำเนินการ

สำหรับเหตุการณ์พุช มีข้อกำหนดเพิ่มเติมว่าคุณต้องแสดงการแจ้งเตือนก่อนที่สัญญาที่คุณส่งเข้ามาจะได้รับการดำเนินการ

ตัวอย่างเบื้องต้นของการแสดงการแจ้งเตือนมีดังนี้

self.addEventListener('push', function(event) {
    const promiseChain = self.registration.showNotification('Hello, World.');

    event.waitUntil(promiseChain);
});

การเรียกใช้ self.registration.showNotification() เป็นวิธีที่แสดงการแจ้งเตือนแก่ผู้ใช้ และจะแสดงผลสัญญาที่จะได้รับการแก้ไขเมื่อมีการแสดงการแจ้งเตือนแล้ว

เพื่อให้ตัวอย่างนี้ชัดเจนที่สุด ฉันได้กำหนดสัญญานี้ให้กับตัวแปรที่ชื่อว่า promiseChain จากนั้นระบบจะส่งข้อมูลนี้ไปยัง event.waitUntil() เราทราบดีว่าคำอธิบายนี้ค่อนข้างยาว แต่เราพบปัญหาหลายอย่างที่เกิดขึ้นจากการเข้าใจผิดเกี่ยวกับสิ่งที่ควรส่งไปยัง waitUntil() หรือเป็นผลมาจากเชนสัญญาที่เสียหาย

ตัวอย่างที่ซับซ้อนมากขึ้นซึ่งมีคำขอเครือข่ายสำหรับข้อมูลและการติดตามเหตุการณ์พุชด้วย Analytics อาจมีลักษณะดังนี้

self.addEventListener('push', function(event) {
    const analyticsPromise = pushReceivedTracking();
    const pushInfoPromise = fetch('/api/get-more-data')
    .then(function(response) {
        return response.json();
    })
    .then(function(response) {
        const title = response.data.userName + ' says...';
        const message = response.data.message;

        return self.registration.showNotification(title, {
        body: message
        });
    });

    const promiseChain = Promise.all([
    analyticsPromise,
    pushInfoPromise
    ]);

    event.waitUntil(promiseChain);
});

ในที่นี้เราจะเรียกใช้ฟังก์ชันที่แสดงผล Promise pushReceivedTracking() ซึ่งในตัวอย่างนี้ เราจะสมมติว่าจะส่งคำขอเครือข่าย ไปยังผู้ให้บริการวิเคราะห์ นอกจากนี้ เรายังส่งคำขอเครือข่าย รับการตอบกลับ และแสดงการแจ้งเตือนโดยใช้ข้อมูลการตอบกลับสำหรับชื่อและข้อความของการแจ้งเตือนด้วย

เราสามารถตรวจสอบว่า Service Worker ยังคงทำงานอยู่ขณะที่งานทั้ง 2 อย่างนี้เสร็จสิ้นโดยการรวม Promise เหล่านี้เข้ากับ Promise.all() ระบบจะส่ง Promise ที่ได้ไปยัง event.waitUntil() ซึ่งหมายความว่าเบราว์เซอร์จะรอจนกว่า Promise ทั้ง 2 รายการจะเสร็จสิ้นก่อนที่จะตรวจสอบว่ามีการแสดงการแจ้งเตือนและสิ้นสุด Service Worker แล้ว

หมายเหตุ: หากคุณพบว่าเชน Promise ของคุณสร้างความสับสนหรือยุ่งเหยิงเล็กน้อย เราพบว่าการแบ่งสิ่งต่างๆ ออกเป็นฟังก์ชันจะช่วยลดความซับซ้อนได้ นอกจากนี้ เราขอแนะนำบล็อกโพสต์นี้โดย Philip Walton เกี่ยวกับการแยก Promise Chain ประเด็นสำคัญที่ควรทราบคือคุณควรทดลองเขียนและเชื่อมโยง Promise เพื่อค้นหาสไตล์ที่เหมาะกับคุณ

เหตุผลที่เราควรให้ความสำคัญกับ waitUntil() และวิธีใช้ก็คือ ปัญหาที่พบบ่อยที่สุดอย่างหนึ่งที่นักพัฒนาแอปต้องเผชิญคือเมื่อเชนสัญญาไม่ถูกต้อง/เสียหาย Chrome จะแสดงการแจ้งเตือน "เริ่มต้น" นี้

Chrome จะแสดงการแจ้งเตือน "เว็บไซต์นี้ได้รับการอัปเดตในเบื้องหลัง" เฉพาะเมื่อได้รับข้อความ Push และเหตุการณ์ Push ใน Service Worker ไม่แสดงการแจ้งเตือนหลังจากที่ Promise ที่ส่งไปยัง event.waitUntil() เสร็จสิ้นแล้ว

สาเหตุหลักที่นักพัฒนาซอฟต์แวร์มักจะติดปัญหานี้คือโค้ดของตนมักจะเรียกใช้ self.registration.showNotification() แต่ไม่ได้ดำเนินการใดๆ กับ Promise ที่แสดงผล ซึ่งส่งผลให้การแจ้งเตือนเริ่มต้นแสดงขึ้นเป็นระยะๆ ตัวอย่างเช่น เราอาจนำผลลัพธ์ของ self.registration.showNotification() ในตัวอย่างด้านบนออก และเราอาจเห็นการแจ้งเตือนนี้

self.addEventListener('push', function(event) {
    const analyticsPromise = pushReceivedTracking();
    const pushInfoPromise = fetch('/api/get-more-data')
    .then(function(response) {
        return response.json();
    })
    .then(function(response) {
        const title = response.data.userName + ' says...';
        const message = response.data.message;

        self.registration.showNotification(title, {
        body: message
        });
    });

    const promiseChain = Promise.all([
    analyticsPromise,
    pushInfoPromise
    ]);

    event.waitUntil(promiseChain);
});

คุณจะเห็นว่านี่เป็นสิ่งที่พลาดได้ง่ายๆ

โปรดทราบว่าหากเห็นการแจ้งเตือนดังกล่าว ให้ตรวจสอบเชนสัญญาและ event.waitUntil()

ในส่วนถัดไป เราจะมาดูสิ่งที่เราทำได้เพื่อจัดรูปแบบการแจ้งเตือนและเนื้อหาที่เราแสดงได้

เหตุการณ์พุช

เหตุการณ์พุช

รอจนถึง

ขั้นตอนต่อไป

Code Labs