Posted at 2021-04-30 by Robin

Thr 2021.04.29

'While developing, my website will reload upon code changes'
'Is there a solution that avoids "re-pairing" my Puck.js on every page load'

Although I haven't tried this, what about using the Html < iframe >element?
Embed the page that will reload as the iFrame itself, retaining the PuckJs code called from the outer container. In that way, when the inner iframe page is reloaded, the outer calling page doesn't perform the Puck re-initialization.

https://www.w3schools.com/tags/tag_iframe.asp

passing data back-n-forth

https://stackoverflow.com/questions/6271313/pass-a-javascript-variable-from-an-iframe-to-the-parent-frame

https://www.w3schools.com/jsref/event_onload.asp
https://stackoverflow.com/questions/588040/window-onload-vs-document-onload
https://www.plus2net.com/javascript_tutorial/window-onload.php
https://www.codegrepper.com/code-examples/javascript/windows+onload+javascript+w3schools

Posted at 2021-04-30 by @fanoush

While developing, my website will reload upon code changes, which requires me to reselect my already paired Puck.js which is cumbersome.
I noticed that the WebIDE is capable of connecting to an already paired device without showing the navigator.bluetooth dialog

The WebIDE at https://www.espruino.com/ide/ can keep previous connection info and reconnect, however it is also lost when you reload the page. I think this is by design and is some sort of security so devices are not silently accessed across different pages.

Posted at 2021-04-30 by @gfwilliams

Hi! This is something I have been wondering about actually.

