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 menangani baru, sehingga lebih mudah digunakan dengan Bubblewrap, dan menambahkan fitur baru seperti Google Play mendatang Integrasi penagihan, dan memungkinkannya berfungsi di lebih banyak platform, seperti ChromeOS. Artikel ini akan merangkum update terbaru 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 secara manual SDK, keduanya rentan terhadap error. Sekarang alat ini menawarkan untuk otomatis mendownload dependensi saat dijalankan untuk pertama kalinya.

Anda masih dapat memilih untuk menggunakan instalasi dependensi yang ada, jika Anda lebih suka melakukannya, dan perintah doctor baru membantu menemukan masalah dan merekomendasikan perbaikan untuk konfigurasi, sekarang diperbarui dari command line menggunakan perintah updateConfig.

Wizard yang ditingkatkan

Saat membuat project dengan init, Bubblewrap memerlukan informasi untuk membuat aplikasi Android. Tujuan mengekstrak nilai dari Manifes Aplikasi Web dan memberikan setelan default jika memungkinkan.

Anda dapat mengubah nilai-nilai tersebut saat membuat project baru, tetapi sebelumnya, arti dari setiap kolom tidak jelas lagi. Dialog inisialisasi dibuat ulang dengan deskripsi dan validasi yang lebih baik untuk masing-masing bidang input.

tampilan: dukungan layar penuh dan orientasi

Dalam beberapa kasus, Anda mungkin ingin aplikasi menggunakan layar sebanyak mungkin dan, dan membangun PWA, diterapkan dengan menetapkan kolom display dari Manifes Aplikasi Web ke fullscreen.

Ketika Bubblewrap mendeteksi opsi layar penuh di Manifes Aplikasi Web, Bubblewrap akan mengonfigurasi Android aplikasi juga agar diluncurkan dalam layar penuh, atau mode imersif, dalam istilah khusus Android.

Kolom orientation dari Manifes Aplikasi Web menentukan apakah aplikasi harus dimulai di mode potret, mode lanskap, atau dalam orientasi yang saat ini digunakan perangkat. Balon sekarang 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 AppBundles

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

Bubblewrap kini memaketkan aplikasi sebagai App Bundle, dalam file bernama app-release-bundle.aab. Anda harus memilih format ini saat memublikasikan aplikasi ke Play Store karena akan diwajibkan oleh toko mulai paruh kedua tahun 2021.

Delegasi geolokasi

Pengguna berharap aplikasi yang diinstal di perangkat mereka berperilaku konsisten, terlepas dari teknologi baru. Saat digunakan di dalam Aktivitas Web Tepercaya, izin GeoLocation sekarang dapat didelegasikan ke Sistem Operasi dan, saat diaktifkan, pengguna akan melihat dialog yang sama dengan aplikasi yang dibangun dengan Kotlin atau Java, dan temukan kontrol untuk mengelola izin di tempat yang sama.

Fitur ini dapat ditambahkan melalui Bubblewrap dan, karena menambahkan dependensi ekstra ke Android sebaiknya Anda hanya mengaktifkannya saat aplikasi web menggunakan izin Geolokasi.

Biner yang dioptimalkan

Perangkat dengan penyimpanan terbatas biasanya ada di area tertentu di dunia, dan pemilik perangkat tersebut umumnya lebih menyukai aplikasi yang lebih kecil. Aplikasi yang menggunakan Aktivitas Web Tepercaya menghasilkan biner, yang menghilangkan beberapa kecemasan dari para pengguna tersebut.

Bubblewrap telah dioptimalkan dengan mengurangi daftar library Android yang diperlukan, sehingga menghasilkan menghasilkan biner 800 ribu lebih kecil. Dalam praktiknya, ukuran tersebut kurang dari setengah ukuran rata-rata yang dihasilkan oleh versi sebelumnya. Untuk memanfaatkan biner yang lebih kecil, Anda hanya perlu memperbarui aplikasi Anda menggunakan versi terbaru Bubblewrap.

Cara mengupdate aplikasi yang sudah ada

Aplikasi yang dihasilkan oleh Bubblewrap terdiri dari aplikasi web dan Android ringan wrapper yang membuka PWA. Meskipun PWA yang terbuka di dalam Aktivitas Web Tepercaya mengikuti dengan siklus pembaruan yang sama seperti aplikasi web apa pun, wrapper native dapat dan harus diperbarui.

Anda harus mengupdate aplikasi untuk memastikannya menggunakan wrapper versi terbaru, dengan perbaikan {i>bug<i} dan fitur. Dengan menginstal versi terbaru Bubblewrap, perintah update akan menerapkan wrapper versi terbaru ke project yang ada:

npm update -g @bubblewrap/cli
bubblewrap update
bubblewrap build

Alasan lain untuk memperbarui aplikasi tersebut adalah memastikan bahwa perubahan pada Manifes Web yang diterapkan pada aplikasi. Gunakan perintah merge baru untuk tindakan tersebut:

bubblewrap merge
bubblewrap update
bubblewrap build

Pembaruan pada Kriteria Kualitas

Chrome 86 memperkenalkan perubahan pada Kriteria Kualitas Aktivitas Web Tepercaya, yang dijelaskan di lengkap di Perubahan pada kriteria kualitas untuk PWA yang menggunakan Aktivitas Web Tepercaya.

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

