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 | Bantuan yang ditawarkan layanan Firebase |
|---|---|
| Aman dan terlindungi |
|
| Waktu pemuatan yang cepat |
|
| Ketahanan jaringan |
|
| Berinteraksi dengan pengguna |
|
Halaman ini berisi ringkasan tentang bantuan yang ditawarkan platform Firebase untuk membuat PWA modern berperforma tinggi menggunakan Firebase JavaScript SDK lintas browser.
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.
Menyalurkan PWA melalui HTTPS
HTTPS melindungi integritas situs Anda serta melindungi privasi dan keamanan pengguna. PWA harus disalurkan melalui HTTPS.
Firebase Hosting secara default menyalurkan konten aplikasi melalui HTTPS. Anda dapat menyalurkan konten di subdomain Firebase tanpa biaya atau di domain kustom Anda sendiri. Layanan hosting kami menyediakan sertifikat SSL untuk domain kustom Anda secara otomatis dan tanpa biaya.
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 siap pakai berdasarkan Firebase Authentication, sehingga aplikasi Anda dapat mengintegrasikan alur login yang canggih dan aman tanpa memerlukan upaya besar. FirebaseUI menyesuaikan tampilannya secara otomatis dengan ukuran layar perangkat pengguna dan mengikuti praktik terbaik untuk alur autentikasi.
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', // 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);
Buka dokumentasi kami di GitHub untuk mempelajari lebih lanjut berbagai opsi konfigurasi yang ditawarkan oleh FirebaseUI.
Memproses login pengguna lintas perangkat
Dengan menggunakan FirebaseUI untuk mengintegrasikan proses login sekali ketuk, aplikasi Anda dapat memproses login pengguna secara otomatis, bahkan pada berbagai perangkat yang telah disiapkan dengan kredensial loginnya.
Aktifkan proses login sekali ketuk menggunakan FirebaseUI dengan mengubah satu baris konfigurasi:
// 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
};
Buka dokumentasi kami di GitHub untuk mempelajari lebih lanjut berbagai opsi konfigurasi yang ditawarkan oleh FirebaseUI.
Waktu pemuatan yang cepat
Memiliki performa yang hebat dapat meningkatkan pengalaman pengguna, membantu retensi pengguna, dan meningkatkan konversi. Performa yang hebat, seperti "waktu untuk first meaningful paint" dan "waktu untuk interaktif" yang rendah, merupakan persyaratan penting bagi PWA.
Menyalurkan aset statis secara efisien
Firebase Hosting menyalurkan konten Anda melalui CDN global dan kompatibel dengan HTTP/2. Jika Anda menghosting aset statis di Firebase, kami mengonfigurasi semuanya. Artinya, tidak ada lagi yang perlu Anda lakukan untuk memanfaatkan layanan ini.
Menyimpan konten dinamis ke dalam cache
Dengan Firebase Hosting, aplikasi web Anda juga dapat menyalurkan konten dinamis yang dibuat di sisi server oleh Cloud Functions atau aplikasi dalam container pada Cloud Run. Dengan menggunakan layanan ini, Anda dapat menyimpan konten dinamis ke dalam cache 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 atau Cloud Run) dan mengaktifkan caching CDN dengan Firebase Hosting.
Memuat layanan hanya saat dibutuhkan
Firebase JavaScript SDK dapat diimpor secara parsial untuk meminimalkan ukuran download awal. Manfaatkan SDK modular ini untuk mengimpor layanan Firebase yang diperlukan aplikasi hanya 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 ...
});
Ketahanan jaringan
Akses internet pengguna Anda mungkin tidak selalu bagus. PWA harus berperilaku mirip dengan aplikasi seluler native dan harus berfungsi saat offline, jika memungkinkan.
Mengakses data aplikasi saat offline
Cloud Firestore mendukung persistensi data offline sehingga lapisan data aplikasi Anda dapat bekerja secara transparan saat offline. Bersama dengan Pekerja Layanan untuk menyimpan aset statis ke dalam cache, PWA Anda dapat sepenuhnya berfungsi saat offline. Anda dapat mengaktifkan persistensi data offline dengan satu baris kode:
firebase.firestore().enablePersistence().then(() => {
const firestore = app.firestore();
// Use Cloud Firestore ...
});
Mempertahankan status autentikasi saat offline
Firebase Authentication menyimpan cache lokal yang berisi data login, sehingga pengguna yang login sebelumnya tetap dapat diautentikasi meski sedang offline. Observer status login akan berfungsi secara normal dan dipicu meskipun jika 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 waktu rilis fitur baru untuk aplikasi, dan Anda pasti ingin mempertahankan interaksi pengguna yang tinggi. Siapkan PWA Anda untuk menjangkau pengguna secara proaktif dan bertanggung jawab.
Menampilkan notifikasi push kepada pengguna
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 meskipun ketika aplikasi ditutup.
Mengotomatiskan interaksi ulang pengguna
Dengan Cloud Functions for Firebase, Anda dapat mengirim pesan interaksi ulang kepada pengguna berdasarkan peristiwa cloud, misalnya penulisan data 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);
});