I think realistically to do it nicely, it could do with being integrated into the Puck.js/UART.js library itself (at https://github.com/espruino/EspruinoWebTools). I think long term the best thing would be to introduce the functionality to UART.js (which already has the ability to display a menu for >1 device), and then maybe just make Puck.js a stripped down version of UART.js that doesn't do Web Serial (it's getting stupid having two extremely similar libraries).

The WebIDE at https://www.espruino.com/ide/ can keep previous connection info and reconnect, however it is also lost when you reload the page. I think this is by design

Yes, I was wondering about that. On Web Serial it works totally as expected, but it seems it doesn't on Web Bluetooth.

Having said that, this example from the Chrome team themselves doesn't appear to remember devices: https://googlechrome.github.io/samples/web-bluetooth/watch-advertisements-and-connect.html

But this one does - at least for me: https://googlechrome.github.io/samples/web-bluetooth/watch-advertisements-and-connect-async-await.html

But apart from the usage of promises vs. async/await I'm having trouble figuring out why!

However if we can figure that out I'd love to get the changes into the IDE so it does remember, and maybe get the relevant stuff added to UART.js

Posted at 2021-04-30 by user128009

Using an iframe could work for dev page reload, I think it may be possible to even achieve reconnect across a tab/window reload (getDevices() will return an already paired device), but I will keep this workaround in mind, thanks!

Posted at 2021-04-30 by user128009

Thanks for the link.

https://googlechrome.github.io/samples/w­eb-bluetooth/watch-advertisements-and-co­nnect-async-await.html also gives me the device is out of range error, however, adding a call to requestLEScan() or just requestDevice() seems to trigger advertisement packages, which will cause a reconnect without selecting a device in the dialog.

However, the scanning/request dialog is still shown (and it doesn't disappear when a device is connected). Is there any option to close the scanning/request dialog programatically? It does not support AbortController signals.

Posted at 2021-04-30 by @fanoush

Having said that, this example from the Chrome team themselves doesn't appear to remember devices: https://googlechrome.github.io/samples/w­eb-bluetooth/watch-advertisements-and-co­nnect.html

Oh, it does for me. Clicked 'request device' selected Espruino device. Clicked 'connect to bluetooth devices' and it connected. Then I reloaded the page and clicked connect again and it remembered previous device and connected again.

EDIT: and btw about that security effort, here is issue WebBluetoothCG/web-bluetooth#358 where they are pretty anal about showing the dialog with no way to circumvent/customize/prevent it but that is for first connection, here WebBluetoothCG/web-bluetooth#164 it clearly says this should work

Posted at 2021-04-30 by user128009

@fanoush: Interesting, could you post details on your OS/Bluetooth/Browser/Espruino combo? Definitely doesn't work for me (macOS 10.15/Chrome 90 + flag:#enable-web-bluetooth-new-permissions-backend/Puck.js v2.09)

//Press Connect
Getting existing permitted Bluetooth devices...
> Got 1 Bluetooth device.
Watching advertisements from "Puck.js c699"...
//Stuck here, but if you now press Request and don't select a device:
Requesting any Bluetooth device...
> Received advertisement from "Puck.js c699"...
Connecting to GATT Server from "Puck.js c699"...
> Bluetooth device "Puck.js c699 connected.
//Abort Request
Argh! NotFoundError: User cancelled the requestDevice() chooser.

It seems like for some reason your Espruino is still sending advertisement packets even after it is connected? Do you have any Bluetooth device scanning tool running in the background/in parallel?

Posted at 2021-04-30 by @fanoush

it is recent Chrome (89) on windows 10, device is nrf52840 dongle with SDK15 based Espruino, however it does not matter, I just tried DK08 watch (sdk11 based firmware) and it worked too. even closed the window, opened new, clicked connect and it even tried both remembered devices and picked up the watch

Getting existing permitted Bluetooth devices...
> Got 2 Bluetooth devices.
Watching advertisements from "Magic3 1f60"...
Watching advertisements from "DK08"...
> Received advertisement from "DK08"...
Connecting to GATT Server from "DK08"...
> Bluetooth device "DK08 connected.

BTW the dongle is named Magic3 since it is name of some other 52840 hackable watch I was testing FW for.

No scanning tool running in the backround AFAICT.

EDIT:
It can be timing issue, I now tried to reload and quickly connect and was also stuck on "Watching advertisements ", previously I tried successfully several times but always clicked connect after some seconds.

Posted at 2021-04-30 by @fanoush

now I closed window, removed and reconnected the dongle (=power cycled it, cannot do it with the watch), reopened https://googlechrome.github.io/samples/web-bluetooth/watch-advertisements-and-connect.html page, clicked request device but cancelled dialog, then clicked connect and it connected to both of them

Requesting any Bluetooth device...
Argh! NotFoundError: User cancelled the requestDevice() chooser.
Getting existing permitted Bluetooth devices...
> Got 2 Bluetooth devices.
Watching advertisements from "Magic3 1f60"...
Watching advertisements from "DK08"...
> Received advertisement from "DK08"...
Connecting to GATT Server from "DK08"...
> Bluetooth device "DK08 connected.
> Received advertisement from "Magic3 1f60"...
Connecting to GATT Server from "Magic3 1f60"...
> Bluetooth device "Magic3 1f60 connected.

so now I have opposite problem, don't have easy way to clear the list of remembered devices :-)

Posted at 2021-04-30 by user128009

I can confirm your experience on Windows 10/CSR8510 (Win10 Bluetooth Driver)/Chrome 90:

• Go to https://googlechrome.github.io/samples/web-bluetooth/watch-advertisements-and-connect-async-await.html
• Request and pair your Espruino
• Close/Reopen Chrome and go to the same site
• Press "Connect"
• Wait (up to 10 seconds in my 5 runs)

Result:

Getting existing permitted Bluetooth devices...
> Got 1 Bluetooth devices.
Watching advertisements from "Puck.js c699"...
> Received advertisement from "Puck.js c699"...
Connecting to GATT Server from "Puck.js c699"...
> Bluetooth device "Puck.js c699 connected.

On macOS I don't get a reconnect because no advertisement packets are received unless I explicitly trigger a scan or request a device.

Posted at 2021-05-01 by user128009

I connected the CSR8510 to my MacBook Pro 16 to check if the difference is caused by Windows or the Bluetooth chip; as a result Bluetooth on my MacBook Pro 16 is now bricked and apparently needs a Logic Board replacement (https://discussions.apple.com/thread/250944058). 🤷

Posted at 2021-05-04 by @gfwilliams

Wow, you can actually permanently brick on-board Bluetooth just by inserting a USB stick? that's crazy!

Posted at 2021-05-04 by user128009

It seems like the power requirement for the USB dongle permanently overwrites the (lower) power requirement for the integrated Bluetooth module. As a result the Bluetooth module thinks it is not supplied with sufficient power and shuts down.

Apparently there is a workaround with certain old Bluetooth 2.0 dongles with similar power requirements to the internal Bluetooth module, 2 I had lying around, which didn't work - I now bought a third one from eBay that I hope will fix this. Can't use the Puck.js until then and can't afford the time to have my MacBook shipped for repairs.

In the thread they are even shipping around old Bluetooth dongles via post to fix this.

Posted at 2021-05-04 by user128009

@gfwilliams: What is interesting is that the automatic reconnect works on Windows/CSR8510. Can you clarify which Browser/OS/Bluetooth combo you have where it doesn't? Still trying to find out if this is specific to OS or the Bluetooth chip.

Posted at 2021-05-04 by @gfwilliams

I'm using Linux here... Honestly I'd think that changes between OS were most likely due to Chrome's implementation. It's something I imagine we could flag up with them.

I don't suppose this is related to whether the 'Experimental Web Platform features' flag is enabled?

Posted at 2021-05-04 by user128009

I don't think this is related to the flag, as I can't run the examples without it, IIRC .getDevices() is not defined without the new permission backend flag.

Interesting that Linux/macOS behave similarly, how can we check if this is a Chrome implementation issue? https://github.com/GoogleChrome/samples/issues does not appear to be monitoring new issues.

Posted at 2021-05-05 by @gfwilliams

I think issues need to be filed in https://bugs.chromium.org/p/chromium/issues/list - there's a special bug type for Web Bluetooth I believe

Posted at 2021-05-05 by @fanoush

it is discussed here https://bugs.chromium.org/p/chromium/issues/detail?id=577953&q=bluetooth%20permissions%20getDevices&can=2
they mention it is hidden behind flag but I do not remember setting any flag for Chrome on Windows. BTW they link guide https://docs.google.com/document/d/1RF4D-60cQJWR1LoQeLBxxigrxJwYS8nLOE0qWmBF1eo/edit which shows Puck.js as an example :-)

or there are more issues related
https://bugs.chromium.org/p/chromium/issues/list?q=bluetooth%20permissions%20getDevices&can=2

also the https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API is not very green for getDevices() line :-(

Posted at 2021-05-05 by user128009

Thanks for the link to the issue tracker. So to summarize, reconnecting to already paired devices should be supported in Chrome when using chrome://flags/#enable-web-bluetooth-new-permissions-backend and chrome://flags/#enable-experimental-web-platform-features and this code:

async function getPermittedBluetoothDevices() {
  let devices = await navigator.bluetooth.getDevices();
  for (let device of devices) {
    // Start a scan for each device before connecting to check that they're in
    // range.
    let abortController = new AbortController();
    await device.watchAdvertisements({signal: abortController.signal});
    device.addEventListener('advertisementreceived', async (evt) => {
      // Stop the scan to conserve power on mobile devices.
      abortController.abort();
 
      // At this point, we know that the device is in range, and we can attempt
      // to connect to it.
      await evt.device.gatt.connect();
    });
  }
}

However, at least on Linux and macOS, the event advertisementreceived is never triggered. Is that an issue with Chrome, the OS or the device? Looks like .watchAdvertisement is supposed to trigger advertisement packages but it doesn't on Linux/macOS?