Terima kasih telah menonton Google I/O. Tonton konten secara on-demand.

Halaman ini diterjemahkan oleh Cloud Translation API.

Integrasi OS

Aplikasi web memiliki jangkauan yang luas. Mereka berjalan di beberapa platform. File ini mudah dibagikan melalui link. Namun, secara tradisional, aplikasi tersebut tidak terintegrasi dengan sistem operasi. Belum lama ini, aplikasi tersebut bahkan tidak dapat diinstal. Untungnya, hal itu telah berubah dan kini kita dapat memanfaatkan integrasi tersebut untuk menambahkan fitur berguna ke PWA kita. Mari kita pelajari beberapa opsi tersebut.

Bekerja dengan sistem file

Alur kerja pengguna umum yang menggunakan file terlihat seperti ini:

Pilih file atau folder dari perangkat dan buka secara langsung.
Buat perubahan pada file atau folder tersebut, dan simpan kembali perubahan secara langsung.
Membuat file dan folder baru.

Sebelum File System Access API, aplikasi web tidak dapat melakukan hal ini. Membuka file memerlukan upload file, menyimpan perubahan mengharuskan pengguna mendownloadnya, dan web tidak memiliki akses sama sekali untuk membuat file dan folder baru di sistem file pengguna.

Membuka file

Untuk membuka file, kita menggunakan metode window.showOpenFilePicker(). Perhatikan bahwa metode ini memerlukan gestur pengguna, seperti klik tombol. Berikut adalah penyiapan lainnya untuk membuka file:

Ambil handle file dari API pemilih file akses sistem file. Fitur ini memberi Anda informasi dasar tentang file.
Dengan menggunakan metode getFile() handle, Anda akan mendapatkan jenis Blob khusus yang disebut File yang mencakup properti hanya baca tambahan (seperti nama dan tanggal terakhir diubah) tentang file. Karena merupakan Blob, metode Blob dapat dipanggil di dalamnya, seperti text(), untuk mendapatkan kontennya.

// Have the user select a file.
const [ handle ] = await window.showOpenFilePicker();
// Get the File object from the handle.
const file = await handle.getFile();
// Get the file content.
// Also available, slice(), stream(), arrayBuffer()
const content = await file.text();

Menyimpan perubahan

Untuk menyimpan perubahan pada file, Anda juga memerlukan gestur pengguna; lalu:

Gunakan handle file untuk membuat FileSystemWritableFileStream.
Buat perubahan pada aliran data. Hal ini tidak akan memperbarui file di tempatnya; sebagai gantinya, file sementara biasanya dibuat.
Terakhir, setelah selesai melakukan perubahan, Anda menutup streaming, yang memindahkan perubahan dari sementara menjadi permanen.

Mari kita lihat dalam kode:

// Make a writable stream from the handle.
const writable = await handle.createWritable();
// Write the contents of the file to the stream.
await writable.write(contents);
// Close the file and write the contents to disk.
await writable.close();

Penanganan file

File System Access API memungkinkan Anda membuka file dari dalam aplikasi, tetapi bagaimana dengan sebaliknya? Pengguna ingin menetapkan aplikasi favorit mereka sebagai aplikasi default untuk membuka file. File Handling API adalah API eksperimental yang memungkinkan PWA terinstal: Mendaftarkan diri sebagai handler file di perangkat pengguna, dengan menentukan jenis MIME dan ekstensi file yang didukung PWA Anda di manifes aplikasi web Anda. Anda dapat menentukan ikon file kustom untuk ekstensi yang didukung.

Setelah didaftarkan, PWA yang diinstal akan muncul sebagai opsi dari sistem file pengguna, sehingga mereka dapat membuka file langsung ke dalamnya. Berikut adalah contoh penyiapan manifes untuk PWA dalam membaca file teks:

...
"file_handlers": [
     {
         "action": "/open-file",
         "accept": {
             "text/*": [".txt"]
         }
     }
]
...

Penanganan URL

Dengan penanganan URL, PWA Anda dapat mengambil link yang merupakan bagian dari cakupannya dari sistem operasi dan merendernya dalam jendela PWA, bukan tab browser default. Misalnya, jika Anda menerima pesan yang menautkan ke PWA, atau mengklik deep link (URL yang mengarah ke konten tertentu) di PWA, konten akan terbuka di jendela mandiri.

