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 หรือของคุณเอง custom domain บริการโฮสติ้งจะจัดสรรใบรับรอง 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 ประสิทธิภาพการทำงานที่ดีเยี่ยม เช่น "เวลาในการแก้ไข" ต่ำ การแสดงผลที่มีความหมายครั้งแรก" และ "เวลาในการโต้ตอบ" ถือเป็นข้อกำหนดที่สำคัญสำหรับ 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
โหลดบริการเมื่อจำเป็นเท่านั้น
SDK JavaScript Firebase รายการสามารถ นำเข้าบางส่วน เพื่อให้การดาวน์โหลดเริ่มต้นมีขนาดน้อยที่สุด ใช้ประโยชน์จาก 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 ให้ทำงานแบบเชิงรุกและมีความรับผิดชอบ เข้าถึงผู้ใช้ของคุณได้
แสดงข้อความ 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);
});