Aplikasi web memiliki jangkauan yang besar. Aplikasi ini berjalan di beberapa platform. Laporan ini mudah dibagikan melalui link. Namun, secara tradisional, aplikasi tersebut tidak memiliki integrasi dengan sistem operasi. Belum lama ini, aplikasi tersebut bahkan tidak dapat diinstal. Untungnya, hal itu telah berubah dan sekarang kita dapat memanfaatkan integrasi tersebut untuk menambahkan fitur yang berguna ke PWA kita. 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 langsung.
- Lakukan perubahan pada file atau folder tersebut, lalu simpan perubahannya kembali 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 bahwa metode ini memerlukan gestur pengguna, seperti klik tombol. Berikut adalah penyiapan lainnya untuk membuka file:
- Ambil file handle dari API pemilih file akses sistem file. Tindakan ini akan memberi Anda informasi dasar tentang file.
- Dengan menggunakan metode
getFile()
nama sebutan, Anda akan mendapatkan jenisBlob
khusus yang disebutFile
yang menyertakan properti hanya baca tambahan (seperti nama dan tanggal terakhir diubah) tentang file. Karena merupakan Blob, metode Blob dapat dipanggil di dalamnya, 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
. - Buat perubahan pada aliran data. Tindakan ini tidak akan memperbarui file di tempat; sebagai gantinya, file sementara biasanya dibuat.
- Terakhir, setelah selesai melakukan perubahan, Anda menutup streaming, yang akan mengubah 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 menyetel aplikasi favorit mereka sebagai default untuk membuka file. API penanganan file adalah API eksperimental yang memungkinkan PWA terinstal: 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 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 guna 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 tertaut ke PWA, atau mengklik deep link (URL yang mengarah ke bagian 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. Anda tidak dapat mengambil URL di PWA yang diinstal di iOS dan iPadOS dari Safari.
Untuk browser desktop, komunitas browser web membuat spesifikasi baru. Spesifikasi ini saat ini eksperimental; spesifikasi ini menambahkan anggota file manifes baru: url_handlers
. Properti ini mengharapkan array origin yang ingin diambil PWA. Asal PWA Anda akan diberikan secara otomatis, dan setiap origin lainnya harus menerima penanganan yang beroperasi 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 file ada di app.web.dev/.well-known/web-app-origin-association
, yang 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 skema mereka.
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.
Untuk mendaftar, Anda dapat menggunakan metode registerProtocolHandler(), atau menggunakan anggota protocol_handlers
dalam manifes, dengan skema yang diinginkan dan URL yang ingin dimuat 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 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 di setiap platform. Anda hanya perlu membuat link atau menggunakan navigator.href
dan mengarahkan ke skema URI yang diinginkan, dengan meneruskan argumen dalam bentuk URL yang di-escape.
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 pesan, peta, navigasi, rapat online, jaringan sosial, dan app store yang sudah dikenal.
Berbagi Web
Dengan Web Share API, PWA Anda dapat mengirim konten ke aplikasi terinstal lainnya di perangkat melalui saluran 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
dantext
) - 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.
Target Web Share
Web Share Target API memungkinkan PWA Anda menjadi target operasi berbagi dari aplikasi lain di perangkat tersebut, baik aplikasi tersebut merupakan PWA maupun 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
ditetapkan 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 browser dalam URL (dimethod: 'GET'
) atau dalam isi permintaan menggunakan encoding yang dipilih.
Misalnya, Anda dapat menentukan untuk PWA yang 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 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 mengurainya 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 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 kontak. PWA Anda kemudian dapat menerima data yang Anda inginkan dari kontak tersebut.
Contact Picker API sebagian besar 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 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)
, yang 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.
}
}
Resource
- File System Access API: menyederhanakan akses ke file lokal
- Mengizinkan aplikasi web yang diinstal menjadi pengendali file
- Menangani file di Progressive Web App
- Mengintegrasikan dengan UI Berbagi OS dengan Web Share API
- Berbagi konten dengan aplikasi lain
- Menerima data bersama dengan Web Share Target API
- Pemilih kontak untuk web