วิธีแปลง WebApp เป็น PWA ด้วย Push Notification
เผยแพร่แล้ว: 2022-03-20ในบทความนี้ เราจะมาดูวิธีการแปลงเว็บแอปพลิเคชันหรือเว็บไซต์เป็น PWA ด้วย Push Notification โดยใช้ Firebase Cloud Messaging
ในโลกสมัยใหม่ เว็บแอปพลิเคชันส่วนใหญ่กำลังถูกแปลงเป็น PWA (Progressive Web App) เนื่องจากมีคุณลักษณะต่างๆ เช่น การสนับสนุนออฟไลน์ การแจ้งเตือนแบบพุช การซิงค์พื้นหลัง คุณสมบัติของ PWA ทำให้เว็บแอปพลิเคชันของเราเป็นเหมือนแอพที่มาพร้อมเครื่องและมอบประสบการณ์การใช้งานที่หลากหลายแก่ผู้ใช้
ตัวอย่างเช่น บริษัทที่ยอดเยี่ยมเช่น Twitter และ Amazon ได้แปลง Web App เป็น PWA เพื่อให้ผู้ใช้มีส่วนร่วมมากขึ้น
กปภ. คืออะไร?
PWA = (Web App) + (คุณสมบัติบางอย่างของแอพเนทีฟ)
PWA เป็นเว็บแอปเดียวกัน (HTML+CSS+JS) มันทำงานเหมือนกับ Web App ของคุณในทุกเบราว์เซอร์เหมือนที่เคยทำมา แต่สามารถมีคุณลักษณะดั้งเดิมได้เมื่อเว็บไซต์ของคุณโหลดบนเบราว์เซอร์ที่ทันสมัย ทำให้เว็บแอปของคุณมีประสิทธิภาพมากขึ้นกว่าเดิม และยังทำให้สามารถปรับขนาดได้มากขึ้น เนื่องจากเราสามารถดึงข้อมูลล่วงหน้าและแคชเนื้อหาในส่วนหน้า ซึ่งจะลดคำขอไปยังเซิร์ฟเวอร์แบ็กเอนด์ของคุณ
กปภ. ต่างจาก Web App . อย่างไร
- Installable : Web App ของคุณสามารถติดตั้งได้เหมือนกับ Native app
- โปรเกรสซีฟ : ทำงานเหมือนกับเว็บแอปของคุณ แต่มีคุณสมบัติดั้งเดิมบางอย่าง
- Native App Experience : ผู้ใช้สามารถใช้และนำทาง Web App ได้เหมือนกับ Native เมื่อติดตั้งแล้ว
- เข้าถึงได้ง่าย : ผู้ใช้ของเราไม่จำเป็นต้องพิมพ์ที่อยู่เว็บทุกครั้งที่เข้าชมต่างจากเว็บแอปของเรา เมื่อติดตั้งแล้ว ก็สามารถเปิดได้ด้วยการแตะเพียงครั้งเดียว
- การแคชแอปพลิเคชัน : ก่อน PWA กลไกการแคชเดียวที่แอปพลิเคชันเว็บของเรานำมาใช้คือ โดยใช้แคช HTTP ซึ่งมีให้ในเบราว์เซอร์เท่านั้น แต่ด้วย PWA เราสามารถแคชสิ่งต่าง ๆ ได้โดยใช้โค้ดฝั่งไคลเอ็นต์ซึ่งไม่มีในเว็บแอป
- (App/Play) การเผยแพร่ร้านค้า : PWA สามารถเผยแพร่ใน Google Play Store และ IOS App Store
การแปลงแอปพลิเคชันของคุณเป็น PWA จะทำให้มีประสิทธิภาพมากขึ้นเท่านั้น
ทำไมธุรกิจควรพิจารณา กปภ
ในขณะที่ลูกค้าส่วนใหญ่ติดต่อเราและขอให้พัฒนาโซลูชัน Web App ก่อน จากนั้นจึงขอแอป Android และ iOS สิ่งที่เราจะทำคือสร้างฟังก์ชันการทำงานเดียวกันในเว็บแอปไปยังแอป Android/IOS โดยทีมที่แยกจากกันซึ่งใช้ต้นทุนการพัฒนาที่มากกว่าและมีเวลาออกสู่ตลาดมากขึ้น
แต่ลูกค้าบางรายมีงบประมาณจำกัด หรือลูกค้าบางรายอาจคิดว่าเวลาในการออกสู่ตลาดสำคัญกว่าสำหรับผลิตภัณฑ์ของตน
ความต้องการของลูกค้าส่วนใหญ่สามารถตอบสนองได้ด้วยคุณสมบัติของ PWA เอง สำหรับพวกเขา เราขอแนะนำ PWA เท่านั้น และให้แนวคิดแก่พวกเขาในการแปลง PWA เป็นแอพ Android โดยใช้ TWA หากพวกเขาต้องการปรับใช้ใน Playstore
หากความต้องการของคุณต้องการคุณสมบัติเนทีฟแอปพลิเคชันอย่างแท้จริงซึ่ง กปภ. ไม่สามารถตอบสนองได้ ลูกค้าสามารถไปพัฒนาทั้งสองแอพพลิเคชั่นได้ตามต้องการ แต่ถึงแม้ในสถานการณ์นั้น พวกเขาสามารถปรับใช้ PWA ใน play store จนกว่าการพัฒนา Android จะเสร็จสิ้น
ตัวอย่าง: Titan Eyeplus
ในขั้นต้น พวกเขาพัฒนาแอพ PWA และปรับใช้ใน play store โดยใช้ TWA (Trusted Web Activity) เมื่อพวกเขาเสร็จสิ้นการพัฒนาแอปพลิเคชัน Android แล้ว พวกเขาปรับใช้แอปพลิเคชัน Android จริงใน play store พวกเขาประสบความสำเร็จทั้งเวลาในการออกสู่ตลาดโดยใช้การประปาส่วนภูมิภาคและต้นทุนการพัฒนา
คุณสมบัติของ กปภ.
กปภ. ให้คุณสมบัติเหมือนแอพเนทีฟสำหรับเว็บแอปพลิเคชันของเรา
คุณสมบัติหลักคือ:
- ติดตั้งได้: เว็บแอปพลิเคชันที่ติดตั้งเหมือนแอปที่มาพร้อมเครื่อง
- การแคช: การแคชแอปพลิเคชันเป็นไปได้ ซึ่งช่วยให้แอปพลิเคชันของเรารองรับออฟไลน์
- การแจ้งเตือนแบบพุช: สามารถส่งการแจ้งเตือนแบบพุชจากเซิร์ฟเวอร์ของเราเพื่อดึงดูดผู้ใช้ของเราไปยังเว็บไซต์ของเรา
- การกำหนดตำแหน่ง: เหตุการณ์สามารถแจ้งเตือนแอปพลิเคชันได้ทุกเมื่อที่ตำแหน่งอุปกรณ์เปลี่ยน
- คำขอชำระเงิน: เปิดใช้งานการชำระเงินในแอปพลิเคชันของคุณด้วยประสบการณ์การใช้งานที่ยอดเยี่ยมเช่นแอปที่มาพร้อมเครื่อง
และคุณสมบัติอื่น ๆ อีกมากมายที่จะมาในอนาคต
คุณสมบัติอื่น ๆ ได้แก่ :
- ทางลัด: เพิ่ม URL ที่เข้าถึงได้อย่างรวดเร็วในไฟล์รายการ
- Web Share API: ให้แอปพลิเคชันของคุณรับข้อมูลที่แชร์จากแอปพลิเคชันอื่น
- Badge API: เพื่อแสดงจำนวนการแจ้งเตือนใน PWA ที่ติดตั้งของคุณ
- API ซิงค์พื้นหลังเป็นระยะ: บันทึกข้อมูลของผู้ใช้จนกว่าจะเชื่อมต่อกับเครือข่าย
- เครื่องมือเลือกผู้ติดต่อ: ใช้เพื่อเลือกผู้ติดต่อจากมือถือของผู้ใช้
- File Picker: ใช้เพื่อเข้าถึงไฟล์บนระบบภายใน / มือถือ
ข้อได้เปรียบของ กปภ. เหนือ Native Application
แอพเนทีฟทำงานได้ดีกว่า PWA และมีคุณสมบัติมากกว่า PWA แต่ก็ยังมีข้อดีเหนือแอปเนทีฟอยู่บ้าง
- PWA ทำงานบนข้ามแพลตฟอร์มเช่น Android, IOS, เดสก์ท็อป
- ช่วยลดต้นทุนการพัฒนาของคุณ
- การปรับใช้คุณสมบัติที่ง่ายเมื่อเทียบกับแอพเนทีฟ
- ค้นพบได้ง่ายเพราะ PWA (เว็บไซต์) เป็นมิตรกับ SEO
- ปลอดภัยเพราะใช้งานได้บน HTTPS . เท่านั้น
ข้อเสียของ กปภ. ต่อแอพเนทีฟ
- มีฟังก์ชันการทำงานที่จำกัดเมื่อเทียบกับแอปที่มาพร้อมเครื่อง
- ไม่รับประกันคุณสมบัติของ PWA ว่าจะรองรับอุปกรณ์ทั้งหมด
- การสร้างตราสินค้าของ กปภ. ต่ำเพราะไม่มีใน App Store หรือ Play Store
คุณสามารถปรับใช้ PWA ของคุณเป็นแอพ Android ใน play store โดยใช้ android Trusted Web Activity (TWA) มันจะช่วยในการสร้างแบรนด์ของคุณ
สิ่งที่จำเป็นในการแปลง Web App เป็น PWA
สำหรับการแปลง เว็บแอปหรือเว็บไซต์ใดๆ เป็น กปภ.
- พนักงานบริการ: แกนหลักของแอป PWA สำหรับการแคช, การแจ้งเตือนแบบพุช, พร็อกซีสำหรับคำขอของเรา
- ไฟล์มานิเฟสต์: มีรายละเอียดเกี่ยวกับเว็บแอปพลิเคชันของคุณ มันเคยดาวน์โหลดแอพของเราเหมือนแอพเนทีฟบนหน้าจอหลัก
- โลโก้แอป: รูปภาพคุณภาพสูง 512 x 512 px สำหรับไอคอนแอปของคุณ โลโก้แอปที่จำเป็นสำหรับการประปาส่วนภูมิภาคบนหน้าจอหลัก หน้าจอเริ่มต้น ฯลฯ ดังนั้นเราจึงต้องสร้างรูปภาพในอัตราส่วน 1:1 สำหรับแอปของเราโดยใช้เครื่องมือใดๆ
- การออกแบบที่ตอบสนอง: เว็บแอปควรตอบสนองต่อการทำงานบนหน้าจอขนาดต่างๆ
พนักงานบริการคืออะไร:
เจ้าหน้าที่บริการ (สคริปต์ฝั่งไคลเอ็นต์) เป็นพร็อกซีระหว่าง Web APP ของคุณกับภายนอก โดยส่งการแจ้งเตือนแบบพุชสำหรับ Web App ของเราและรองรับการแคช
Service Worker ทำงานโดยอิสระจากจาวาสคริปต์หลัก จึงไม่มีสิทธิ์เข้าถึง DOM API เข้าถึงได้เฉพาะ IndexedDB API, Fetch API, Cache Storage API แต่สามารถสื่อสารกับเธรดหลักด้วยข้อความ
ให้บริการโดยพนักงานบริการ:
- การสกัดกั้นคำขอ HTTP จากโดเมนต้นทางของคุณ
- รับการแจ้งเตือนแบบพุชจากเซิร์ฟเวอร์ของคุณ
- ความพร้อมใช้งานของแอปพลิเคชันของเราแบบออฟไลน์
พนักงานบริการจะควบคุมแอปพลิเคชันของคุณและสามารถจัดการคำขอของคุณได้ แต่จะทำงานโดยอิสระ ด้วยเหตุนี้ โดเมนต้นทางจึงต้องเปิดใช้งานด้วย HTTPS เพื่อหลีกเลี่ยงการโจมตีแบบคนกลาง
ไฟล์ Manifest คืออะไร
ไฟล์ Manifest (manifest.json) มีรายละเอียดเกี่ยวกับแอป PWA ที่จะบอกให้เบราว์เซอร์ทราบ
- ชื่อ: ชื่อของแอปพลิเคชัน
- short_name: ชื่อย่อสำหรับแอปพลิเคชันของเรา ถ้าจัดให้
- ด้วยทั้งชื่อคุณสมบัติและ short_name เบราว์เซอร์จะใช้ short_name
- คำอธิบาย: คำอธิบายเพื่ออธิบายแอปพลิเคชันของเรา
- start_url: เพื่อระบุหน้าแรกของแอปพลิเคชันเมื่อ PWA ของเราเปิดตัว
- ไอคอน: ชุดรูปภาพสำหรับ กปภ. สำหรับหน้าจอหลัก ฯลฯ
- background_color: เพื่อกำหนดสีพื้นหลังของหน้าจอเริ่มต้นในแอปพลิเคชัน PWA ของเรา
- display: เพื่อปรับแต่ง UI เบราว์เซอร์ของเราเพื่อแสดงในแอป PWA ของเรา
- theme_color: สีธีมของแอป PWA
- scope: ขอบเขต URL ของแอปพลิเคชันของเราเพื่อพิจารณาสำหรับการ กปภ. ค่าดีฟอลต์เป็นตำแหน่งของไฟล์ Manifest ที่ตั้งอยู่
- ทางลัด: ลิงค์ด่วนสำหรับแอปพลิเคชัน กปภ.
แปลงเว็บแอปเป็น PWA
เพื่อจุดประสงค์ในการสาธิต ฉันได้สร้างโครงสร้างโฟลเดอร์เว็บไซต์ Geekflare พร้อมไฟล์สแตติก
- index.html – หน้าแรก
- บทความ/
- index.html – หน้าบทความ
- ผู้เขียน/
- index.html – หน้าผู้เขียน
- เครื่องมือ/
- index.html – หน้าเครื่องมือ
- ข้อเสนอ/
- index.html – หน้าข้อเสนอ
หากคุณมีเว็บไซต์หรือ Web App อยู่แล้วให้ลองแปลงเป็น PWA โดยทำตามขั้นตอนด้านล่าง
สร้างภาพที่จำเป็นสำหรับ PWA
ขั้นแรก นำโลโก้แอปมาครอบตัดในอัตราส่วน 1:1 ใน 5 ขนาดที่แตกต่างกัน ฉันใช้ https://tools.crawlink.com/tools/pwa-icon-generator/ เพื่อรับขนาดภาพที่แตกต่างกันอย่างรวดเร็ว คุณจึงสามารถใช้งานได้เช่นกัน
สร้างไฟล์รายการ
ประการที่สอง สร้างไฟล์ manifest.json สำหรับเว็บแอปพลิเคชันของคุณด้วยรายละเอียดแอปของคุณ สำหรับการสาธิต ฉันได้สร้างไฟล์รายการสำหรับเว็บไซต์ Geekflare
{
"ชื่อ": "Geekflare",
"short_name": "จีคแฟลร์",
"คำอธิบาย": "Geekflare ผลิตบทความด้านเทคโนโลยีและการเงินคุณภาพสูง สร้างเครื่องมือ และ API เพื่อช่วยให้ธุรกิจและผู้คนเติบโต",
"start_url": "/",
"ไอคอน": [{
"src": "assets/icon/icon-128x128.png",
"ขนาด": "128x128",
"type": "image/png"
}, {
"src": "assets/icon/icon-152x152.png",
"ขนาด": "152x152",
"type": "image/png"
}, {
"src": "assets/icon/icon-192x192.png",
"ขนาด": "192x192",
"type": "image/png"
}, {
"src": "assets/icon/icon-384x384.png",
"ขนาด": "384x384",
"type": "image/png"
}, {
"src": "assets/icon/icon-512x512.png",
"ขนาด": "512x512",
"type": "image/png"
}],
"background_color": "#EDF2F4",
"display": "แบบสแตนด์อโลน",
"theme_color": "#B20422",
"ขอบเขต": "/",
"ทางลัด": [{
"ชื่อ": "บทความ",
"short_name": "บทความ",
"description": "1595 บทความเกี่ยวกับความปลอดภัย, Sysadmin, Digital Marketing, Cloud Computing, การพัฒนา และหัวข้ออื่นๆ อีกมากมาย",
"url": "/บทความ",
"ไอคอน": [{
"src": "/assets/icon/icon-152x152.png",
"ขนาด": "152x152"
}]
},
{
"ชื่อ": "ผู้เขียน",
"short_name": "ผู้เขียน",
"description": "Geekflare - ผู้แต่ง",
"url": "/ผู้แต่ง",
"ไอคอน": [{
"src": "/assets/icon/icon-152x152.png",
"ขนาด": "152x152"
}]
},
{
"ชื่อ": "เครื่องมือ",
"short_name": "เครื่องมือ",
"description": "Geekflare - เครื่องมือ",
"url": "/เครื่องมือ",
"ไอคอน": [{
"src": "/assets/icon/icon-152x152.png",
"ขนาด": "152x152"
}]
},
{
"name": "ดีล",
"short_name": "ดีล",
"description": "Geekflare - ดีล",
"url": "/ดีล",
"ไอคอน": [{
"src": "/assets/icon/icon-152x152.png",
"ขนาด": "152x152"
}]
}
]
}ลงทะเบียนพนักงานบริการ
สร้างไฟล์สคริปต์ register-service-worker.js และ service-worker.js ในโฟลเดอร์รูท
ไฟล์แรกคือ register-service-worker.js เป็นไฟล์จาวาสคริปต์ที่จะรันบนเธรดหลักซึ่งสามารถเข้าถึง DOM API ได้ แต่ service-worker.js เป็นสคริปต์พนักงานบริการที่ทำงานแยกจากเธรดหลักและอายุการใช้งานก็สั้นเช่นกัน มันทำงานเมื่อใดก็ตามที่เหตุการณ์เรียกพนักงานบริการและรันจนกว่ากระบวนการจะเสร็จสิ้น
โดยการตรวจสอบไฟล์จาวาสคริปต์ของเธรดหลัก คุณสามารถตรวจสอบว่าพนักงานบริการลงทะเบียนในไฟล์นั้นหรือไม่ ถ้าไม่คุณสามารถลงทะเบียนสคริปต์พนักงานบริการ (service-worker.js)
วางตัวอย่างด้านล่างใน register-service-worker.js:
ถ้า ('serviceWorker' ในตัวนำทาง) {
window.addEventListener ('โหลด', ฟังก์ชัน () {
navigator.serviceWorker.register('/service-worker.js');
});
}วางตัวอย่างด้านล่างใน service-worker.js
self.addEventListener ('ติดตั้ง', (เหตุการณ์) => { // เหตุการณ์เมื่อพนักงานบริการติดตั้ง
console.log ('ติดตั้ง', เหตุการณ์);
self.skip รอ ();
});
self.addEventListener ('เปิดใช้งาน', (เหตุการณ์) => { // เหตุการณ์เมื่อเปิดใช้งานพนักงานบริการ
console.log('เปิดใช้งาน', เหตุการณ์);
ส่งคืน self.clients.claim();
});
self.addEventListener ('ดึงข้อมูล', ฟังก์ชัน (เหตุการณ์) { // ตัวสกัดกั้นคำขอ HTTP
event.respondWith(fetch(event.request)); // ส่งคำขอ http ทั้งหมดโดยไม่มีตรรกะของแคช
/*event.respondWith(
caches.match (event.request).then (ฟังก์ชัน (ตอบสนอง) {
ตอบกลับ || ดึงข้อมูล (คำขอเหตุการณ์);
})
);*/ // แคชคำขอใหม่ หากอยู่ในแคชแล้วจะทำหน้าที่กับแคช
});เราไม่ได้เน้นที่วิธีเปิดใช้งานแคชสำหรับการสนับสนุนแบบออฟไลน์ เราพูดถึงวิธีการแปลงเว็บแอปเป็น PWA เท่านั้น
เพิ่มไฟล์ Manifest และสคริปต์ในแท็ก all head ของหน้า HTML ของคุณ
<link rel="manifest" href="/manifest.json"> <script src="/register-service-worker.js"></script>
รีเฟรชหน้าหลังจากที่คุณเพิ่ม ตอนนี้คุณสามารถติดตั้งแอปพลิเคชันของคุณเช่นด้านล่างบน Chrome มือถือ
บนหน้าจอหลัก แอพจะถูกเพิ่มเข้าไป
หากคุณกำลังใช้เวิร์ดเพรส ลองใช้ปลั๊กอินตัวแปลง PWA ที่มีอยู่ สำหรับ vueJS หรือ reactJS คุณสามารถทำตามวิธีการข้างต้นหรือใช้โมดูล PWA npm ที่มีอยู่เพื่อให้การพัฒนาของคุณเร็วขึ้น เนื่องจากโมดูล PWA npm ถูกเปิดใช้งานด้วยการแคชสนับสนุนออฟไลน์ ฯลฯ
เปิดใช้งานการแจ้งเตือนแบบพุช
การแจ้งเตือนทางเว็บจะถูกส่งไปยังเบราว์เซอร์เพื่อให้ผู้ใช้มีส่วนร่วม/โต้ตอบกับแอปพลิเคชันของเราบ่อยขึ้น เราสามารถเปิดใช้งานได้โดยใช้
- API การแจ้งเตือน: ใช้เพื่อกำหนดค่าวิธีแสดงการแจ้งเตือนแบบพุชของเราต่อผู้ใช้
- Push API: ใช้เพื่อรับข้อความแจ้งเตือนที่ส่งจากเซิร์ฟเวอร์ของเราไปยังเบราว์เซอร์
ขั้นตอนแรกในการเปิดใช้งานการแจ้งเตือนแบบพุชในแอปพลิเคชันของเราคือการตรวจสอบ API การแจ้งเตือนและได้รับอนุญาตจากผู้ใช้ให้แสดงการแจ้งเตือน สำหรับการคัดลอกและวางข้อมูลโค้ดด้านล่างใน register-service-worker.js ของคุณ
ถ้า ('การแจ้งเตือน' ในหน้าต่าง && Notification.permission != 'ได้รับ') {
console.log('ขออนุญาติผู้ใช้')
Notification.requestPermission (สถานะ => {
console.log('สถานะ:'+สถานะ)
displayNotification('เปิดใช้งานการแจ้งเตือน');
});
}
const displayNotification = notificationTitle => {
console.log('แสดงการแจ้งเตือน')
ถ้า (Notification.permission == 'ได้รับ') {
navigator.serviceWorker.getRegistration (). จากนั้น (reg => {
console.log (reg)
ตัวเลือก const = {
body: 'ขอบคุณที่อนุญาตการแจ้งเตือนแบบพุช !',
ไอคอน: '/assets/icons/icon-512x512.png',
สั่น: [100, 50, 100],
ข้อมูล: {
dateOfArrival: Date.now(),
คีย์หลัก: 0
}
};
reg.showNotification(notificationTitle, options);
});
}
};
หากทุกอย่างถูกต้อง คุณจะได้รับการแจ้งเตือนจากแอปพลิเคชัน
'การแจ้งเตือน' ในหน้าต่าง จะบอกเราว่า API การแจ้งเตือนได้รับการสนับสนุนในเบราว์เซอร์นั้น Notification.permission จะบอกว่าผู้ใช้ได้รับอนุญาตให้แสดงการแจ้งเตือน หากผู้ใช้อนุญาตแอปพลิเคชันของเรา ค่าจะได้รับ 'ให้' หากผู้ใช้ปฏิเสธค่าจะถูก 'บล็อก'
เปิดใช้งานการรับส่งข้อความบนคลาวด์ของ Firebase และสร้างการสมัครสมาชิก
ตอนนี้ส่วนที่แท้จริงเริ่มต้นขึ้น สำหรับการส่งการแจ้งเตือนจากเซิร์ฟเวอร์ของคุณไปยังผู้ใช้ เราจำเป็นต้องมีจุดสิ้นสุด/การสมัครรับข้อมูลสำหรับผู้ใช้แต่ละราย สำหรับสิ่งนั้น เราจะใช้การส่งข้อความบนคลาวด์ของ firebase
ขั้นตอนแรก ให้สร้างบัญชี firebase โดยไปที่ลิงก์นี้ https://firebase.google.com/ แล้วกดเริ่มต้น
- สร้างโครงการใหม่ด้วยชื่อแล้วกดดำเนินการต่อ ฉันจะสร้างมันด้วยชื่อ Geekflare
- ในขั้นตอนถัดไป Google Analytics จะเปิดใช้งานโดยค่าเริ่มต้น คุณสามารถสลับว่าเราไม่ต้องการตอนนี้แล้วกดดำเนินการต่อ คุณสามารถเปิดใช้งานได้ในภายหลังในคอนโซล firebase หากต้องการ
- เมื่อสร้างโครงการแล้วจะมีลักษณะดังนี้
จากนั้นไปที่การตั้งค่าโปรเจ็กต์แล้วคลิกการส่งข้อความบนคลาวด์และสร้างคีย์
จากขั้นตอนข้างต้น คุณมี 3 ปุ่ม
- โปรเจ็กต์เซิร์ฟเวอร์คีย์
- เว็บพุชใบรับรองคีย์ส่วนตัว
- เว็บพุชใบรับรองกุญแจสาธารณะ
ตอนนี้วางตัวอย่างด้านล่างใน register-service-worker.js:
const updateSubscriptionOnYourServer = การสมัครสมาชิก => {
console.log('เขียนโค้ด ajax ของคุณที่นี่เพื่อบันทึกการสมัครใช้งานของผู้ใช้ในฐานข้อมูลของคุณ', การสมัครสมาชิก);
// เขียนวิธีการขอ ajax ของคุณเองโดยใช้ fetch, jquery, axios เพื่อบันทึกการสมัครสมาชิกในเซิร์ฟเวอร์ของคุณเพื่อใช้ในภายหลัง
};
const สมัครสมาชิก = async () => {
const swRegistration = รอ navigator.serviceWorker.getRegistration();
const applicationServerPublicKey = 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY'; // วางคีย์สาธารณะของใบรับรอง webpush ของคุณ
const applicationServerKey = urlB64ToUint8Array (applicationServerPublicKey);
swRegistration.pushManager.subscribe({
userVisibleOnly: จริง
แอปพลิเคชันServerKey
})
.then((สมัครสมาชิก) => {
console.log('ผู้ใช้สมัครสมาชิกใหม่:', การสมัครสมาชิก);
updateSubscriptionOnServer (สมัครสมาชิก);
})
.catch((ผิดพลาด) => {
ถ้า (Notification.permission === 'ถูกปฏิเสธ') {
console.warn ('การอนุญาตสำหรับการแจ้งเตือนถูกปฏิเสธ')
} อื่น {
console.error('ไม่สามารถสมัครสมาชิกผู้ใช้: ' ผิดพลาด)
}
});
};
const urlB64ToUint8Array = (base64String) => {
const padding = '='.repeat((4 - base64String.length % 4) % 4)
const base64 = (base64String + padding)
.replace(/\-/g, '+')
.replace(/_/g, '/')
const rawData = window.atob (base64);
const outputArray = Uint8Array ใหม่ (rawData.length);
สำหรับ (ให้ i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
}
ส่งคืน outputArray;
};
const checkSubscription = async () => {
const swRegistration = รอ navigator.serviceWorker.getRegistration();
swRegistration.pushManager.getSubscription()
.then(สมัครสมาชิก => {
ถ้า (!!สมัครสมาชิก) {
console.log('ผู้ใช้สมัครใช้งานแล้ว');
updateSubscriptionOnYourServer(สมัครสมาชิก);
} อื่น {
console.log('ผู้ใช้ไม่ได้สมัครสมาชิก สมัครสมาชิกใหม่');
สมัครสมาชิก ();
}
});
};
ตรวจสอบการสมัคร ();วางตัวอย่างด้านล่างใน service-worker.js
self.addEventListener('ดัน', (เหตุการณ์) => {
const json = JSON.parse(เหตุการณ์.data.text())
console.log('พุชข้อมูล', event.data.text())
self.registration.showNotification (json.header, json.options)
});ตอนนี้ทั้งหมดอยู่ในส่วนหน้า เมื่อใช้การสมัครรับข้อมูล คุณสามารถส่งการแจ้งเตือนแบบพุชไปยังผู้ใช้ของคุณได้ทุกเมื่อที่คุณต้องการ จนกว่าพวกเขาจะไม่ถูกปฏิเสธบริการพุช
พุชจาก node.js แบ็กเอนด์
คุณสามารถใช้โมดูล web-push npm เพื่อให้ง่ายขึ้น
ตัวอย่างข้อมูลเพื่อส่งการแจ้งเตือนแบบพุชจากเซิร์ฟเวอร์ nodeJS
const webPush = ต้องการ ('web-push');
// pushSubscription เป็นเพียงการสมัครสมาชิกที่คุณส่งจากส่วนหน้าของคุณเพื่อบันทึกใน DB
const pushSubscription = {"endpoint":"https://updates.push.services.mozilla.com/wpush/v2/gAAAAABh2…E0mTFsHtUqaye8UCoLBq8sHCgo2IC7UaafhjGmVCG_SCdhZ9Z88uGj-uwMcgau","thDQWE"hZ9Z88uGj-uwMcgau","thDQWE":{6Z88uGj-uwLbukau","DQW":{6Z88uGj-uwMcgau" :"BLxHw0IMtBMzOHnXgPxxMgSYXxwzJPxpgR8KmAbMMe1-eOudcIcUTVw0QvrC5gWOhZs-yzDa4yKooqSnM3rnx7Y"}};
// ใบรับรองเว็บของคุณ public-key
const vapidPublicKey = 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY';
// ใบรับรองเว็บของคุณ private-key
const vapidPrivateKey = 'รหัสส่วนตัวสำหรับใบรับรองเว็บ';
var เพย์โหลด = JSON.stringify ({
"ตัวเลือก": {
"body": "การทดสอบการแจ้งเตือนแบบพุช กปภ. จากแบ็กเอนด์",
"badge": "/assets/icon/icon-152x152.png",
"icon": "/assets/icon/icon-152x152.png",
"สั่น": [100, 50, 100],
"ข้อมูล": {
"id": "458",
},
"การกระทำ": [{
"action": "ดู",
"title": "ดู"
}, {
"action": "ปิด",
"title": "ปิด"
}]
},
"header": "การแจ้งเตือนจากการสาธิต Geekflare-PWA"
});
ตัวเลือก var = {
vapidDetails: {
เรื่อง: 'mailto:[ป้องกันอีเมล]',
publicKey: vapidPublicKey,
privateKey: vapidPrivateKey
},
TTL: 60
};
webPush.send การแจ้งเตือน (
กดสมัครสมาชิก,
น้ำหนักบรรทุก,
ตัวเลือก
).then(ข้อมูล => {
ส่งคืน res.json({สถานะ : จริง ข้อความ : 'ส่งการแจ้งเตือนแล้ว'});
}).catch(ผิดพลาด => {
คืนค่า res.json({สถานะ : เท็จ ข้อความ : err });
});รหัสด้านบนจะส่งการแจ้งเตือนแบบพุชไปยังการสมัครสมาชิก เหตุการณ์พุชในพนักงานบริการจะถูกทริกเกอร์
ผลักดันจากส่วนหลังของ PHP
สำหรับแบ็กเอนด์ PHP คุณสามารถใช้แพ็คเกจผู้แต่ง web-push-php ตรวจสอบโค้ดตัวอย่างเพื่อส่งการแจ้งเตือนแบบพุชด้านล่าง
<?php if ( !defined('BASEPATH')) exit('ไม่อนุญาตให้เข้าถึงสคริปต์โดยตรง');
ต้องการ __DIR__.'/../vendor/autoload.php';
ใช้ Minishlink\WebPush\WebPush;
ใช้ Minishlink\WebPush\Subscription;
// การสมัครสมาชิกเก็บไว้ใน DB
$subsrciptionJson = '{"endpoint":"https://updates.push.services.mozilla.com/wpush/v2/gAAAAABh2…E0mTFsHtUqaye8UCoLBq8sHCgo2IC7UaafhjGmVCG_SCdhZ9Z88uGj-uw":McgkeyF""6"wcg_scdhZ9Z88uGj-uw":McgkeyF ":"BLxHw0IMtBMzOHnXgPxxMgSYXxwzJPxpgR8KmAbMMe1-eOudcIcUTVw0QvrC5gWOhZs-yzDa4yKooqSnM3rnx7Y"}}';
$payloadData = อาร์เรย์ (
'ตัวเลือก' => อาร์เรย์ (
'body' => 'PWA การทดสอบการแจ้งเตือนแบบพุชจากแบ็กเอนด์',
'badge' => '/assets/icon/icon-152x152.png',
'icon' => '/assets/icon/icon-152x152.png',
'สั่น' =>
อาร์เรย์ (
0 => 100,
1 => 50,
2 => 100,
),
'data' =>
อาร์เรย์ (
'id' => '458',
),
'การกระทำ' =>
อาร์เรย์ (
0 =>
อาร์เรย์ (
'action' => 'ดู',
'title' => 'ดู',
),
1 =>
อาร์เรย์ (
'action' => 'ปิด',
'title' => 'ปิด',
),
),
),
'header' => 'การแจ้งเตือนจากการสาธิต Geekflare-PWA',
);
// รับรองความถูกต้อง
$auth = [
'GCM' => 'your project private-key', // เลิกใช้แล้วและไม่บังคับ มีไว้เพื่อเหตุผลด้านความเข้ากันได้เท่านั้น
'VAPID' => [
' subject' => 'mailto:[email protected]', // สามารถเป็น mailto: หรือที่อยู่เว็บไซต์ของคุณ
'publicKey' => 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY', // (แนะนำ) คีย์สาธารณะที่ไม่มีการบีบอัดใน P-256-URL ที่เข้ารหัส
'privateKey' => 'your web-certificate private-key', // (แนะนำ) อันที่จริงแล้วตัวคูณลับของไพรเวตคีย์เข้ารหัสใน Base64-URL
],
];
$webPush = ใหม่ WebPush($auth);
$subsrciptionData = json_decode($subsrciptionJson,จริง);
// เว็บพุช 6.0
$webPush->sendOneNotification(
สมัครสมาชิก::สร้าง($subsrciptionData),
json_encode($payloadData) // ตัวเลือก (ค่าเริ่มต้นเป็น null)
);บทสรุป
ฉันหวังว่านี่จะทำให้คุณมีแนวคิดเกี่ยวกับการแปลงเว็บแอปพลิเคชันเป็น PWA คุณสามารถตรวจสอบซอร์สโค้ดของบทความนี้ได้ที่นี่ และสาธิตที่นี่ ฉันได้ทดสอบการแจ้งเตือนแบบพุชโดยส่งจากแบ็กเอนด์ด้วยความช่วยเหลือของโค้ดตัวอย่างด้วย