javascriptangularprogressive-web-appsweb-bluetooth

Difficult To Connect Thermal Printer via Web Bluetooth


Right now I am developing web which has ability to connect thermal printer. I am using angular framework, and I successfully connect the thermal printer with USB using library ng-thermal-printer. But I want to my web also being able to connect thermal printer via web bluetooth which is BLE (Bluetooth Low Energy). As far as I know, BLE has specification in term of GATT and has services and characteristics in it.

The progress I did so far, I can connect and send a value to the thermal printer device in a Service and a Characteristic, let's say Service with UUID AS and Characteristics with UUID AC, using my android phone with the help of application named nRF Connect. Targeting Service AS and send hexadecimal value at charateristic AC make me successfully print something on the thermal paper.

But there is a problem. After knowing the right service and characteristic. I implemented it in my project. But, my chrome browser console showed error:

  1. Origin is not allowed to access any service... and it told me to add optionalServices when requestiDevice()
  2. After I added Service AS in property optionalServices, the console showed error DOMException: Connection failed for unknown reason. The errors showed both in chrome PC and chrome android.

NB:

Additional question. is bluetooth connection that application nRF Connect used different from BLE? if so, why it displays services and characteristics?


Solution

  • I have fixed this problem.

    There are 2 devices that I use, my pc and my android phone. Actually, my PC's Bluetooth does not support BLE. This is why I keep struggling to debug as my chrome for desktop keeps being not responding after trying to connect my thermal printer.

    Basically, error number 2 appears because I sent an encoded string value, not a UInt8Array value.

    Eventually, I use 2 web APIs. web Bluetooth API for connecting my PWA to my thermal printer from mobile and web Serial API for connecting my PWA to my thermal printer from the desktop. The library, ng-thermal-printer, is good for my project. I just need to extend the driver.