วิธีรวม Push Notifications เข้ากับ PWA . ของคุณ

ในบทช่วยสอนของเราวันนี้ เราจะผสานรวม Push Notifications เข้ากับ PWA โดยใช้ Firebase หรือให้เฉพาะเจาะจงมากขึ้น โดยใช้ฟีเจอร์ Cloud Messaging ซึ่งเปิดใช้งานการส่งข้อความโดยใช้คำขอ HTTPS

เว็บแอปโปรเกรสซีฟและการแจ้งเตือนแบบพุช

เนื่องจาก Progressive Web App เป็นการเคลื่อนไหวที่เปลี่ยนแปลงตลอดเวลา จึงไม่น่าแปลกใจเลยที่เห็นว่าเทคโนโลยีนั้นเทียบเท่า (ในแง่ของฟังก์ชัน) กับแอปที่มาพร้อมเครื่อง

 การอ่านที่แนะนำ: PWA กับ Native: แบบไหนเหมาะกับคุณมากกว่ากัน?

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

Jon Krafcik, Chrome Dev Summit 2019

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

 การอ่านที่แนะนำ: 9 ฟีเจอร์ที่ต้องมีของ Progressive Web App (PWA) สำหรับอีคอมเมิร์ซ

วิธีรวม Push Notifications เข้ากับ PWA . ของคุณ

ในบทช่วยสอนของเราวันนี้ เราจะผสานรวม Push Notifications เข้ากับ PWA โดยใช้ Firebase โดยเฉพาะฟีเจอร์ Cloud Messaging ซึ่งช่วยให้สามารถส่งข้อความโดยใช้คำขอ HTTPS

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

• บัญชี Firebase (เนื่องจากคุณจะสร้างโครงการภายใน Firebase)
• เว็บแอปโปรเกรสซีฟ สำหรับการสาธิตอย่างง่าย เราจะใช้ create-react-app ซึ่งเป็น PWA พื้นฐานที่สามารถสร้างได้โดยใช้คำสั่ง

ขั้นตอนที่ 1 : สร้าง PWA . พื้นฐาน

เนื่องจากเราจะสร้าง PWA พื้นฐานโดยใช้ create-react-app ให้ดาวน์โหลด NodeJS ก่อน หลังจากคุณติดตั้ง NodeJS เสร็จแล้ว ให้เปิด NodeJS Command Prompt และเรียกใช้คำสั่งต่อไปนี้

ในการสร้างแอป React อย่างง่ายในไดเร็กทอรีที่คุณระบุ:

 npx create-react-app your-pwa-directory

เปลี่ยนไดเร็กทอรีการทำงานปัจจุบันเป็นแอป React ที่สร้างขึ้นใหม่:

 cd your-pwa-directory

เพิ่มไลบรารี Firebase JavaScript ในโครงการ:

 npm ติดตั้ง firebase --save 

ขั้นตอนที่ 2: สร้าง push-notification.js ของคุณ

ขั้นตอนต่อไปคือการสร้างโมดูลที่จะรับผิดชอบการประมวลผลการแจ้งเตือนทั้งหมดของคุณ ใน <your-pwa-directory>\src ให้สร้างไฟล์ชื่อ push-notification.js

ขั้นแรก ให้สร้างฟังก์ชันที่เริ่มต้น Firebase และส่งผ่านคีย์ของโปรเจ็กต์ของคุณ คุณสามารถค้นหาคีย์สำหรับโปรเจ็กต์ของคุณได้โดยไปที่ Firebase > ภาพรวมโปรเจ็กต์ → การตั้งค่าโปรเจ็กต์ และคลิกที่ไอคอนนี้:

ซึ่งจะนำคุณไปยังหน้าอื่นที่มี Firebase SDK สำหรับ PWA ของคุณ:

ตอนนี้เรามีคีย์สำหรับโครงการแล้ว ให้เพิ่มโค้ดต่อไปนี้ลงใน push-notification.js ของคุณ

 นำเข้า firebase จาก 'firebase';
