Menggunakan Firebase di Progressive Web App

Progressive Web App (PWA) adalah aplikasi web yang mengikuti serangkaian pedoman yang dimaksudkan untuk memastikan bahwa pengguna Anda memiliki pengalaman yang andal, cepat, dan menarik.

Firebase menawarkan beberapa layanan yang dapat membantu Anda menambahkan fitur progresif ke aplikasi secara efisien untuk memenuhi berbagai praktik terbaik PWA, termasuk:

Praktik terbaik PWA Cara layanan Firebase dapat membantu
Aman dan terlindungi
  • Firebase Hosting menyediakan sertifikat SSL gratis untuk domain kustom Anda dan subdomain Firebase default.
  • Firebase Authentication memungkinkan Anda membuat pengguna login di semua perangkat dengan aman.
  • FirebaseUI menerapkan praktik terbaik untuk alur autentikasi.
Waktu muat yang cepat
  • Firebase Hosting mendukung HTTP/2 dan menyimpan konten statis dan dinamis Anda pada CDN global.
  • Firebase JavaScript SDK bersifat modular, dan Anda dapat mengimpor library secara dinamis saat dibutuhkan.
Ketahanan jaringan
  • Dengan Cloud Firestore, Anda dapat menyimpan dan mengakses data secara real time dan offline.
  • Firebase Authentication mempertahankan status autentikasi pengguna, bahkan saat offline.
Berinteraksi dengan pengguna
  • Firebase Cloud Messaging memungkinkan Anda mengirim pesan push ke perangkat pengguna.
  • Dengan Cloud Functions for Firebase, Anda dapat mengotomatiskan pesan interaksi ulang berdasarkan peristiwa cloud.

Halaman ini berisi ringkasan tentang cara platform Firebase dapat membantu Anda membuat PWA modern berperforma tinggi menggunakan Firebase JavaScript SDK lintas browser kami.

Sebagai contoh penggunaan Firebase untuk membuat PWA, lihat aplikasi sampel open source FriendlyPix kami. Buka panduan memulai untuk menambahkan Firebase ke aplikasi web Anda.

Aman dan terlindungi

Mulai dari menayangkan situs hingga menerapkan alur autentikasi, PWA Anda harus memberikan alur kerja yang aman dan tepercaya.

Menayangkan PWA Anda melalui HTTPS

Layanan hosting yang ampuh

HTTPS melindungi integritas situs Anda serta melindungi privasi dan keamanan pengguna. PWA harus ditayangkan melalui HTTPS.

Firebase Hosting, secara default, menayangkan konten aplikasi melalui HTTPS. Anda dapat menayangkan konten di subdomain Firebase gratis atau di domain kustom milik sendiri. Layanan hosting kami menyediakan sertifikat SSL untuk domain kustom Anda secara otomatis dan gratis.

Buka panduan memulai untuk Firebase Hosting guna mempelajari cara menghosting PWA Anda pada platform Firebase.

Menawarkan alur autentikasi yang aman

FirebaseUI memberikan alur autentikasi responsif drop-in berdasarkan Firebase Authentication, yang memungkinkan aplikasi Anda mengintegrasikan alur login yang canggih dan aman dengan mudah. FirebaseUI menyesuaikan tampilannya secara otomatis dengan ukuran layar perangkat pengguna dan mengikuti praktik terbaik untuk alur autentikasi.

Alur autentikasi responsif drop-in

FirebaseUI mendukung beberapa penyedia login. Tambahkan alur autentikasi FirebaseUI ke aplikasi Anda hanya dengan beberapa baris kode yang dikonfigurasi untuk penyedia login:

// FirebaseUI config.
var uiConfig = {
  signInSuccessUrl: 'url-to-redirect-to-on-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);

Buka dokumentasi kami di GitHub untuk mempelajari lebih lanjut berbagai opsi konfigurasi yang ditawarkan oleh FirebaseUI.

Membuat pengguna login di semua perangkat

Login di semua perangkat

Dengan menggunakan FirebaseUI untuk mengintegrasikan proses login dengan sekali tap, aplikasi Anda dapat membuat pengguna login secara otomatis, bahkan pada perangkat berbeda yang telah disiapkan dengan kredensial loginnya.

Aktifkan proses login dengan sekali tap menggunakan FirebaseUI dengan mengubah satu baris konfigurasi:

// FirebaseUI config.
var uiConfig = {
  signInSuccessUrl: 'url-to-redirect-to-on-success',
  authMethod: 'https://accounts.google.com',
  signInOptions: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
  // Enable one-tap sign-in.
  credentialHelper: firebaseui.auth.CredentialHelper.GOOGLE_YOLO
};

Buka dokumentasi kami di GitHub untuk mempelajari lebih lanjut berbagai opsi konfigurasi yang ditawarkan oleh FirebaseUI.

Waktu muat yang cepat

Memiliki performa yang hebat dapat meningkatkan pengalaman pengguna, membantu mempertahankan pengguna, dan meningkatkan konversi. Performa yang hebat, seperti rendahnya "waktu untuk first meaningful paint" dan "waktu untuk interaktif", merupakan persyaratan penting bagi PWA.

Menayangkan aset statis Anda secara efisien

Layanan hosting yang ampuh

Firebase Hosting menayangkan konten Anda melalui CDN global dan kompatibel dengan HTTP/2. Ketika Anda menghosting aset statis dengan Firebase, kami mengonfigurasikan semuanya untuk Anda. Artinya, tidak ada lagi yang perlu Anda lakukan untuk memanfaatkan layanan ini.

Menyimpan konten dinamis Anda

Dengan Firebase Hosting, aplikasi web Anda juga dapat menayangkan konten dinamis yang dihasilkan dari sisi server oleh Cloud Functions. Dengan menggunakan layanan ini, Anda dapat menyimpan konten dinamis di CDN global yang canggih dengan satu baris kode:

res.set('Cache-Control', 'public, max-age=300, s-maxage=600');

Layanan ini memungkinkan Anda menghindari panggilan tambahan ke backend, mempercepat respons, dan mengurangi biaya.

Buka dokumentasi kami untuk mempelajari cara menayangkan konten dinamis (dengan teknologi Cloud Functions) dan mengaktifkan penyimpanan CDN dengan Firebase Hosting.

Memuat layanan hanya saat dibutuhkan

Firebase JavaScript SDK dapat diimpor secara parsial untuk menjaga agar ukuran download awal tetap minimal. Manfaatkan SDK modular ini untuk mengimpor layanan Firebase yang hanya diperlukan aplikasi Anda saat dibutuhkan.

Misalnya, untuk meningkatkan kecepatan paint awal, aplikasi Anda dapat memuat Firebase Authentication terlebih dahulu. Kemudian, ketika aplikasi membutuhkannya, Anda dapat memuat layanan Firebase lainnya, seperti Cloud Firestore.

Dengan pengelola paket seperti webpack, Anda dapat memuat Firebase Authentication terlebih dahulu:

import firebase from 'firebase/app';
import 'firebase/auth';

// Load Firebase project configuration.
const app = firebase.initializeApp(firebaseConfig);

Kemudian, ketika Anda perlu mengakses lapisan data, muat library Cloud Firestore menggunakan impor dinamis:

import('firebase/firestore').then(() => {
  const firestore = app.firestore();
  // Use Cloud Firestore ...
});

Untuk melihat contoh impor parsial dan dinamis dengan Firebase, lihat aplikasi sampel open source FriendlyPix kami yang mendemonstrasikan teknik ini.

Ketahanan jaringan

Pengguna Anda mungkin tidak memiliki akses internet yang dapat diandalkan. PWA harus berperilaku mirip dengan aplikasi seluler native dan harus berfungsi saat offline, jika memungkinkan.

Mengakses data aplikasi Anda saat offline

Cloud Firestore mendukung persistensi data offline yang memungkinkan lapisan data aplikasi Anda bekerja secara transparan saat offline. Bersama dengan Pekerja Layanan dalam menyimpan aset statis, PWA Anda dapat sepenuhnya berfungsi saat offline. Anda dapat mengaktifkan persistensi data offline dengan satu baris kode:

firebase.firestore().enablePersistance().then(() => {
  const firestore = app.firestore();
  // Use Cloud Firestore ...
});

Mempertahankan status autentikasi saat offline

Firebase Authentication menyimpan cache lokal dari data login, sehingga pengguna yang login sebelumnya tetap dapat diautentikasi meski sedang offline. Observer status login akan berfungsi secara normal dan dipicu meski pengguna memuat ulang aplikasi saat offline:

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed-in ...
  } else {
    // User is signed out ...
  }
});

Buka dokumentasi kami untuk memulai Cloud Firestore dan Firebase Authentication.

Berinteraksi dengan pengguna

Pengguna ingin tahu kapan Anda merilis fitur baru untuk aplikasi, dan Anda pasti ingin menjaga interaksi pengguna tetap tinggi. Siapkan PWA Anda untuk menjangkau pengguna secara proaktif dan responsif.

Menampilkan notifikasi push kepada pengguna Anda

Dengan Firebase Cloud Messaging, Anda dapat mengirim notifikasi yang relevan dari server ke perangkat pengguna. Layanan ini memungkinkan Anda menampilkan notifikasi tepat waktu kepada pengguna meski aplikasi ditutup.

Mengotomatiskan interaksi ulang pengguna

Dengan Cloud Functions for Firebase, Anda dapat mengirim pesan interaksi ulang kepada pengguna berdasarkan peristiwa cloud, misalnya data yang ditulis ke Cloud Firestore atau penghapusan akun pengguna. Anda juga dapat mengirim notifikasi push kepada pengguna ketika pengguna tersebut mendapatkan pengikut baru:

// 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);
    });

Kirim masukan tentang...

Butuh bantuan? Kunjungi halaman dukungan kami.