ใช้ Firebase ใน Progressive Web App (PWA)

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

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

หน้านี้จะให้ภาพรวมเกี่ยวกับวิธีที่แพลตฟอร์ม 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 ด้วยการเปลี่ยนการกำหนดค่าเพียงบรรทัดเดียว

// 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

โหลดบริการเมื่อจำเป็นเท่านั้น

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 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 ให้เข้าถึงผู้ใช้อย่างเชิงรุกและมีความรับผิดชอบ

แสดงการแจ้งเตือนแบบพุชต่อผู้ใช้

With Firebase Cloud Messaging, คุณสามารถส่งการแจ้งเตือนที่เกี่ยวข้องจากเซิร์ฟเวอร์ไปยังอุปกรณ์ของผู้ใช้ได้ บริการนี้ช่วยให้คุณแสดงการแจ้งเตือนที่ทันท่วงทีต่อผู้ใช้ได้แม้ว่าแอปจะปิดอยู่ก็ตาม

ดึงดูดผู้ใช้ให้กลับมามีส่วนร่วมอีกครั้งโดยอัตโนมัติ

ใช้ Cloud Functions for 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);
    });