Dipublikasikan: 2 Desember 2020
Sejak Aktivitas Web Tepercaya diperkenalkan, tim Chrome telah memudahkan penggunaannya dengan Bubblewrap. Kami telah menambahkan fitur tambahan, seperti integrasi Layanan Penagihan Google Play, dan mengaktifkannya agar berfungsi di lebih banyak platform, seperti ChromeOS.
Fitur Bubblewrap dan Aktivitas Web Tepercaya
Bubblewrap membantu Anda membuat aplikasi yang meluncurkan PWA di dalam Aktivitas Web Tepercaya, tanpa memerlukan pengetahuan tentang alat khusus platform.
Alur penyiapan yang disederhanakan
Sebelumnya, penggunaan Bubblewrap memerlukan penyiapan Java Development Kit dan Android SDK secara manual, yang keduanya rentan terhadap error. Alat ini kini menawarkan untuk mendownload dependensi eksternal secara otomatis saat dijalankan untuk pertama kalinya.
Anda masih dapat memilih untuk menggunakan penginstalan dependensi yang ada, jika Anda memilih untuk melakukannya,
dan perintah doctor baru membantu menemukan masalah dan merekomendasikan perbaikan pada konfigurasi, yang kini dapat
diupdate dari command line menggunakan perintah updateConfig.
Wizard yang ditingkatkan
Saat membuat project dengan init, Bubblewrap memerlukan informasi untuk membuat aplikasi Android. Alat ini
mengekstrak nilai dari Manifes Aplikasi Web dan memberikan default jika memungkinkan.
Anda dapat mengubah nilai tersebut saat membuat project baru, tetapi sebelumnya arti setiap kolom tidak jelas. Dialog inisialisasi dibuat ulang dengan deskripsi dan validasi yang lebih baik untuk setiap kolom input.
Menampilkan dukungan orientasi dan layar penuh
Dalam beberapa kasus, Anda mungkin ingin aplikasi menggunakan layar sebanyak mungkin dan, saat
mem-build PWA, hal ini diterapkan dengan menetapkan kolom display dari Manifes Aplikasi Web ke
fullscreen.
Saat mendeteksi opsi layar penuh di Manifes Aplikasi Web, Bubblewrap akan mengonfigurasi aplikasi Android agar juga diluncurkan dalam layar penuh, atau mode imersif, dalam istilah khusus Android.
Kolom orientation dari Manifes Aplikasi Web menentukan apakah aplikasi harus dimulai dalam
mode potret, mode lanskap, atau dalam orientasi yang saat ini digunakan perangkat. Bubblewrap kini
membaca kolom Manifes Aplikasi Web dan menggunakannya sebagai default saat membuat aplikasi Android.
Anda dapat menyesuaikan kedua konfigurasi tersebut sebagai bagian dari alur bubblewrap init.
Output AppBundle
App Bundle adalah format publikasi untuk aplikasi yang mendelegasikan pembuatan dan penandatanganan APK final ke Play. Dalam praktiknya, hal ini memungkinkan file yang lebih kecil ditayangkan kepada pengguna saat mendownload aplikasi dari Play Store.
Bubblewrap kini memaketkan aplikasi sebagai App Bundle, dalam file yang disebut
app-release-bundle.aab. Anda harus memilih format ini saat memublikasikan aplikasi ke
Play Store, karena diperlukan oleh Play Store mulai tahun 2021.
Delegasi geolokasi
Pengguna mengharapkan aplikasi yang diinstal di perangkat mereka berperilaku secara konsisten, terlepas dari teknologi. Saat digunakan di dalam Aktivitas Web Tepercaya, izin GeoLocation kini dapat didelegasikan ke Sistem Operasi dan, jika diaktifkan, pengguna akan melihat dialog yang sama seperti aplikasi yang di-build dengan Kotlin atau Java, dan menemukan kontrol untuk mengelola izin di tempat yang sama.
Fitur ini dapat ditambahkan melalui Bubblewrap dan, karena menambahkan dependensi tambahan ke project Android, Anda hanya boleh mengaktifkannya saat aplikasi web menggunakan izin Geolokasi.
Biner yang dioptimalkan
Perangkat dengan penyimpanan terbatas umum ditemukan di wilayah tertentu di dunia, dan pemilik perangkat tersebut sering kali lebih memilih aplikasi yang lebih kecil. Aplikasi yang menggunakan Aktivitas Web Tepercaya menghasilkan biner kecil, yang menghilangkan sebagian kecemasan dari pengguna tersebut.
Bubblewrap telah dioptimalkan dengan mengurangi daftar library Android yang diperlukan, sehingga menghasilkan biner yang dihasilkan yang 800 ribu lebih kecil. Dalam praktiknya, ukuran ini kurang dari setengah ukuran rata-rata yang dihasilkan oleh versi sebelumnya. Untuk memanfaatkan biner yang lebih kecil, Anda hanya perlu mengupdate aplikasi menggunakan Bubblewrap versi terbaru.
Cara mengupdate aplikasi yang ada
Aplikasi yang dihasilkan oleh Bubblewrap terdiri dari aplikasi web dan wrapper Android ringan yang membuka PWA. Meskipun PWA yang dibuka di dalam Aktivitas Web Tepercaya mengikuti siklus update yang sama seperti aplikasi web lainnya, wrapper native dapat dan harus diupdate.
Anda harus mengupdate aplikasi untuk memastikan aplikasi menggunakan wrapper versi terbaru, dengan perbaikan bug dan fitur terbaru. Dengan menginstal Bubblewrap versi terbaru, perintah
update akan menerapkan wrapper versi terbaru ke project yang ada:
npm update -g @bubblewrap/cli
bubblewrap update
bubblewrap build
Alasan lain untuk mengupdate aplikasi tersebut adalah memastikan bahwa perubahan pada Manifes Web
diterapkan ke aplikasi. Gunakan perintah merge baru untuk melakukannya:
bubblewrap merge
bubblewrap update
bubblewrap build
Pembaruan pada Kriteria Kualitas
Chrome 86 memperkenalkan perubahan pada Kriteria Kualitas Aktivitas Web Tepercaya, yang dijelaskan secara lengkap di Perubahan kriteria kualitas untuk PWA yang menggunakan Aktivitas Web Tepercaya.
Ringkasan singkatnya adalah Anda harus memastikan aplikasi menangani skenario berikut untuk mencegahnya error:
- Kegagalan memverifikasi link aset digital saat peluncuran aplikasi
- Kegagalan untuk menampilkan HTTP 200 untuk permintaan resource jaringan offline
- Menampilkan error HTTP 404 atau 5xx di aplikasi.
Selain memastikan bahwa aplikasi lulus validasi Digital Asset Links, skenario lainnya dapat ditangani oleh pekerja layanan:
self.addEventListener('fetch', event => {
event.respondWith((async () => {
try {
return await fetchAndHandleError(event.request);
} catch {
// Failed to load from the network. User is offline or the response
// has a status code that triggers the Quality Criteria.
// Try loading from cache.
const cachedResponse = await caches.match(event.request);
if (cachedResponse) {
return cachedResponse;
}
// Response was not found on the cache. Send the error / offline
// page. OFFLINE_PAGE should be pre-cached when the service worker
// is activated.
return await caches.match(OFFLINE_PAGE);
}
})());
});
async function fetchAndHandleError(request) {
const cache = await caches.open(RUNTIME_CACHE);
const response = await fetch(request);
// Throw an error if the response returns one of the status
// that trigger the Quality Criteria.
if (response.status === 404 ||
response.status >= 500 && response.status < 600) {
throw new Error(`Server responded with status: ${response.status}`);
}
// Cache the response if the request is successful.
cache.put(request, response.clone());
return response;
}
Workbox menerapkan praktik terbaik dan menghapus boilerplate saat menggunakan pekerja layanan. Atau, pertimbangkan untuk menggunakan plugin Workbox untuk menangani skenario tersebut:
export class FallbackOnErrorPlugin {
constructor(offlineFallbackUrl, notFoundFallbackUrl, serverErrorFallbackUrl) {
this.notFoundFallbackUrl = notFoundFallbackUrl;
this.offlineFallbackUrl = offlineFallbackUrl;
this.serverErrorFallbackUrl = serverErrorFallbackUrl;
}
checkTrustedWebActivityCrash(response) {
if (response.status === 404 || response.status >= 500 && response.status <= 600) {
const type = response.status === 404 ? 'E_NOT_FOUND' : 'E_SERVER_ERROR';
const error = new Error(`Invalid response status (${response.status})`);
error.type = type;
throw error;
}
}
// This is called whenever there's a network response,
// but we want special behavior for 404 and 5**.
fetchDidSucceed({response}) {
// Cause a crash if this is a Trusted Web Activity crash.
this.checkTrustedWebActivityCrash(response);
// If it's a good response, it can be used as-is.
return response;
}
// This callback is new in Workbox v6, and is triggered whenever
// an error (including a NetworkError) is thrown when a handler runs.
handlerDidError(details) {
let fallbackURL;
switch (details.error.details.error.type) {
case 'E_NOT_FOUND': fallbackURL = this.notFoundFallbackUrl; break;
case 'E_SERVER_ERROR': fallbackURL = this.serverErrorFallbackUrl; break;
default: fallbackURL = this.offlineFallbackUrl;
}
return caches.match(fallbackURL, {
// Use ignoreSearch as a shortcut to work with precached URLs
// that have _WB_REVISION parameters.
ignoreSearch: true,
});
}
}