Koneksi dengan Bluetooth di PWA (Progressive Web Application)
Penggunaan bluetooth pada beberapa aplikasi memang cukup diperlukan, terutama saat ini banyak perangkat yang terkoneksi dengan bluetooth, contohnya smartwatch, headset, smartband dan lain lain.
Pengembangan aplikasi yang memerlukan koneksi bluetooth bisa ditangani pada aplikasi native, tapi apakah diterapkan pada PWA ataupun browser bisa menggunakan fasilitas bluetooth ini ?, mengingat PWA bukan aplikasi native yang bisa dengan mudah mengakses hardware dari perangkat.
Jawabannya bisa, asalkan browsermu sudah mendukung untuk koneksi bluetooth. Untuk compatibility nya bisa dicek di sini ya, tidak semua browser mendukung untuk koneksi bluetooth.
Oke langsung kita coba implementasinya ya. Di sini akan memakai contoh untuk mencetak ke thermal printer. Ada beberapa tahap sebelum kita bisa melakukan cetak di thermal printer. Pertama kita akan mencoba terhubung ke perangkat printer melalui bluetooth, kemudian kamu bisa mendapatkan karakteristik dari perangkat, pada tahap ini kamu bisa lihat info perangkat dan service-nya, dan langkah terakhir kirimkan datamu untuk dicetak.
1.Request bluetooth devices — pada tahap ini kita akan meminta akses ke perangkat sekitar yang bluetooth-nya aktif, akan muncul prompt list devices mana saja yang bisa kita hubungkan.
navigator.bluetooth.requestDevice({ filters: [], optionalServices: []})
pada fungsi di atas sebaiknya kita menuliskan filter yang digunakan sehingga tidak perlu menampilan semua list dari perangkat sekitar, jadi penggunaan energi dari bluetooth lebih efisien. Ada beberapa filter yang bisa digunakan saat akan memunculkan perangkat di sekitar.
filters[]: terdapat beberapa filter yang bisa digunakan yaitu BluetoothServiceUUID, name, atau namePrefix. BluetoothServiceUUID bisa berbentuk 16-bit service format atau 128-bit service format. Untuk lebih detail tentang UUID dapat dilihat di sini ya.optionalServices[]: bisa terdapat beberapa BluetoothServiceUUIDacceptAllDevices: menjangkau semua perangkat bluetooth yang ada di sekitar tanpa filter, untuk parameter ini tidak bisa digabung kalau ada filter ya.
contoh pengisian filter :
filters: [
{services: ['heart_rate']},
{services: [0x1802, 0x1803]},
{services: ['c48e6067-5295-48d3-8d5c-0395f61792b1']},
{name: 'ExampleName'},
{namePrefix: 'Prefix'}
],
optionalServices: ['battery_service']Nanti akan muncul prompt dialog yang memunculkan list perangkat yang bluetooth aktif.
Ketika kita sudah memilih device, maka kita hubungkan melalui GATT(Generic Attribute Profile) server, GATT server ini yang menjembatani hubungan antar perangkat Bluetooth Low Energy dan bisa transfer data dengan konsep Services dan Characteristics. Lebih detail tentang GATT ini bisa dicek di sini ya,
Kita hubungkan dengan membuat koneksi dengan GATT Server.
const server = await device.gatt.connect();
nah setelah berhasil connect kita lanjut tahap selanjutnya.
2. Bluetooth Characteristic —Berikut adalah contoh kita melakukan koneksi dengan thermal printer.
const device = await n.bluetooth.requestDevice({
filters: [{ services: ["000018f0–0000–1000–8000–00805f9b34fb"] }],
}); const server = await device.gatt.connect();
const service = await server.getPrimaryService(
"000018f0–0000–1000–8000–00805f9b34fb"
); const characteristic = await service.getCharacteristic(
"00002af1–0000–1000–8000–00805f9b34fb"
);
Di sini terlihat kita me-request device dengan service UUID spesifik yaitu “000018f0–0000–1000–8000–00805f9b34fb” ini untuk service thermal printer.
Karakteristik ini bisa memberikan kamu informasi terkait perangkatnya, tapi berhubung kita menggunakan printer jadi tidak banyak informasi yang bisa dibaca di karakteristik ini. Kalau kamu punya perangkat seperti pengukur detak jantung yang terhubung dengan bluetooth nanti informasi bisa dibaca di karakteristik ini.
Kalau sudah sukses dengan mendapatkan karateristiknya kita lanjut mencoba kirim data ke printernya untuk di cetak.
3.Kirim data ke printer — Langkah sebelumnya kita mendapatkan characteristic dari device yang kita pilih. Untuk mengirim/menulis data ke printernya gunakan method “writeValue” yang kita dapat dari karakteristiknya.
Data yang dikirim menyesuaikan dengan perangkatnya ya, di sini thermal printer perlu data yang bertipe Uint8Array kalau kamu coba generate data untuk kirim ke printer bisa coba package esc-pos-encoder.
const characteristic = await service.getCharacteristic(
"00002af1–0000–1000–8000–00805f9b34fb"
);characteristic.writeValue(data)
Kalau sudah maka data akan tercetak pada printer.
Nah itu sekilas langkah untuk mengkoneksinya aplikasi PWA kita dengan bluetooth. Perlu dicatat penggunakan koneksi dengan bluetooth ini belum di support oleh banyak browser jadi kalau kamu mau mengembangkannya perlu dipikirkan ketika akan diakses dengan browser lain. Semoga kedepannya makin di support dan muncul fitur lebih banyak di PWA, sehingga bisa lebih seperti native application.
Happy coding…
