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 โดยเปลี่ยนการกําหนดค่า 1 บรรทัด ดังนี้
// 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 ประสิทธิภาพที่ยอดเยี่ยม เช่น "เวลาในการตอบสนอง" ที่ต่ำสำหรับ First Contentful Paint และ Time to Interactive เป็นข้อกําหนดที่สําคัญสําหรับ PWA
แสดงชิ้นงานแบบคงที่อย่างมีประสิทธิภาพ
Firebase Hosting แสดงเนื้อหาของคุณผ่าน CDN ทั่วโลก และใช้งานร่วมกับ HTTP/2 ได้ เมื่อคุณโฮสต์ชิ้นงานแบบคงที่กับ Firebase เราจะกำหนดค่าทั้งหมดให้คุณ คุณจึงไม่ต้องดำเนินการใดๆ เพิ่มเติมเพื่อใช้ประโยชน์จากบริการนี้
แคชเนื้อหาแบบไดนามิก
เมื่อใช้ Firebase Hosting เว็บแอปของคุณจะแสดงเนื้อหาแบบไดนามิกที่Cloud Functions หรือCloud Run แอปที่ใช้คอนเทนเนอร์สร้างขึ้นฝั่งเซิร์ฟเวอร์ได้ด้วย บริการนี้ช่วยให้คุณแคชเนื้อหาแบบไดนามิกใน CDN ทั่วโลกที่มีประสิทธิภาพได้ด้วยโค้ดเพียง 1 บรรทัด ดังนี้
res.set('Cache-Control', 'public, max-age=300, s-maxage=600');
บริการนี้ช่วยให้คุณหลีกเลี่ยงการเรียกใช้แบ็กเอนด์เพิ่มเติม เพิ่มความเร็วในการตอบกลับ และลดค่าใช้จ่ายได้
โปรดไปที่เอกสารประกอบเพื่อดูวิธีแสดงเนื้อหาแบบไดนามิก (ขับเคลื่อนโดย Cloud Functions หรือ Cloud Run) และเปิดใช้การแคช CDN ด้วย Firebase Hosting
โหลดบริการเมื่อจําเป็นเท่านั้น
คุณนําเข้าบางส่วนของ SDK Firebase JavaScript ได้เพื่อลดขนาดการดาวน์โหลดครั้งแรกให้เหลือน้อยที่สุด ใช้ประโยชน์จาก SDK แบบแยกส่วนของ Firebase เพื่อนำเข้าบริการ 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 เพื่อเข้าถึงผู้ใช้อย่างรับผิดชอบและเชิงรุก
แสดงข้อความ Push ต่อผู้ใช้
Firebase Cloud Messaging ช่วยให้คุณส่งข้อความ Push ที่เกี่ยวข้องจากเซิร์ฟเวอร์ไปยังอุปกรณ์ของผู้ใช้ได้ บริการนี้ช่วยให้คุณแสดงการแจ้งเตือนที่ตรงเวลาแก่ผู้ใช้ได้แม้ว่าแอปจะปิดอยู่ก็ตาม
ดึงดูดผู้ใช้ให้กลับมามีส่วนร่วมอีกครั้งโดยอัตโนมัติ
ใช้ Cloud Functions for Firebase เพื่อส่งข้อความเพื่อดึงดูดผู้ใช้ให้กลับมามีส่วนร่วมอีกครั้งโดยอิงตามเหตุการณ์ในระบบคลาวด์ เช่น การเขียนข้อมูลไปยัง Cloud Firestore หรือการลบบัญชีผู้ใช้ นอกจากนี้ คุณยังส่งข้อความ Push ไปยังผู้ใช้ได้เมื่อผู้ใช้รายนั้นมีผู้ติดตามใหม่ โดยทำดังนี้
// 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); });