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

เมื่อถึงจุดนี้ เราจะพูดถึงการติดตามผู้ใช้และการส่งข้อความพุช ขั้นตอนถัดไปคือการ รับข้อความ 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.');
    }
});

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

ในตัวอย่างข้างต้น self.addEventListener() อาจหมายถึงการเพิ่ม Listener เหตุการณ์ ตัวโปรแกรมทำงานของบริการเอง

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

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

// 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 ก็คือคุณจะควบคุมได้น้อยว่าจะ ระบบจะเรียกใช้รหัสโปรแกรมทำงานของบริการ เบราว์เซอร์จะเลือกว่าจะปลุกระบบเมื่อใดและเมื่อใด ก็สิ้นสุดเลย วิธีเดียวที่คุณจะบอกเบราว์เซอร์ได้ว่า "นี่ ฉันยุ่งมากๆ เรื่องสำคัญ นั่นก็คือการทำตามสัญญาลงในเมธอด event.waitUntil() เบราว์เซอร์จะ ให้โปรแกรมทำงานของบริการทำงานต่อไปจนกว่าคำสัญญาที่คุณส่งเข้ามาจะตกลงกัน

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

ต่อไปนี้เป็นตัวอย่างพื้นฐานของการแสดงการแจ้งเตือน

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);
});

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

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

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

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

สาเหตุหลักที่ทำให้นักพัฒนาซอฟต์แวร์ถูกตรวจจับได้คือโค้ดของพวกเขาจะ มักจะโทรหา self.registration.showNotification() แต่ไม่ได้เรียกใช้ พร้อมคำมั่นสัญญาว่าจะได้ผลตอบแทน การดำเนินการนี้ส่งผลให้มีการแจ้งเตือนเริ่มต้นเป็นระยะๆ กำลังแสดงอยู่ ตัวอย่างเช่น เราสามารถลบการส่งกลับสำหรับ 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()

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

สถานที่ที่จะไปต่อ

• ภาพรวมข้อความ Push จากเว็บ
• วิธีการทำงานของพุช
• การสมัครใช้บริการผู้ใช้
• UX สิทธิ์
• การส่งข้อความด้วยไลบรารีพุชบนเว็บ
• โปรโตคอลการพุชในเว็บ
• การจัดการเหตุการณ์พุช
• การแสดงการแจ้งเตือน
• ลักษณะการทำงานของการแจ้งเตือน
• รูปแบบการแจ้งเตือนทั่วไป
• คำถามที่พบบ่อยเกี่ยวกับข้อความ Push
• ปัญหาที่พบบ่อยและการรายงานข้อบกพร่อง

Code Lab

• สร้างไคลเอ็นต์ข้อความ Push
• สร้างเซิร์ฟเวอร์ข้อความ Push