Progressive Web App (PWA) คือเว็บแอปที่ปฏิบัติตาม ชุดหลักเกณฑ์ ที่ออกแบบมาเพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่เชื่อถือได้ รวดเร็ว และน่าสนใจ
Firebase มีบริการหลายอย่างที่จะช่วยให้คุณเพิ่มฟีเจอร์แบบ Progressive ลงในแอปได้อย่างมีประสิทธิภาพเพื่อให้เป็นไปตามแนวทางปฏิบัติแนะนำมากมายของ PWA ซึ่งรวมถึง
| แนวทางปฏิบัติแนะนำของ PWA | บริการของ Firebase ช่วยได้อย่างไร |
|---|---|
| ปลอดภัย มั่นใจได้ |
|
| เวลาที่ใช้ในการโหลดที่รวดเร็ว |
|
| ความยืดหยุ่นของเครือข่าย |
|
| ให้ผู้ใช้มีส่วนร่วม |
|
หน้านี้จะให้ภาพรวมเกี่ยวกับวิธีที่แพลตฟอร์ม Firebase ช่วยให้คุณสร้าง PWA ที่ทันสมัยและมีประสิทธิภาพสูงได้โดยใช้ Firebase JavaScript SDK ที่ทำงานข้ามเบราว์เซอร์ได้
ไปที่ คู่มือเริ่มต้นใช้งาน เพื่อเพิ่ม Firebase ลงในเว็บแอป
ปลอดภัย มั่นใจได้
ตั้งแต่การแสดงเว็บไซต์ไปจนถึงการใช้ขั้นตอนการตรวจสอบสิทธิ์ สิ่งสำคัญคือ PWA ของคุณต้องมีเวิร์กโฟลว์ที่ปลอดภัยและเชื่อถือได้
แสดง PWA ผ่าน HTTPS
HTTPS ช่วยปกป้องความสมบูรณ์ของเว็บไซต์ ตลอดจนความเป็นส่วนตัวและความปลอดภัยของผู้ใช้ PWA ต้องแสดงผ่าน HTTPS
Firebase Hosting จะแสดงเนื้อหาของแอปผ่าน HTTPS โดยค่าเริ่มต้น คุณสามารถแสดงเนื้อหาในโดเมนย่อยของ Firebase ที่ไม่มีค่าใช้จ่าย หรือในโดเมนที่กำหนดเอง ของคุณเอง บริการโฮสติ้งของเราจะจัดเตรียมใบรับรอง SSL สำหรับโดเมนที่กำหนดเองของคุณโดยอัตโนมัติและไม่มีค่าใช้จ่าย
ไปที่ คู่มือเริ่มต้นใช้งาน Firebase Hosting เพื่อดูวิธีโฮสต์ PWA ในแพลตฟอร์ม Firebase
เสนอขั้นตอนการตรวจสอบสิทธิ์ที่ปลอดภัย
FirebaseUI มีขั้นตอนการตรวจสอบสิทธิ์ ที่ปรับเปลี่ยนตามอุปกรณ์ ได้โดยอิงตาม Firebase Authentication ซึ่งช่วยให้ แอปของคุณผสานรวมขั้นตอนการลงชื่อเข้าใช้ที่ซับซ้อนและปลอดภัยได้อย่างง่ายดาย FirebaseUI จะปรับให้เข้ากับขนาดหน้าจอของอุปกรณ์ของผู้ใช้โดยอัตโนมัติ และเป็นไปตามแนวทางปฏิบัติแนะนำสำหรับขั้นตอนการตรวจสอบสิทธิ์
FirebaseUI รองรับผู้ให้บริการลงชื่อเข้าสู่ระบบพร้อมกันหลายบัญชี เพิ่มขั้นตอนการตรวจสอบสิทธิ์ของ FirebaseUIลงในแอปด้วยโค้ดเพียงไม่กี่บรรทัด ที่กำหนดค่าไว้สำหรับผู้ให้บริการลงชื่อเข้าใช้:
// FirebaseUI config. var uiConfig = { signInSuccessUrl: 'URL', // the URL to direct to upon success signInOptions: [ firebase.auth.GoogleAuthProvider.PROVIDER_ID, firebase.auth.EmailAuthProvider.PROVIDER_ID ] }; // Initialize the FirebaseUI widget using Firebase. var ui = new firebaseui.auth.AuthUI(firebase.auth()); ui.start('#firebaseui-auth-container', uiConfig);
ไปที่ เอกสารประกอบใน GitHub เพื่อ ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกการกำหนดค่าต่างๆ ที่ FirebaseUI มีให้
ลงชื่อเข้าใช้ผู้ใช้ในอุปกรณ์ต่างๆ
เมื่อใช้ FirebaseUI เพื่อ ผสานรวม การลงชื่อเข้าใช้ด้วยการแตะเพียงครั้งเดียว แอปจะลงชื่อเข้าใช้ผู้ใช้โดยอัตโนมัติ แม้ว่าจะเป็นอุปกรณ์ต่างๆ ที่ผู้ใช้ ตั้งค่าด้วยข้อมูลเข้าสู่ระบบก็ตาม
เปิดใช้การลงชื่อเข้าใช้ด้วยการแตะเพียงครั้งเดียวโดยใช้ FirebaseUI ด้วยการเปลี่ยนการกำหนดค่าเพียงบรรทัดเดียว
// FirebaseUI config. var uiConfig = { signInSuccessUrl: 'URL', // the URL to direct to upon success authMethod: 'https://accounts.google.com', signInOptions: firebase.auth.GoogleAuthProvider.PROVIDER_ID, // Enable one-tap sign-in. credentialHelper: firebaseui.auth.CredentialHelper.GOOGLE_YOLO };
ไปที่ เอกสารประกอบใน GitHub เพื่อ ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกการกำหนดค่าต่างๆ ที่ FirebaseUI มีให้
เวลาที่ใช้ในการโหลดที่รวดเร็ว
ประสิทธิภาพที่ยอดเยี่ยมจะช่วยปรับปรุงประสบการณ์ของผู้ใช้ ช่วยรักษาผู้ใช้ไว้ และเพิ่ม Conversion ประสิทธิภาพที่ยอดเยี่ยม เช่น "เวลาในการ แสดงผลครั้งแรกที่มีความหมาย" และ "เวลาในการตอบสนอง" ที่ต่ำ ถือเป็นข้อกำหนดที่สำคัญสำหรับ PWA
แสดงเนื้อหาแบบคงที่อย่างมีประสิทธิภาพ
Firebase Hosting จะแสดง เนื้อหา ผ่าน CDN ทั่วโลก และเข้ากันได้กับ HTTP/2 เมื่อคุณโฮสต์เนื้อหาแบบคงที่ด้วย Firebase เราจะกำหนดค่าทั้งหมดนี้ให้คุณเอง คุณจึงไม่ต้องทำอะไรเพิ่มเติมเพื่อใช้ประโยชน์จากบริการนี้
แคชเนื้อหาแบบไดนามิก
ด้วย Firebase Hosting เว็บแอปของคุณยังแสดง เนื้อหาแบบไดนามิก ที่ สร้างขึ้นฝั่งเซิร์ฟเวอร์โดย Cloud Functions หรือแอปที่ใช้คอนเทนเนอร์ Cloud Runได้ด้วย การใช้บริการ นี้จะช่วยให้คุณแคชเนื้อหาแบบไดนามิกใน CDN ทั่วโลกที่มี ประสิทธิภาพได้ด้วยโค้ดเพียงบรรทัดเดียว
res.set('Cache-Control', 'public, max-age=300, s-maxage=600');บริการนี้ช่วยให้คุณหลีกเลี่ยงการเรียกใช้แบ็กเอนด์เพิ่มเติม เร่งการตอบสนอง และลดค่าใช้จ่ายได้
ไปที่เอกสารประกอบของเราเพื่อดูวิธีที่คุณ แสดงเนื้อหาแบบไดนามิก (ขับเคลื่อนโดย Cloud Functions หรือ Cloud Run) และเปิดใช้การแคช CDN ด้วย Firebase Hosting
โหลดบริการเมื่อจำเป็นเท่านั้น
Firebase JavaScript SDK สามารถ นำเข้าบางส่วน เพื่อลดขนาดการดาวน์โหลดเริ่มต้นให้เหลือน้อยที่สุด ใช้ประโยชน์จาก SDK แบบโมดูลาร์นี้เพื่อนำเข้าบริการของ Firebase ที่แอปของคุณต้องการเมื่อจำเป็นเท่านั้น
ตัวอย่างเช่น หากต้องการเพิ่มความเร็วในการแสดงผลครั้งแรกของแอป แอปจะโหลด Firebase Authentication ก่อน จากนั้นเมื่อแอป ต้องการ คุณก็สามารถโหลดบริการอื่นๆ ของ Firebase เช่น Cloud Firestore ได้
หากใช้ตัวจัดการแพ็กเกจ เช่น Webpack คุณจะโหลด Firebase Authentication ก่อนได้โดยทำดังนี้
import firebase from 'firebase/app'; import 'firebase/auth'; // Load Firebase project configuration. const app = firebase.initializeApp(firebaseConfig);
จากนั้นเมื่อต้องการเข้าถึงเลเยอร์ข้อมูล ให้โหลดCloud Firestore ไลบรารีโดยใช้ การนำเข้าแบบไดนามิกโดยทำดังนี้
import('firebase/firestore').then(() => { const firestore = app.firestore(); // Use Cloud Firestore ... });
ความยืดหยุ่นของเครือข่าย
ผู้ใช้อาจไม่มีการเข้าถึงอินเทอร์เน็ตที่เชื่อถือได้ PWA ควรทำงานคล้ายกับแอปบนอุปกรณ์เคลื่อนที่ที่มาพร้อมเครื่องและควรทำงานแบบออฟไลน์ได้ทุกเมื่อที่เป็นไปได้
เข้าถึงข้อมูลแอปแบบออฟไลน์
Cloud Firestore รองรับ การคงอยู่ของข้อมูลออฟไลน์ ซึ่งช่วยให้ชั้นข้อมูลของแอปทำงานแบบออฟไลน์ได้อย่างโปร่งใส เมื่อรวมกับ Service Worker เพื่อ แคชเนื้อหาแบบคงที่, PWA ของคุณจะทำงานแบบออฟไลน์ได้อย่างเต็มที่ คุณสามารถเปิดใช้การคงอยู่ของข้อมูลออฟไลน์ได้ด้วยโค้ดเพียงบรรทัดเดียวโดยทำดังนี้
firebase.firestore().enablePersistence().then(() => { const firestore = app.firestore(); // Use Cloud Firestore ... });
รักษาสถานะการตรวจสอบสิทธิ์แบบออฟไลน์
Firebase Authentication จะเก็บ แคชข้อมูลการลงชื่อเข้าใช้ไว้ในเครื่อง ซึ่งช่วยให้ผู้ใช้ที่ลงชื่อเข้าใช้ก่อนหน้านี้ยังคงได้รับการ ตรวจสอบสิทธิ์แม้ว่าผู้ใช้จะออฟไลน์อยู่ก็ตาม เครื่องมือสังเกตสถานะการลงชื่อเข้าใช้จะทำงานตามปกติและทริกเกอร์แม้ว่าผู้ใช้จะโหลดแอปซ้ำขณะออฟไลน์อยู่ก็ตาม
firebase.auth().onAuthStateChanged((user) => {
if (user) {
// User is signed-in ...
} else {
// User is signed out ...
}
});ไปที่เอกสารประกอบเพื่อเริ่มต้นใช้งาน Cloud Firestore และ Firebase Authentication
ให้ผู้ใช้มีส่วนร่วม
ผู้ใช้ต้องการทราบเมื่อคุณเผยแพร่ฟีเจอร์ใหม่สำหรับแอป และคุณต้องการรักษาการมีส่วนร่วมของผู้ใช้ไว้ในระดับสูง ตั้งค่า PWA ให้เข้าถึงผู้ใช้ในเชิงรุกและอย่างมีความรับผิดชอบ
แสดงการแจ้งเตือนแบบพุชต่อผู้ใช้
With Firebase Cloud Messaging, คุณสามารถส่งการแจ้งเตือนที่เกี่ยวข้องจากเซิร์ฟเวอร์ไปยังอุปกรณ์ของผู้ใช้ได้ บริการนี้ช่วยให้คุณแสดงการแจ้งเตือนที่ทันท่วงทีต่อผู้ใช้ได้แม้ว่าแอปจะปิดอยู่ก็ตาม
ดึงดูดผู้ใช้ให้กลับมามีส่วนร่วมอีกครั้งโดยอัตโนมัติ
ใช้ Cloud Functions for Firebase, ส่งข้อความดึงดูดผู้ใช้ให้กลับมามีส่วนร่วมอีกครั้งตามเหตุการณ์ในระบบคลาวด์ เช่น การ เขียนข้อมูลลงใน Cloud Firestore หรือการ ลบบัญชีผู้ใช้ นอกจากนี้ คุณยังส่งการแจ้งเตือนแบบพุชไปยังผู้ใช้ได้ เมื่อผู้ใช้มีผู้ติดตามใหม่
// Send push notification when user gets a new follower. exports.sendNotification = functions.database.ref('/followers/{userUID}/{followerUID}') .onWrite((change, context) => { const userUID = context.params.userUID; const followerUID = context.params.followerUID; const tokens = getUserDeviceTokens(userUID); const name = getUserDisplayName(followerUID); // Notification details. const payload = { notification: { title: 'You have a new follower!', body: `${name} is now following you.` } }; return admin.messaging().sendToDevice(tokens, payload); });