ส่งออก const initializeFirebase = () => {
  firebase.initializeApp({
    apiKey: "XXXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXXX",
    databaseURL: "XXXXXXXXXXXXX",
    รหัสโครงการ: "XXXXXXXXXXXXX",
    storageBucket: "XXXXXXXXXXXXX",
    ข้อความSenderId: "XXXXXXXXXXXXX",
    รหัสแอป: "XXXXXXXXXXXXX"
  });
}

ด้วยสิ่งนี้ คุณได้สร้างฟังก์ชันที่รับผิดชอบการประมวลผลการแจ้งเตือนทั้งหมดของคุณ ตอนนี้คุณจะต้องนำเข้าและเรียกมัน แก้ไข index.js ของคุณดังนี้:

 นำเข้า React จาก 'react';
นำเข้า ReactDOM จาก 'react-dom';
นำเข้า './index.css';
นำเข้าแอพจาก './App';
นำเข้า * เป็น serviceWorkerRegistration จาก './serviceWorkerRegistration';
นำเข้า reportWebVitals จาก './reportWebVitals';
นำเข้า firebase จาก 'firebase';
นำเข้า { initializeFirebase } จาก './push-notification';
ReactDOM.render(<แอพ />, document.getElementById('root'));
initializeFirebase();

ขั้นตอนที่ 3: สร้างพนักงานบริการ

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

SimiCart สิ่งที่คุณต้องรู้เกี่ยวกับ Progressive Web Apps

จำเป็นต้องมีพนักงานบริการเพื่อรับเหตุการณ์ onMessage และทำให้สามารถส่งการแจ้งเตือนไปยังอุปกรณ์ของผู้ใช้ได้ โดยค่าเริ่มต้น Firebase จะค้นหาไฟล์ชื่อ firebase-messaging-sw.js โดยอัตโนมัติ

มาเพิ่ม firebase-messaging-sw.js ให้กับไดเร็กทอรีที่ใช้ไฟล์ของคุณกัน เนื่องจากโครงการของเราเป็นโครงการ create-react-app firebase-messaging-sw.js นี้จะอยู่ในโฟลเดอร์สาธารณะของเรา:

 importScripts('https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.4.1/firebase-messaging.js');
firebase.initializeApp({
    apiKey: "XXXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXXX",
    databaseURL: "XXXXXXXXXXXXX",
    รหัสโครงการ: "XXXXXXXXXXXXX",
    storageBucket: "XXXXXXXXXXXXX",
    ข้อความSenderId: "XXXXXXXXXXXXX",
    รหัสแอป: "XXXXXXXXXXXXX"
});
ข้อความ const = firebase.messaging();

หากคุณยังไม่เคยได้ยินเกี่ยวกับ PWA Service Worker เรามีบทความพิเศษให้คุณเรียนรู้เกี่ยวกับเทคโนโลยีที่น่าทึ่งนี้

ขั้นตอนที่ 4: ขอสิทธิ์ผู้ใช้ในการส่งการแจ้งเตือน

เข้าสู่ยุคแห่งความเป็นส่วนตัวแล้ว และคุณไม่ต้องการที่จะรบกวนผู้ใช้ของคุณด้วยการส่งการแจ้งเตือนที่ไม่ต้องการและไม่ได้รับอนุญาต!

หากต้องการขออนุญาตผู้ใช้ของคุณ เพียงเพิ่มสิ่งนี้ใน push-notification.js ของคุณ:

 นำเข้า firebase จาก 'firebase';
 
ส่งออก const initializeFirebase = () => {
  firebase.initializeApp({
    apiKey: "XXXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXXX",
    databaseURL: "XXXXXXXXXXXXX",
    รหัสโครงการ: "XXXXXXXXXXXXX",
    storageBucket: "XXXXXXXXXXXXX",
    ข้อความSenderId: "XXXXXXXXXXXXX",
    รหัสแอป: "XXXXXXXXXXXXX"
  });
}
 
ส่งออก const askForPermissionToReceiveNotifications = async () => {
  ลอง {
    ข้อความ const = firebase.messaging();
    กำลังรอการส่งข้อความ.requestPermission();
    โทเค็น const = รอการส่งข้อความ.getToken();
    console.log('โทเค็นของคุณคือ:', โทเค็น);
    
    โทเค็นคืน;
  } จับ (ผิดพลาด) {
    console.error(ข้อผิดพลาด);
  }
}

