Halaman ini diterjemahkan oleh Cloud Translation API.

Yang baru untuk Web In Play

André Cipriani Bandarra

Adriana Jara

Sejak Aktivitas Web Tepercaya diperkenalkan tahun lalu, tim Chrome terus mengerjakan produk, sehingga mempermudah penggunaan dengan Bubblewrap, menambahkan fitur baru seperti integrasi Layanan Penagihan Google Play mendatang, dan memungkinkannya berfungsi di lebih banyak platform, seperti ChromeOS. Artikel ini akan meringkas pembaruan terkini dan mendatang untuk Aktivitas Web Tepercaya.

Fitur Bubblewrap dan Aktivitas Web Tepercaya baru

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, karena keduanya rentan terhadap error. Alat ini kini menawarkan untuk otomatis mendownload dependensi eksternal saat dijalankan untuk pertama kalinya.

Anda tetap dapat memilih untuk menggunakan penginstalan dependensi yang ada jika ingin melakukannya, dan perintah doctor baru akan 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.

tampilan: dukungan orientasi dan layar penuh

Dalam beberapa kasus, Anda mungkin ingin aplikasi menggunakan layar sebanyak mungkin dan, saat membuat PWA, hal ini diterapkan dengan menyetel kolom display dari Manifes Aplikasi Web ke fullscreen.

Saat mendeteksi opsi layar penuh di Manifes Aplikasi Web, Bubblewrap akan mengonfigurasi aplikasi Android agar diluncurkan juga 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 sedang digunakan perangkat. Bubblewrap kini membaca kolom Manifes Aplikasi Web dan menggunakannya sebagai default saat membuat aplikasi Android.

Anda dapat menyesuaikan kedua konfigurasi yang dapat disesuaikan sebagai bagian dari alur bubblewrap init.

Output AppBundles

App Bundle adalah format publikasi untuk aplikasi yang mendelegasikan pembuatan APK akhir dan penandatanganan ke Play. Dalam praktiknya, hal ini memungkinkan file yang lebih kecil untuk ditayangkan kepada pengguna saat mendownload aplikasi dari Play Store.

Bubblewrap kini memaketkan aplikasi sebagai App Bundle, dalam file bernama app-release-bundle.aab. Sebaiknya pilih format ini saat memublikasikan aplikasi ke Play Store karena akan diperlukan oleh app store mulai paruh kedua tahun 2021.

Delegasi geolokasi

Pengguna berharap aplikasi yang diinstal di perangkat mereka berperilaku secara konsisten, apa pun teknologi. Saat digunakan di dalam Aktivitas Web Tepercaya, izin GeoLocation sekarang dapat didelegasikan ke Sistem Operasi dan, jika diaktifkan, pengguna akan melihat dialog yang sama dengan aplikasi yang dibangun dengan Kotlin atau Java, serta 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 biasa 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 pengguna tersebut.

Bubblewrap telah dioptimalkan dengan mengurangi daftar library Android yang diperlukan, sehingga menghasilkan biner yang berukuran 800 ribu lebih kecil. Dalam praktiknya, itu 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 dibuka di dalam Aktivitas Web Tepercaya mengikuti siklus update yang sama seperti aplikasi web apa pun, wrapper native dapat dan harus diupdate.

Anda harus mengupdate aplikasi untuk memastikan bahwa aplikasi menggunakan wrapper versi terbaru, dengan perbaikan bug dan fitur terbaru. Dengan Bubblewrap versi terbaru terinstal, 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 menggunakan Aktivitas Web Tepercaya.

Ringkasan singkatnya adalah Anda harus memastikan aplikasi menangani skenario berikut untuk mencegahnya agar tidak error:

Kegagalan dalam memverifikasi link aset digital saat aplikasi diluncurkan
Kegagalan menampilkan HTTP 200 untuk permintaan resource jaringan offline
Menampilkan error HTTP 404 atau 5xx dalam aplikasi.

Selain memastikan bahwa aplikasi lulus validasi Digital Asset Links, skenario yang tersisa 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 mengikuti 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,
    });
  }
}

Layanan Penagihan Google Play

Selain memungkinkan aplikasi Anda menjual produk dan langganan digital di Play Store, Layanan Penagihan Google Play menawarkan alat untuk mengelola katalog, harga, dan langganan, laporan yang berguna, dan alur checkout yang didukung oleh Play Store yang sudah tidak asing bagi pengguna Anda. Hal ini juga merupakan persyaratan untuk aplikasi yang dipublikasikan di Play Store yang menjual produk digital.

