Aplikasi web memiliki jangkauan yang luas. Iklan tersebut berjalan di berbagai platform. Mudah dibagikan melalui tautan. Tetapi secara tradisional mereka tidak memiliki integrasi dengan sistem operasi. Belum lama ini mereka tidak dapat diinstal. Untungnya hal itu telah berubah dan sekarang kita dapat memanfaatkan integrasi tersebut untuk menambahkan fitur yang berguna ke PWA. Mari kita pelajari beberapa opsi tersebut.
Bekerja dengan sistem file
Alur kerja pengguna standar yang menggunakan file terlihat seperti ini:
- Pilih file atau folder dari perangkat dan buka secara langsung.
- Lakukan perubahan pada file atau folder tersebut, lalu simpan kembali perubahan secara langsung.
- Membuat file dan folder baru.
Sebelum File System Access API, aplikasi web tidak dapat melakukannya. 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, metode ini memerlukan gestur pengguna, seperti klik tombol. Berikut adalah penyiapan selanjutnya untuk membuka file:
- Ambil handle file dari API pemilih file akses sistem file. Hal ini memberi Anda informasi dasar tentang file.
- Dengan menggunakan metode
getFile()
handle, Anda akan mendapatkan jenisBlob
khusus yang disebutFile
yang menyertakan properti hanya baca tambahan (seperti nama dan tanggal terakhir diubah) tentang file tersebut. Karena merupakan Blob, metode Blob dapat dipanggil padanya, sepertitext()
, 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
. - Lakukan perubahan pada aliran data. Tindakan ini tidak akan memperbarui file di tempat; sebagai gantinya, file sementara biasanya dibuat.
- Terakhir, setelah selesai melakukan perubahan, tutup streaming, yang akan memindahkan perubahan dari sementara ke permanen.
Mari kita lihat ini 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. API penanganan file adalah API eksperimental yang memungkinkan PWA yang diinstal: Mendaftar sebagai pengendali file di perangkat pengguna, dengan menentukan jenis MIME dan ekstensi file yang didukung PWA Anda dalam manifes aplikasi web. Anda dapat menentukan ikon file kustom untuk ekstensi yang didukung.
Setelah terdaftar, PWA yang diinstal akan muncul sebagai opsi dari sistem file pengguna, sehingga mereka dapat membuka file langsung ke dalamnya. Berikut adalah contoh penyiapan manifes bagi PWA untuk membaca file teks:
...
"file_handlers": [
{
"action": "/open-file",
"accept": {
"text/*": [".txt"]
}
}
]
...
Penanganan URL
Dengan penanganan URL, PWA Anda dapat menangkap link yang merupakan bagian dari cakupannya dari sistem operasi dan merendernya dalam jendela PWA, bukan tab browser default. Misalnya, jika Anda menerima pesan yang tertaut ke PWA, atau mengklik deep link (URL yang mengarah ke konten tertentu) di PWA, konten akan terbuka di jendela tersendiri.
Perilaku ini otomatis tersedia di Android saat WebAPK digunakan, seperti saat pengguna menginstal PWA dengan Chrome. URL di PWA yang diinstal di iOS dan iPadOS tidak dapat diambil dari Safari.
Untuk browser desktop, komunitas browser web membuat spesifikasi baru. Spesifikasi ini saat ini bersifat eksperimental; anggota file manifes baru ditambahkan: url_handlers
. Properti ini mengharapkan array origin yang ingin ditangkap PWA. Asal PWA Anda akan diberikan secara otomatis, dan setiap origin lainnya harus menerima penanganan tersebut yang beroperasi melalui file bernama web-app-origin-association
.
Misalnya, jika manifes PWA Anda dihosting di web.dev, dan Anda ingin menambahkan asal app.web.dev, manifesnya akan terlihat seperti ini:
"url_handlers": [
{"origin": "https://app.web.dev"},
]
Dalam hal ini, browser akan memeriksa apakah file ada di app.web.dev/.well-known/web-app-origin-association
, menerima penanganan URL dari URL cakupan PWA. Developer harus membuat file ini. Pada contoh berikut, filenya 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 terinstal mendapatkan kemampuan ini dengan aplikasi mendaftarkan skemanya.
Untuk PWA, kemampuan ini diaktifkan menggunakan API pengendali protokol URL, yang hanya tersedia di perangkat desktop. Anda hanya dapat mengizinkan protokol kustom untuk perangkat seluler dengan mendistribusikan PWA Anda di app store.
Untuk mendaftar, Anda dapat menggunakan metode registerProtocolHandler(), atau menggunakan anggota protocol_handlers
di manifes Anda, dengan skema yang diinginkan dan URL yang ingin Anda muat dalam konteks PWA, seperti:
...
{
"protocol_handlers": [
{
"protocol": "web+pwa",
"url": "/from-protocol?value=%s"
},
]
}
...
Anda dapat merutekan URL from-protocol
ke pengendali yang benar dan mendapatkan string kueri value
di PWA. %s
adalah placeholder untuk URL yang di-escape yang memicu operasi, jadi jika Anda memiliki link 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 tidak) di perangkat pengguna di setiap platform. Anda hanya perlu membuat link atau menggunakan navigator.href
dan mengarahkan ke skema URI yang diinginkan, dengan meneruskan argumen dalam bentuk yang di-escape URL.
Anda dapat menggunakan skema standar yang dikenal, seperti tel:
untuk panggilan telepon, mailto:
untuk mengirim email, atau sms:
untuk pesan teks; atau Anda dapat mempelajari skema URL aplikasi lain, misalnya dari fitur pesan, peta, navigasi, rapat online, jaringan sosial, dan app store yang terkenal.
Berbagi Web
Dengan Web Share API, PWA Anda dapat mengirim konten ke aplikasi terinstal lainnya di perangkat melalui saluran bersama.
API ini hanya tersedia pada sistem operasi dengan mekanisme share
, termasuk Android, iOS, iPadOS, Windows, dan ChromeOS.
Anda dapat membagikan objek yang berisi:
- Teks (properti
title
dantext
) - URL (properti
url
) - File (properti
files
).
Untuk memeriksa apakah perangkat saat ini dapat berbagi, untuk data sederhana, seperti teks, Anda harus memeriksa keberadaan metode navigator.share()
untuk membagikan file yang Anda periksa 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.
Target Berbagi Web
Web Share Target API memungkinkan PWA Anda menjadi target operasi berbagi dari aplikasi lain di perangkat tersebut, baik itu PWA atau bukan. PWA Anda menerima data yang dibagikan oleh aplikasi lain.
Fitur ini saat 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 Target Berbagi Web. share_target
disetel ke objek dengan beberapa properti:
action
- URL yang akan dimuat di jendela PWA yang diharapkan akan menerima data yang dibagikan.
method
- Metode kata kerja HTTP akan digunakan untuk tindakan, seperti
GET
,POST
, atauPUT
. enctype
- (Opsional) Jenis encoding untuk parameter secara default adalah
application/x-www-form-urlencoded
, tetapi juga dapat ditetapkan sebagaimultipart/form-data
untuk metode sepertiPOST
. params
- Objek yang akan memetakan data berbagi (dari kunci:
title
,text
,url
, danfiles
dari Berbagi Web) ke argumen yang akan diteruskan oleh browser di URL (padamethod: 'GET'
) atau di dalam isi permintaan menggunakan encoding yang dipilih.
Misalnya, Anda dapat menentukan untuk PWA bahwa Anda ingin menerima data yang dibagikan (hanya judul dan URL) dengan menambahkan dalam manifes:
...
"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
origin, dengan AAA adalah judul bersama, dan BBB adalah URL bersama. 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 untuk memberikan feed entri yang dibagikan ke sistem operasi. Anda tidak dapat memilih set data lain untuk tujuan tersebut.
Untuk contoh yang lebih mendetail dan cara menerima file, lihat Menerima data yang dibagikan dengan Web Share Target API
Pemilah Kontak
Dengan Contact Picker API, Anda dapat meminta perangkat untuk merender dialog native dengan semua kontak pengguna sehingga pengguna dapat memilih satu atau beberapa. 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
pada platform yang kompatibel.
Anda dapat meminta properti yang tersedia untuk membuat kueri dengan navigator.contacts.getProperties()
, dan meminta satu atau beberapa pilihan kontak dengan daftar properti yang diinginkan.
Beberapa contoh properti adalah name
, email
, address
, dan tel
. Saat meminta pengguna untuk memilih satu atau beberapa kontak, Anda dapat memanggil navigator.contacts.select(properties)
, dengan meneruskan array properti yang ingin Anda dapatkan sebagai hasilnya.
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.
}
}
Referensi
- File System Access API: menyederhanakan akses ke file lokal
- Mengizinkan aplikasi web terinstal menjadi pengendali file
- Menangani file di Progressive Web App
- Berintegrasi dengan UI Berbagi OS dengan Web Share API
- Berbagi konten dengan aplikasi lain
- Menerima data yang dibagikan dengan Web Share Target API
- Pemilih kontak untuk web