Perilaku ini otomatis tersedia di Android saat WebAPK digunakan, seperti saat pengguna menginstal PWA dengan Chrome. URL tidak dapat diambil di PWA yang diinstal di iOS dan iPadOS dari Safari.

Untuk browser desktop, komunitas browser web membuat spesifikasi baru. Spesifikasi ini saat ini masih eksperimental; spesifikasi ini menambahkan anggota file manifes baru: url_handlers. Properti ini mengharapkan array asal yang ingin diambil oleh PWA. Origin PWA Anda akan otomatis diberikan, dan setiap origin lainnya harus menerima penanganan tersebut melalui file bernama web-app-origin-association. Misalnya, jika manifes PWA Anda dihosting di web.dev, dan Anda ingin menambahkan origin app.web.dev, tampilannya akan seperti ini:

"url_handlers": [
    {"origin": "https://app.web.dev"},
]

Dalam hal ini, browser akan memeriksa apakah ada file di app.web.dev/.well-known/web-app-origin-association, dengan menerima penanganan URL dari URL cakupan PWA. Developer harus membuat file ini. Dalam contoh berikut, file akan terlihat seperti ini:

{
    "web_apps": [
        {
            "manifest": "/mypwa/app.webmanifest",
            "details": {
                "paths": [ "/*" ]
            }
        }
    ]
}

Penanganan protokol URL

Penanganan URL berfungsi dengan URL protokol https standar, tetapi Anda dapat menggunakan skema URI kustom, seperti pwa://. Di beberapa sistem operasi, aplikasi yang diinstal mendapatkan kemampuan ini dengan mendaftarkan skemanya.

Untuk PWA, kemampuan ini diaktifkan menggunakan URL protocol handler API, yang hanya tersedia di perangkat desktop. Anda hanya dapat mengizinkan protokol kustom untuk perangkat seluler dengan mendistribusikan PWA di app store.

Perhatian: Untuk PWA yang menggunakan URL protocol handler API, nama protokol harus berupa salah satu skema yang masuk daftar aman, atau harus menggunakan awalan web+. Jadi, dalam contoh kita, link harus mengarah ke web+pwa:// untuk membuka PWA kita.

Untuk mendaftar, Anda dapat menggunakan metode registerProtocolHandler(), atau menggunakan anggota protocol_handlers dalam manifes Anda, dengan skema yang diinginkan dan URL yang ingin Anda muat dalam konteks PWA Anda, seperti:

...
{
  "protocol_handlers": [
    {
      "protocol": "web+pwa",
      "url": "/from-protocol?value=%s"
    },
  ]
}
...

Anda dapat merutekan URL from-protocol ke handler yang benar dan mendapatkan string kueri value di PWA Anda. %s adalah placeholder untuk URL yang di-escape yang memicu operasi, jadi jika Anda memiliki link di suatu tempat seperti <a href="web+pwa://testing">, PWA Anda akan membuka /from-protocol?value=testing.

Memanggil aplikasi lain

Anda dapat menggunakan skema URI untuk terhubung ke aplikasi terinstal lainnya (PWA atau bukan) di perangkat pengguna pada setiap platform. Anda hanya perlu membuat link atau menggunakan navigator.href dan mengarah ke skema URI yang Anda inginkan, dengan meneruskan argumen dalam bentuk yang di-escape URL.

Anda dapat menggunakan skema standar yang sudah dikenal, seperti tel: untuk panggilan telepon, mailto: untuk pengiriman email, atau sms: untuk pesan teks; atau Anda dapat mempelajari skema URL aplikasi lain, misalnya dari aplikasi pesan, peta, navigasi, rapat online, jaringan sosial, dan app store yang sudah dikenal.

Web Share

Browser Support

Source

Dengan Web Share API, PWA Anda dapat mengirim konten ke aplikasi terinstal lainnya di perangkat melalui channel bersama.

API ini hanya tersedia di sistem operasi dengan mekanisme share, termasuk Android, iOS, iPadOS, Windows, dan ChromeOS. Anda dapat membagikan objek yang berisi:

Teks (properti title dan text)
URL (properti url)
File (properti files).

Untuk memeriksa apakah perangkat saat ini dapat berbagi, untuk data sederhana, seperti teks, Anda memeriksa keberadaan metode navigator.share(), untuk berbagi file, Anda memeriksa keberadaan metode navigator.canShare().

