Bluetooth device get disconnected when navigating to other pages

Question

I am creating an web app in which web bluetooth need to be paired in all web pages. I was able to pair a device on the index.html page but when navigating to other pages the bluetooth connection gets disconnected.Is there a way to use the same paired device again without the need to reconnect it? I am using the following sample to connect to device https://googlechrome.github.io/samples/web-bluetooth/automatic-reconnect.html

Code:

<ul><a href="page1.html">page1</a></ul>
<ul><a href="page2.html">page2</a></ul>
<ul><a href="page3.html">page3</a></ul>

<form>
    <button>Scan</button>
</form>
<h3>Live Output</h3>
<div id="output" class="output">
    <div id="content"></div>
    <div id="status"></div>
    <pre id="log"></pre>
</div>

<script>
    var bluetoothDevice;

    var ChromeSamples = {
        log: function() {
            var line = Array.prototype.slice.call(arguments).map(function(argument) {
                return typeof argument === 'string' ? argument : JSON.stringify(argument);
            }).join(' ');

            document.querySelector('#log').textContent += line + '\n';
        },

        clearLog: function() {
            document.querySelector('#log').textContent = '';
        },

        setStatus: function(status) {
            document.querySelector('#status').textContent = status;
        },

        setContent: function(newContent) {
            var content = document.querySelector('#content');
            while(content.hasChildNodes()) {
                content.removeChild(content.lastChild);
            }
            content.appendChild(newContent);
        }
    };

    function onButtonClick() {
        bluetoothDevice = null;
        log('Requesting any Bluetooth Device...');
        navigator.bluetooth.requestDevice({
            // filters: [...] <- Prefer filters to save energy & show relevant devices.
            acceptAllDevices: true})
        .then(device => {
            bluetoothDevice = device;
            sessionStorage.lastDevice = device.id;

            console.log(bluetoothDevice);
            log(bluetoothDevice.id);
            log(bluetoothDevice.name);
            bluetoothDevice.addEventListener('gattserverdisconnected', onDisconnected);
            connect();
        })
        .catch(error => {
            log('Argh! ' + error);
        });
    }

    function connect() {
        exponentialBackoff(3 /* max retries */, 2 /* seconds delay */,
            function toTry() {
            time('Connecting to Bluetooth Device... ');
            return bluetoothDevice.gatt.connect();
            },
            function success() {
            log('> Bluetooth Device connected. Try disconnect it now.');
            },
            function fail() {
            time('Failed to reconnect.');
            });
    }

    function onDisconnected() {
        log('> Bluetooth Device disconnected');
        connect();
    }

    // if (sessionStorage) {
    //     navigator.permissions.query({
    //         name: "bluetooth",
    //         deviceId: sessionStorage.lastDevice,
    //     }).then(result => {
    //         if (result.devices.length == 1) {
    //             log(result.devices[0].id);
    //             log(result.devices[0].name);
    //             return result.devices[0];
    //         } else {
    //             throw new DOMException("Lost permission", "NotFoundError");
    //         }
    //     })
    // }

    /* Utils */

    // This function keeps calling "toTry" until promise resolves or has
    // retried "max" number of times. First retry has a delay of "delay" seconds.
    // "success" is called upon success.
    function exponentialBackoff(max, delay, toTry, success, fail) {
        toTry().then(result => success(result))
        .catch(_ => {
            if (max === 0) {
            return fail();
            }
            time('Retrying in ' + delay + 's... (' + max + ' tries left)');
            setTimeout(function() {
            exponentialBackoff(--max, delay * 2, toTry, success, fail);
            }, delay * 1000);
        });
    }

    function time(text) {
        log('[' + new Date().toJSON().substr(11, 8) + '] ' + text);
    }

    document.querySelector('button').addEventListener('click', function(event) {
        event.stopPropagation();
        event.preventDefault();

        if (isWebBluetoothEnabled()) {
        ChromeSamples.clearLog();
        onButtonClick();
        }
    });
    
    log = ChromeSamples.log;

    function isWebBluetoothEnabled() {
        if (navigator.bluetooth) {
        return true;
        } else {
        ChromeSamples.setStatus('Web Bluetooth API is not available.\n' +
            'Please make sure the "Experimental Web Platform features" flag is enabled.');
        return false;
        }
    }
</script>

Answer 1

Chrome's current implementation of Web Bluetooth does not have a way for websites to get a list of permitted devices. The WIP getDevices() will return a list of BluetoothDevice objects that the current origin has been granted permission to use by the user so that you can reconnect to them.

See https://www.chromestatus.com/feature/4797798639730688

And here's some sample code you can try today when enabling experimental-web-platform-features flag in chrome://flags to give it a try.

navigator.bluetooth.getDevices()
.then(devices => {
  console.log('> Got ' + devices.length + ' Bluetooth devices.');
  for (const device of devices) {
    console.log('  > ' + device.name + ' (' + device.id + ')');
  }
})
.catch(error => {
  console.log('Argh! ' + error);
});