Progressive Web App (PWA) คือเว็บแอปที่เป็นไปตามชุดหลักเกณฑ์เพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่เชื่อถือได้ รวดเร็ว และน่าสนใจ
Firebase มีบริการมากมายที่จะช่วยให้คุณเพิ่มฟีเจอร์แบบโพรเกรสซีฟลงในแอปได้��ย่างมีประสิทธิภาพเพื่อให้เป็นไปตามแนวทางปฏิบัติแนะนำมากมายของ PWA ได้แก่
| แนวทางปฏิบัติแนะนำสำหรับ PWA | บริการ Firebase จะช่วยคุณได้อย่างไร |
|---|---|
| ปลอดภัยหายห่วง |
|
| ความเร็วในการโหลด |
|
| ความยืดหยุ่นของเครือข่าย |
|
| ดึงดูดผู้ใช้ |
|
หน้านี้นำเสนอภาพรวมเกี่ยวกับวิธีที่แพลตฟอร์ม Firebase จะช่วยคุณสร้าง PWA ที่ทันสมัยและมีประสิทธิภาพสูงโดยใช้ Firebase JavaScript SDK ที่ทำงานข้ามเบราว์เซอร์ของเรา
ไปที่คู่มือเริ่มต้นใช้งานเพื่อเพิ่ม Firebase ไปยังเว็บแอป
ปลอดภัย มั่นใจได้
PWA ต้องมีเวิร์กโฟลว์ที่ปลอดภัยและเชื่อถือได้ ตั้งแต่การให้บริการเว็บไซต์ไปจนถึงการใช้ขั้นตอนการตรวจสอบสิทธิ์
แสดง PWA ผ่าน HTTPS
HTTPS ปกป้องความสมบูรณ์ของเว็บไซต์และปกป้องความเป็นส่วนตัวและความปลอดภัยของผู้ใช้ PWA ต้องแสดงผ่าน HTTPS
โฮสติ้งของ Firebase จะแสดงเนื้อหาของแอปผ่าน HTTPS โดยค่าเริ่มต้น คุณจะแสดงเนื้อหาในโดเมนย่อย Firebase ที่ไม่มีค่าใช้จ่ายหรือในโดเมนที่กำหนดเองของคุณเองก็ได้ บริการโฮสติ้งของเราจะจัดสรรใบรับรอง SSL สำหรับโดเมนที่กำหนดเองโดยอัตโนมัติโดยไม่เสียค่าใช้จ่าย
ไปที่คู่มือเริ่มต้นใช้งานโฮสติ้งของ Firebase เพื่อดูวิธีโฮสต์ PWA บนแพลตฟอร์ม Firebase
มีขั้นตอนการตรวจสอบสิทธิ์ที่ปลอดภัย
FirebaseUI มีขั้นตอนการตรวจสอบสิทธิ์แบบปรับเปลี่ยนตามอุปกรณ์แบบดรอปอินตาม การตรวจสอบสิทธิ์ของ Firebase ซึ่งช่วยให้แอปผสานรวมขั้นตอนการลงชื่อเข้าใช้ที่ซับซ้อนและปลอดภัยโดยใช้ความพยายามเพียงเล็กน้อย Firebase UI จะปรับตามขนาดหน้าจอของอุปกรณ์ของผู้ใช้โดยอัตโนมัติ และทำตามแนวทางปฏิบัติแนะนำสำหรับขั้นตอนการตรวจสอบสิทธิ์
Firebase UI รองรับผู้ให้บริการการลงชื่อเข้าใช้หลายราย เพิ่มขั้นตอนการตรวจสอบสิทธิ์ 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 ประสิทธิภาพที่ยอดเยี่ยม เช่น "เวลาที่จะ แสดงผลที่มีความหมายครั้งแรก" น้อย และ "เวลาในการโต้ตอบ" เป็นข้อกำหนดที่สำคัญสำหรับ PWA
แสดงเนื้อหาแบบคงที่อย่างมีประสิทธิภาพ
โฮสติ้งของ Firebase จะแสดงเนื้อหาของคุณบน CDN ทั่วโลกและเข้ากันได้กับ HTTP/2 เมื่อโฮสต์เนื้อหาแบบคงที่ด้วย Firebase เราจะกำหนดค่าทั้งหมดนี้ให้คุณ คุณไม่ต้องดำเนินการใดๆ เพิ่มเติมเพื่อใช้ประโยชน์��ากบริการนี้
แคชเนื้อหาแบบไดนามิกของคุณ
เมื่อใช้โฮสติ้งของ Firebase เว็บแอปของคุณสามารถแสดงเนื้อหาแบบไดนามิกซึ่งสร้างจากฝั่งเซิร์ฟเวอร์โดย Cloud Functions หรือแอปที่สร้างโดยใช้คอนเทนเนอร์ของ Cloud Run ได้ด้วย การใช้บริการนี้คุณจะแคชเนื้อหาแบบไดนามิกใน CDN ทั่วโลกที่มีประสิทธิภาพได้ด้วยโค้ดเพียงบรรทัดเดียวดังนี้
res.set('Cache-Control', 'public, max-age=300, s-maxage=600');
บริการนี้จะช่วยให้คุณหลีกเลี่ยงการโทรเพิ่มเติมไปยังระบบแบ็กเอนด์ เพิ่มความเร็วในการตอบกลับ และลดค่าใช้จ่าย
ไปที่เอกสารประกอบของเราเพื่อดูวิธีแสดงเนื้อหาแบบไดนามิก (ขับเคลื่อนโดย Cloud Functions หรือ Cloud Run) และเปิดใช้การแคช CDN ด้วยโฮสติ้งของ Firebase
โหลดบริการเมื่อจำเป็นเท่านั้น
คุณนำเข้าบางส่วน Firebase JavaScript SDK ได้เพื่อให้ขนาดการดาวน์โหลดเริ่มต้นน้อยที่สุด ใช้ประโยชน์จาก SDK แบบแยกนี้เพื่อ นำเข้าบร��การ Firebase ที่แอปของคุณต้องใช้เมื่อจําเป็นเท่านั้น
เช่น หากต้องการเพิ่มความเร็วในการระบายสีเริ่มต้นของแอป ให้แอปโหลดการตรวจสอบสิทธิ์ของ Firebase ก่อน จากนั้นเมื่อแอปต้องการ คุณก็โหลดบริการอื่นๆ ของ Firebase เช่น Cloud Firestore ได้
คุณสามารถโหลดการตรวจสอบสิทธิ์ Firebase ก่อนได้โดยใช้ตัวจัดการแพ็กเกจ เช่น Webpack
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 จะเก็บแคชข้อมูลการลงชื่อเข้าใช้ไว้ในเครื่อง ซึ่งทำให้ผู้ใช้ที่ลงชื่อเข้าใช้ก่อนหน้านี้ยังคงตรวจสอบสิทธิ์ได้แม้ว่าจะออฟไลน์อยู่ก็ตาม ผู้สังเกตการณ์สถานะการลงชื่อเข้าใช้จะทำงานตามปกติและทริกเกอร์แม้ว่าผู้ใช้จะโหลดแอปซ้ำขณะที่ออฟไลน์
firebase.auth().onAuthStateChanged((user) => {
if (user) {
// User is signed-in ...
} else {
// User is signed out ...
}
});
ไปที่เอกสารของเราเพื่อเริ่มต้นใช้งาน Cloud Firestore และการตรวจสอบสิทธิ์ Firebase
ดึงดูดผู้ใช้
ผู้ใช้ของคุณต้องการทราบว่าคุณเปิดตัวฟีเจอร์ใหม่สำหรับแอปเมื่อใด และคุณต้องการ รักษาการมีส่วนร่วมของผู้ใช้ให้สูงอยู่เสมอ ตั้งค่า PWA เพื่อเข้าถึงผู้ใช้แบบเชิงรุกและมีความรับผิดชอบ
แสดงข้อความ Push ต่อผู้ใช้ของคุณ
ด้วย Firebase Cloud Messaging คุณ���ามารถพุชการแจ้งเตือนที่เกี่ยวข้องจากเซิร์ฟเวอร์ของคุณไปยังอุปกรณ์ของผู้ใช้ได้ บริการนี้ช่วยให้คุณแสดงการแจ้งเตือนแก่ผู้ใช้ได้ทันท่วงที แม้ว่าแ����������ิดอยู่ก็ตาม
ทำให้ผู้ใช้กลับมามีส่วนร่วมอีกครั้งโดยอัตโนมัติ
ใช้ 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);
});