Progressive Web App (PWA) คือเว็บแอปที่ปฏิบัติตาม ชุดหลักเกณฑ์ เพื่อให้แน่ใจว่าผู้ใช้ของคุณจะได้รับประสบการณ์ที่เชื่อถือได้ รวดเร็ว และมีส่วนร่วม
Firebase มีบริการหลายอย่างที่ช่วยให้คุณเพิ่มฟีเจอร์ขั้นสูงให้กับแอปได้อย่างมีประสิทธิภาพเพื่อให้ตรงตามแนวทางปฏิบัติแนะนำของ PWA หลายประการ ได้แก่
แนวทางปฏิบัติที่ดีที่สุดของ กปภ | บริการ Firebase สามารถช่วยได้อย่างไร |
---|---|
ปลอดภัยและมั่นคง |
|
เวลาในการโหลดที่รวดเร็ว |
|
ความยืดหยุ่นของเครือข่าย |
|
มีส่วนร่วมกับผู้ใช้ |
|
หน้านี้นำเสนอภาพรวมว่าแพลตฟอร์ม Firebase สามารถช่วยคุณสร้าง PWA ที่ทันสมัยและมีประสิทธิภาพสูงได้อย่างไรโดยใช้ Firebase JavaScript SDK แบบข้ามเบราว์เซอร์ของเรา
ไปที่ คู่มือการเริ่มต้นใช้งาน เพื่อเพิ่ม Firebase ให้กับเว็บแอปของคุณ
ปลอดภัยและมั่นคง
ตั้งแต่การให้บริการไซต์ของคุณไปจนถึงการใช้ขั้นตอนการตรวจสอบสิทธิ์ PWA ของคุณจะต้องจัดเตรียมขั้นตอนการทำงานที่ปลอดภัยและเชื่อถือได้
ให้บริการ PWA ของคุณผ่าน HTTPS
HTTPS ปกป้องความสมบูรณ์ของเว็บไซต์ของคุณและปกป้องความเป็นส่วนตัวและความปลอดภัยของผู้ใช้ของคุณ PWA ต้องให้บริการผ่าน HTTPS
โดยค่าเริ่มต้น โฮสติ้งของ Firebase จะให้บริการเนื้อหาแอปของคุณผ่าน HTTPS คุณสามารถแสดงเนื้อหาของคุณบนโดเมนย่อย Firebase ที่ไม่มีค่าใช้จ่ายหรือใน โดเมนที่คุณกำหนด เอง บริการโฮสติ้งของเราจัดเตรียมใบรับรอง SSL สำหรับโดเมนที่คุณกำหนดเองโดยอัตโนมัติและไม่มีค่าใช้จ่าย
ไปที่ คู่มือเริ่มต้นใช้งานโฮสติ้ง Firebase เพื่อเรียนรู้วิธีโฮสต์ 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
เวลาในการโหลดที่รวดเร็ว
การมีประสิทธิภาพที่ยอดเยี่ยมช่วยปรับปรุงประสบการณ์ผู้ใช้ ช่วยรักษาผู้ใช้ และเพิ่มการแปลง ประสิทธิภาพที่ยอดเยี่ยม เช่น "เวลาใน การทาสีที่มีความหมายครั้งแรก " และ " เวลาในการโต้ตอบ " ที่ต่ำ ถือเป็นข้อกำหนดที่สำคัญสำหรับ 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 Workers เพื่อ แคชเนื้อหาคงที่ของคุณ PWA ของคุณจะสามารถทำงานแบบออฟไลน์ได้อย่างสมบูรณ์ คุณสามารถเปิดใช้งานการคงอยู่ของข้อมูลออฟไลน์ได้ด้วยโค้ดหนึ่งบรรทัด:
firebase.firestore().enablePersistence().then(() => { const firestore = app.firestore(); // Use Cloud Firestore ... });
รักษาสถานะการตรวจสอบสิทธิ์แบบออฟไลน์
การตรวจสอบสิทธิ์ Firebase จะเก็บแคชของข้อมูลการลงชื่อเข้าใช้ในเครื่อง ทำให้ผู้ใช้ที่ลงชื่อเข้าใช้ก่อนหน้านี้ยังคงตรวจสอบสิทธิ์ได้แม้ในขณะที่ออฟไลน์ ผู้สังเกตการณ์สถานะการลงชื่อเข้าใช้จะทำงานตามปกติและทริกเกอร์แม้ว่าผู้ใช้ของคุณจะโหลดแอปซ้ำขณะออฟไลน์:
firebase.auth().onAuthStateChanged((user) => { if (user) { // User is signed-in ... } else { // User is signed out ... } });
ไปที่เอกสารของเราเพื่อเริ่มต้นใช้งาน Cloud Firestore และ Firebase Authentication
มีส่วนร่วมกับผู้ใช้
ผู้ใช้ของคุณต้องการทราบเมื่อคุณเปิดตัวคุณลักษณะใหม่สำหรับแอปของคุณ และคุณต้องการให้ผู้ใช้มีส่วนร่วมสูง ตั้งค่า PWA เพื่อเข้าถึงผู้ใช้ในเชิงรุกและมีความรับผิดชอบ
แสดงการแจ้งเตือนแบบพุชแก่ผู้ใช้ของคุณ
ด้วย Firebase Cloud Messaging คุณสามารถส่งการแจ้งเตือนที่เกี่ยวข้องจากเซิร์ฟเวอร์ของคุณไปยังอุปกรณ์ของผู้ใช้ได้ บริการนี้ช่วยให้คุณแสดงการแจ้งเตือนอย่างทันท่วงทีแก่ผู้ใช้ของคุณแม้ในขณะที่แอปปิดอยู่
ทำให้ผู้ใช้มีส่วนร่วมอีกครั้งโดยอัตโนมัติ
การใช้ ฟังก์ชันคลาวด์สำหรับ 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); });