Tidak memverifikasi link aset digital saat peluncuran aplikasi
Gagal menampilkan HTTP 200 untuk permintaan resource jaringan offline
Hasil error HTTP 404 atau 5xx dalam aplikasi.

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

Layanan Penagihan Google Play

Selain memungkinkan aplikasi Anda menjual produk digital dan langganan di Play Store, Layanan Penagihan Google Play menawarkan alat untuk mengelola katalog, harga, dan langganan Anda, laporan, dan alur checkout yang didukung oleh Play Store yang sudah tidak asing bagi pengguna Anda. 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 berharap Uji Coba Origin ini juga tersedia untuk ChromeOS versi 89.

Penting: Google Play Billing API memiliki terminologi sendiri dan mencakup klien dan komponen backend. Bagian ini hanya membahas sebagian kecil API yang dikhususkan untuk penggunaan Digital Products API dan Aktivitas Web Tepercaya. Pastikan untuk membaca Dokumentasi Layanan Penagihan Google Play dan pahami 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 Anda.

Jika sudah siap mengonfigurasi katalog, mulailah dengan mencari bagian Produk di sebelah kiri menu samping di Konsol Play:

Di sini Anda akan menemukan opsi untuk melihat produk dalam aplikasi dan langganan Anda yang sudah ada dan Anda juga temukan tombol {i>create<i} untuk menambahkan yang baru.

Produk dalam Aplikasi

Detail Produk

Untuk membuat produk dalam aplikasi baru, Anda memerlukan ID produk, nama, deskripsi, dan harga. Penting penting untuk membuat ID produk yang bermakna dan mudah diingat, Anda akan membutuhkannya nanti dan ID tidak dapat diubah setelah dibuat.

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

Setelah membuat setiap produk, sediakan dari aplikasi Anda dengan mengaktifkannya.

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 ini.

Mengambil harga produk dengan Digital Products API

Saat menggunakan Layanan Penagihan Google Play, Anda perlu memastikan bahwa harga yang ditampilkan kepada pengguna sesuai harga dari listingan Play Store. Menjaga sinkronisasi harga tersebut secara manual tidak mungkin dilakukan, jadi Digital Barang API menyediakan cara bagi aplikasi web untuk membuat kueri pembayaran pokok penyedia untuk 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() sudah sesuai yang tersedia pada objek window.

Kemudian, 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 mengimplementasikan 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 aplikasi Google Play Integrasi penagihan. Lihat Cara Kerja Payment Request API ini untuk mempelajari lebih lanjut jika Anda baru menggunakan Payment API Permintaan.

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, bangun objek PaymentRequest seperti biasa dan gunakan API seperti biasa

const request = new PaymentRequest(supportedInstruments, details);

Mengonfirmasi pembelian

Setelah transaksi selesai, Anda harus menggunakan Digital Barang API untuk mengonfirmasi pembayaran. Objek respons dari PaymentRequest akan berisi token yang akan Anda gunakan untuk konfirmasi 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. Sebagai seorang Anda akan mengaitkan pembelian dengan pengguna di backend Anda dan memastikan bahwa mereka akses ke item yang dibeli. Saat mengaitkan pembelian dengan pengguna, ingatlah untuk menyimpan token pembelian, karena Anda mungkin memerlukannya untuk memverifikasi apakah pembelian telah dibatalkan atau dikembalikan dananya, atau jika langganan masih aktif. Lihat Real Time Developer Notifications API dan Google Play Developer API karena menyediakan endpoint untuk menangani kasus tersebut di backend Anda.

Periksa hak yang ada

Pengguna mungkin telah menukarkan kode promo atau mungkin sudah memiliki langganan ke produk Anda. Di beberapa untuk memvalidasi bahwa pengguna tersebut memiliki hak yang sesuai, Anda dapat memanggil Perintah listPurchases() di layanan produk digital. Tindakan ini akan mengembalikan semua pembelian yang yang dilakukan pelanggan di aplikasi Anda. Ini juga akan menjadi tempat untuk mengakui untuk memastikan bahwa pengguna menukarkan hak mereka dengan benar.

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

Upload ke Play Store ChromeOS

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

Setelah membuat app bundle, Konsol Play akan memandu Anda dalam proses langkah-langkah untuk mencantumkan aplikasi di Play Store. Di dokumentasi Konsol Play, Anda dapat menemukan bantuan untuk membuat listingan aplikasi, mengelola file apk dan setelan lainnya, serta petunjuknya untuk menguji dan merilis aplikasi Anda dengan aman.

Untuk membatasi aplikasi Anda hanya untuk Chromebook, tambahkan flag --chromeosonly saat melakukan inisialisasi aplikasi di Bubblewrap:

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

Saat membangun aplikasi secara manual, tanpa Bubblewrap, tambahkan tanda uses-feature ke Manifes Android:

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

Jika listingan Anda dibagikan ke aplikasi Android, versi paket khusus ChromeOS akan selalu memiliki agar lebih tinggi dari versi paket aplikasi Android. Anda dapat menyiapkan versi paket ChromeOS untuk angka yang jauh lebih tinggi daripada versi Android, sehingga Anda tidak perlu memperbarui kedua versi data.