Chrome 88 akan diluncurkan dengan uji coba origin di Android yang memungkinkan integrasi Aktivitas Web Tepercaya, Payment Request API, dan Digital Products API untuk menerapkan alur pembelian melalui Layanan Penagihan Google Play. Kami harap Uji Coba Origin ini juga akan tersedia untuk ChromeOS pada versi 89.

Penting: Google Play Billing API memiliki terminologi sendiri dan mencakup komponen klien dan backend. Bagian ini hanya membahas sebagian kecil dari API yang khusus untuk penggunaan Digital Items API dan Trusted Web Activity. Pastikan untuk membaca dokumentasi Layanan Penagihan Google Play dan memahami konsepnya sebelum mengintegrasikannya ke aplikasi produksi.

Alur dasar

Untuk menyediakan produk digital melalui Play Store, Anda harus mengonfigurasi katalog di Play Store, serta menghubungkan Play Store sebagai metode pembayaran dari PWA.

Jika Anda sudah siap untuk mengonfigurasi katalog, mulailah dengan menemukan bagian Produk di menu sisi kiri di Konsol Play:

Di sini, Anda akan menemukan opsi untuk melihat produk dalam aplikasi serta langganan yang ada, dan Anda juga akan menemukan tombol buat untuk menambahkan produk baru.

Produk Dalam Aplikasi

Detail Produk

Untuk membuat produk dalam aplikasi baru, Anda memerlukan ID produk, nama, deskripsi, dan harga. Membuat ID produk yang bermakna dan mudah diingat sangatlah penting karena Anda akan memerlukannya nanti dan ID tersebut tidak dapat diubah setelah dibuat.

Saat membuat langganan, Anda juga harus menentukan periode penagihan. Anda memiliki opsi untuk mencantumkan manfaat langganan dan menambahkan fitur seperti apakah Anda memiliki uji coba gratis, harga perkenalan, masa tenggang, dan opsi berlangganan lagi.

Setelah membuat setiap produk, aktifkan setiap produk dari aplikasi Anda.

Jika ingin, Anda dapat menambahkan produk melalui Play Developers API.

Setelah katalog Anda dikonfigurasi, langkah berikutnya adalah mengonfigurasi alur checkout dari PWA. Anda akan menggunakan kombinasi Digital Products API dan Payment Request API untuk mencapai hal ini.

Mengambil harga produk dengan Digital Products API

Saat menggunakan Layanan Penagihan Google Play, Anda ingin memastikan bahwa harga yang ditampilkan kepada pengguna sesuai dengan harga dari listingan Play Store. Menyimpan harga tersebut secara manual tidak mungkin dilakukan, sehingga Digital Products API menyediakan cara bagi aplikasi web untuk mengkueri penyedia pembayaran yang mendasarinya terkait harga:

// The SKU for the product, as defined in the Play Store interface
async function populatePrice(sku) {
  try {
    // Check if the Digital Goods API is supported by the browser.
    if (window.getDigitalGoodsService) {
      // The Digital Goods API can be supported by other Payments provider.
      // In this case, we're retrieving the Google Play Billing provider.
      const service =
          await window.getDigitalGoodsService("https://play.google.com/billing");

      // Fetch product details using the `getDetails()` method.
      const details = await service.getDetails([sku]);

      if (details.length === 0) {
        console.log(`Could not get SKU: "${sku}".`);
        return false;
      }

      // The details will contain both the price and the currenncy.
      item = details[0];
      const value = item.price.value;
      const currency = item.price.currency;

      const formattedPrice = new Intl.NumberFormat(navigator.language, {
        style: 'currency', currency: currency }).format(value);

      // Display the price to the user.
      document.getElementById("price").innerHTML = formattedPrice;
    } else {
      console.error("Could not get price for SKU \"" + sku + "\".");
    }
  } catch (error) {
    console.log(error);
  }
  return false;
}

Anda dapat mendeteksi dukungan untuk Digital Products API dengan memeriksa apakah getDigitalGoodsService() tersedia pada objek window.

Lalu, panggil window.getDigitalGoodsService() dengan ID Layanan Penagihan Google Play sebagai parameter. Tindakan ini akan menampilkan instance layanan untuk Layanan Penagihan Google Play dan vendor lain dapat menerapkan dukungan untuk Digital Products API dan akan memiliki ID yang berbeda.

