Local javascript website (file:///) confuses notification permissions on Chrome, Edge

I'm building a companion website/app for the call center I work at which does a bunch of handy things including tracking breaks, and that's where I'm having issues.

This "site" will be stored as an html file the user keeps on their computer (I can't host it elsewhere for security reasons), and that seems to be the core of the problem as I'm trying to enable desktop alerts.

Here's what I'm using for requesting notification permission:

    document.addEventListener('DOMContentLoaded', function () {
  if (!Notification) {
    alert('Desktop notifications not available in this browser.');
    return;
  }
  if (Notification.permission !== "granted")
    Notification.requestPermission();
});

function notifyMe() {
  if (Notification.permission !== "granted")
    Notification.requestPermission();
 else {
    var notification = new Notification('Notification title', {
      body: "Notification",
    });
  }
}    

...Which I found in another thread here.

Problem is, as a local file, Chrome will never acknowledge it as having permission: I can click "approve" or "block" and nothing happens. If I manually add "file:///*" to Chrome's allowed sites, it will then receive notifications (it won't if I manually add the entire local address, however). Edge will add "file:" to its approved list but this doesn't work and cannot be edited.

I might just be out of luck here, as I want to get notifications working with a single button click for approval in Chrome (and they won't work at all in Edge).

Is there a way to specify the address you want the browser to add to the approved list? I can see a number of potential security issues with doing that, but it might be the only thing that will resolve this.

Thanks in advance!