ใช้ Firebase ในโปรเกรสซีฟเว็บแอป (PWA)

Progressive Web App (PWA) คือเว็บแอปที่ปฏิบัติตาม ชุดหลักเกณฑ์ เพื่อให้แน่ใจว่าผู้ใช้ของคุณจะได้รับประสบการณ์ที่เชื่อถือได้ รวดเร็ว และมีส่วนร่วม

Firebase มีบริการหลายอย่างที่ช่วยให้คุณเพิ่มฟีเจอร์ขั้นสูงให้กับแอปได้อย่างมีประสิทธิภาพเพื่อให้ตรงตามแนวทางปฏิบัติแนะนำของ PWA หลายประการ ได้แก่

แนวทางปฏิบัติที่ดีที่สุดของ กปภ บริการ Firebase สามารถช่วยได้อย่างไร
ปลอดภัยและมั่นคง
  • โฮสติ้ง Firebase จัดเตรียมใบรับรอง SSL โดยไม่มีค่าใช้จ่ายสำหรับโดเมนที่กำหนดเองและโดเมนย่อย Firebase เริ่มต้น
  • การตรวจสอบสิทธิ์ Firebase ช่วยให้คุณสามารถลงชื่อเข้าใช้ผู้ใช้บนอุปกรณ์ต่างๆ ได้อย่างปลอดภัย
  • FirebaseUI ใช้แนวทางปฏิบัติที่ดีที่สุดสำหรับขั้นตอนการตรวจสอบสิทธิ์
เวลาในการโหลดที่รวดเร็ว
  • Firebase Hosting รองรับ HTTP/2 และสามารถแคชเนื้อหาทั้งแบบคงที่และไดนามิกบน CDN ส่วนกลางได้
  • Firebase JavaScript SDK เป็นแบบโมดูลาร์ และคุณสามารถนำเข้าไลบรารีแบบไดนามิกได้เมื่อจำเป็น
ความยืดหยุ่นของเครือข่าย
  • ด้วย Cloud Firestore คุณสามารถจัดเก็บและเข้าถึงข้อมูลแบบเรียลไทม์และออฟไลน์
  • Firebase Authentication จะรักษาสถานะการตรวจสอบสิทธิ์ของผู้ใช้ แม้จะออฟไลน์อยู่ก็ตาม
มีส่วนร่วมกับผู้ใช้
  • Firebase Cloud Messaging ช่วยให้คุณสามารถส่งข้อความพุชไปยังอุปกรณ์ของผู้ใช้ได้
  • ด้วย ฟังก์ชันคลาวด์สำหรับ 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);
    });