และเนื่องจากจะต้องเรียกใช้ฟังก์ชันนี้จากที่ใดที่หนึ่ง ดังนั้นเราจะเพิ่มฟังก์ชันนี้ด้วยการคลิกปุ่มเพียงปุ่มเดียว แก้ไขไฟล์ app.js ในไดเร็กทอรี /src/ ของคุณดังนี้:

 นำเข้าโลโก้จาก './logo.svg';
นำเข้า './App.css';
นำเข้า { askForPermissionToReceiveNotifications } จาก './push-notification';

แอปฟังก์ชัน () {
  กลับ (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          แก้ไข <code>src/App.js</code> และบันทึกเพื่อโหลดซ้ำ
        </p>
        <a
          className="ลิงก์แอป"
          href="https://reactjs.org"
          เป้าหมาย="_ว่าง"
          rel="noopener noreferrer"
        >
          เรียนรู้ปฏิกิริยา
        </a>
		 <button onClick={askForPermissionToReceiveNotifications} >
          คลิกเพื่อรับการแจ้งเตือน
        </button>
      </header>
    </div>
  );
}

ส่งออกแอปเริ่มต้น;

มาเริ่มโปรเจ็กต์ของเรากันเลย คุณจะเห็น ปุ่มคลิกเพื่อรับการแจ้งเตือน ดังนี้:

คลิกที่ปุ่มและคุณจะเห็นป๊อปอัปขออนุญาต:

คลิกที่ อนุญาต และตรวจสอบคอนโซลของเบราว์เซอร์ของคุณ คุณควรเห็นข้อความแจ้งถึงโทเค็นของคุณ:

ตอนนี้ ให้บันทึก โทเค็นนี้ไว้ที่อื่นเพราะคุณจะต้องใช้ในขั้นตอนถัดไป

ขั้นตอน ที่ 5: ส่งการแจ้งเตือนแบบพุชด้วยบุรุษไปรษณีย์

ในขั้นตอนต่อไป เราจะใช้บุรุษไปรษณีย์เพื่อส่งการแจ้งเตือนโดยใช้บริการ Cloud Messaging ของ Firebase

ในบุรุษไปรษณีย์ สร้างคำขอ POST ด้วยข้อมูลต่อไปนี้:

• URL คำขอ : https://fcm.googleapis.com/fcm/send

• ส่วนหัว : ในส่วนหัวของคำขอ POST คุณจะต้องมีคีย์ต่อไปนี้:

การอนุญาต: คีย์ = SERVER_KEY

ประเภทเนื้อหา : application/json

หมายเหตุ : SERVER_KEY สามารถพบได้ในแท็บ Cloud Messaging ในการตั้งค่า Firebase ของคุณ

• เนื้อหา : กรอกเนื้อหาของคำขอ POST ของคุณด้วยรหัสต่อไปนี้:

 {
    "การแจ้งเตือน": {
        "หัวเรื่อง": "SimiCart",
        "body": "ทดสอบการแจ้งเตือนแบบพุช",
        "click_action": "http://localhost:3000/",
        "ไอคอน": "https://i.imgur.com/5zO5cce.png"
    }
    "ถึง": "USER_TOKEN"
}

แทนที่ USER_TOKEN ด้วยโทเค็นที่คุณได้รับ (โดยคลิกที่ ปุ่ม Click เพื่อรับการแจ้งเตือน ) ในขั้นตอนที่ 4 อย่าลืมเลือก Body type เป็น raw และ JSON

ตอนนี้คลิกที่ ส่ง และคุณจะเห็นการแจ้งเตือนปรากฏขึ้นที่มุมล่างขวาของคุณ:

หมายเหตุ : การแจ้งเตือนเหล่านี้จะปรากฏเฉพาะเมื่อแอปอยู่ในพื้นหลังหรือย่อให้เล็กสุด

ยินดีด้วย! กปภ. ของคุณสามารถส่งการแจ้งเตือนได้แล้ว!

บทสรุป

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