Terakhir, panggil getDetails() pada referensi ke objek Layanan Penagihan Google Play yang meneruskan SKU untuk item sebagai parameter. Metode ini akan menampilkan objek detail yang berisi harga dan mata uang untuk item yang dapat ditampilkan kepada pengguna.

Memulai alur pembelian

Payment Request API memungkinkan alur pembelian di web dan juga digunakan untuk integrasi Layanan Penagihan Google Play. Baca Cara Kerja Payment Request API untuk mempelajari lebih lanjut apakah Anda baru menggunakan Payment Request API.

Untuk menggunakan API dengan Layanan Penagihan Google Play, Anda perlu menambahkan instrumen pembayaran yang memiliki metod yang didukung yang disebut https://play.google.com/billing dan menambahkan SKU sebagai bagian dari data untuk instrumen tersebut:

const supportedInstruments = [{
  supportedMethods: "https://play.google.com/billing",
  data: {
    sku: sku
  }
}];

Kemudian, build objek PaymentRequest seperti biasa dan gunakan API seperti biasa

const request = new PaymentRequest(supportedInstruments, details);

Mengonfirmasi pembelian

Setelah transaksi selesai, Anda harus menggunakan Digital Products API untuk mengonfirmasi pembayaran. Objek respons dari PaymentRequest akan berisi token yang akan Anda gunakan untuk mengonfirmasi transaksi:

const response = await request.show();
const token = response.details.token;
const service =
          await window.getDigitalGoodsService("https://play.google.com/billing");
await service.acknowledge(token, 'onetime');

Digital Products API dan Payment Request API tidak memiliki pengetahuan tentang identitas pengguna. Oleh karena itu, Anda harus mengaitkan pembelian ke pengguna di backend Anda dan memastikan mereka memiliki akses ke item yang dibeli. Saat mengaitkan pembelian ke pengguna, ingatlah untuk menyimpan token pembelian, karena Anda mungkin perlu token tersebut untuk memverifikasi apakah pembelian telah dibatalkan atau dikembalikan dananya, atau apakah langganan masih aktif. Lihat Real Time Developer Notifications API dan Google Play Developer API karena keduanya menyediakan endpoint untuk menangani kasus tersebut di backend Anda.

Memeriksa hak yang ada

Pengguna mungkin telah menukarkan kode promo atau mungkin sudah memiliki langganan ke produk Anda. Untuk memvalidasi bahwa pengguna memiliki hak yang sesuai, Anda dapat memanggil perintah listPurchases() pada layanan produk digital. Fungsi ini akan menampilkan semua pembelian yang dilakukan oleh pelanggan di aplikasi Anda. Ini juga akan menjadi tempat untuk mengonfirmasi setiap pembelian yang tidak dikonfirmasi untuk memastikan bahwa pengguna menukarkan haknya dengan benar.

const purchases = await itemService.listPurchases();
for (p of purchases) {
  if (!p.acknowledged) {
    await itemService.acknowledge(p.purchaseToken, 'onetime');
  }
}

Upload ke ChromeOS Play Store

Aktivitas Web Tepercaya juga tersedia mulai Chrome 85 di ChromeOS Play Store. Proses untuk mencantumkan aplikasi di Play Store sama untuk ChromeOS seperti halnya untuk Android.

Setelah membuat app bundle, Konsol Play akan memandu Anda melakukan langkah-langkah yang diperlukan untuk mencantumkan aplikasi di Play Store. Dalam dokumentasi Konsol Play, Anda dapat menemukan bantuan untuk membuat listingan aplikasi, mengelola file apk dan setelan lainnya, serta petunjuk untuk pengujian dan merilis aplikasi dengan aman.

Untuk membatasi aplikasi hanya untuk Chromebook, tambahkan tanda --chromeosonly saat menginisialisasi aplikasi di Bubblewrap:

bubblewrap init --manifest="https://example.com/manifest.json" --chromeosonly

Saat mem-build aplikasi secara manual, tanpa Bubblewrap, tambahkan flag uses-feature ke manifes Android Anda:

<uses-feature  android:name="org.chromium.arc" android:required="true"/>

Jika listingan Anda dibagikan ke aplikasi Android, versi paket satu-satunya ChromeOS harus selalu lebih tinggi daripada versi paket aplikasi Android. Anda dapat menyiapkan versi paket ChromeOS ke jumlah yang lebih tinggi daripada versi Android, sehingga Anda tidak perlu mengupdate kedua versi di setiap rilis.