Anda meminta tindakan berbagi dengan memanggil navigator.share(objectToShare). Panggilan tersebut menampilkan Promise yang di-resolve dengan undefined atau ditolak dengan pengecualian.

Chrome di Android dan Safari di iOS membuka Lembar Berbagi berkat Web Share.

Target Berbagi Web

Web Share Target API memungkinkan PWA Anda menjadi target operasi berbagi dari aplikasi lain di perangkat tersebut, baik PWA maupun bukan. PWA Anda menerima data yang dibagikan oleh aplikasi lain.

Saat ini, fitur ini tersedia di Android dengan WebAPK dan ChromeOS, dan hanya berfungsi setelah pengguna menginstal PWA Anda. Browser mendaftarkan target berbagi dalam sistem operasi saat aplikasi diinstal.

Anda menyiapkan target berbagi web dalam manifes dengan anggota share_target yang ditentukan dalam spesifikasi draf Web Share Target. share_target ditetapkan ke objek dengan beberapa properti:

action: URL yang akan dimuat di jendela PWA yang diharapkan menerima data yang dibagikan.
method
enctype: (Opsional) Jenis encoding untuk parameter, secara default adalah application/x-www-form-urlencoded, tetapi juga dapat ditetapkan sebagai multipart/form-data untuk metode seperti POST.
params: Objek yang akan memetakan data berbagi (dari kunci: title, text, url, dan files dari Web Share) ke argumen yang akan diteruskan browser di URL (di method: 'GET') atau di isi permintaan menggunakan encoding yang dipilih.

Catatan: Anda dapat mengurai permintaan POST di sisi server atau dalam pekerja layanan jika ingin menghindari perjalanan ke jaringan. Lihat contoh ini untuk mengetahui detail selengkapnya.

Misalnya, Anda dapat menentukan untuk PWA Anda bahwa Anda ingin menerima data yang dibagikan (hanya judul dan URL) dengan menambahkan di manifes Anda:

...
"share_target": {
   "action": "/receive-share/",
   "method": "GET",
   "params": {
      "title": "shared_title",
      "url": "shared_url"
   }
}
...

Dari contoh sebelumnya, jika ada aplikasi di sistem yang membagikan URL dengan judul, dan pengguna memilih PWA Anda dari dialog, browser akan membuat navigasi baru ke /receive-share/?shared_title=AAA&shared_url=BBB asal Anda, dengan AAA adalah judul yang dibagikan, dan BBB adalah URL yang dibagikan. Anda dapat menggunakan JavaScript untuk membaca data tersebut dari string window.location dengan menguraikannya menggunakan konstruktor URL.

Browser akan menggunakan nama dan ikon PWA dari manifes Anda untuk mengisi entri berbagi sistem operasi. Anda tidak dapat memilih set yang berbeda untuk tujuan tersebut.

Untuk mengetahui contoh yang lebih mendetail dan cara menerima file, lihat Menerima data yang dibagikan dengan Web Share Target API

Pemilah Kontak

Browser Support

Source

Dengan Contact Picker API, Anda dapat meminta perangkat untuk merender dialog native dengan semua kontak pengguna sehingga pengguna dapat memilih satu atau beberapa kontak. PWA Anda kemudian dapat menerima data yang Anda inginkan dari kontak tersebut.

Contact Picker API terutama tersedia di perangkat seluler, dan semuanya dilakukan melalui antarmuka navigator.contacts di platform yang kompatibel.

Anda dapat meminta properti yang tersedia untuk dikueri dengan navigator.contacts.getProperties(), dan meminta pemilihan satu atau beberapa kontak dengan daftar properti yang diinginkan.

Beberapa contoh properti adalah name, email, address, dan tel. Saat meminta pengguna memilih satu atau beberapa kontak, Anda dapat memanggil navigator.contacts.select(properties), dengan meneruskan array properti yang ingin Anda dapatkan sebagai respons.

Contoh berikut akan mencantumkan kontak yang diterima oleh pemilih.

async function getContacts() {
   const properties = ['name', 'email', 'tel'];
   const options = { multiple: true };
   try {
     const contacts = await navigator.contacts.select(properties, options);
     console.log(contacts);
   } catch (ex) {
     // Handle any errors here.
   }
}