Integrasi OS

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:

1. Ambil handle file dari API pemilih file akses sistem file. Hal ini memberi Anda informasi dasar tentang file.
2. Dengan menggunakan metode getFile() handle, Anda akan mendapatkan jenis Blob khusus yang disebut File yang menyertakan properti hanya baca tambahan (seperti nama dan tanggal terakhir diubah) tentang file tersebut. Karena merupakan Blob, metode Blob dapat dipanggil padanya, 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:

1. Gunakan handle file untuk membuat FileSystemWritableFileStream.
2. Lakukan perubahan pada aliran data. Tindakan ini tidak akan memperbarui file di tempat; sebagai gantinya, file sementara biasanya dibuat.
3. 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();

Perhatian: Safari menerapkan File System Access API, bukan untuk sistem publik, tetapi sebagai sandbox pribadi origin. Anda hanya dapat membaca dan menulis file di sistem file virtual menggunakan API ini.

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": [ "/*" ]
            }
        }
    ]
}

Di Android dengan WebAPK, PWA otomatis terdaftar sebagai pengendali untuk cakupan manifes dengan filter intent Android, dan Anda tidak dapat menambahkan origin atau cakupan lain ke dalamnya. Untuk iOS dan iPadOS, Anda hanya dapat menangani URL dengan PWA yang dipublikasikan di AppStore, seperti yang dibuat dengan PWABuilder.

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.

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

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.

Catatan: Alih-alih menggunakan skema URI pribadi untuk berkomunikasi dengan aplikasi pesan dan media sosial, Anda dapat menggunakan Web Share API generik

Berbagi Web

Dukungan Browser

• 89
• 93
• 12.1

Sumber

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 dan text)
• 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, atau PUT.

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 Berbagi Web) ke argumen yang akan diteruskan oleh browser di URL (pada method: 'GET') atau di dalam isi permintaan menggunakan encoding yang dipilih.

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

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.

Catatan: Pastikan halaman yang menangani data yang dibagikan dapat diakses secara offline. Anda tidak ingin pengguna memilih aplikasi Anda dan menemukan error karena mereka tidak memiliki koneksi saat ini.

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

Pemilah Kontak

Dukungan Browser

• x
• x
• x
• x

Sumber

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.

Perhatian: API ini tidak menjamin bahwa objek yang ditampilkan akan memiliki semua properti yang diminta, jadi Anda harus memeriksa kembali keberadaannya.

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