Access to the Indexed Database API is denied in this context

问题

I'm getting an exception when I try to access IndexedDB in Chrome with Service Workers. I'm not using a web server so I execute my html files locally onto browser so my url is something like

file:///D:/Dev/web/sample-sw/index.html

I don't know why the code works on Firefox but it doesn't on Chrome.

This is the exception:

Unhandled rejection: OpenFailedError: SecurityError Failed to execute 'open' on 'IDBFactory': access to the Indexed Database API is denied in this context.

My index.html is this:

<html>
<head>
    <title>Offline Google Analytics Demo</title>
</head>
<body>

    <button type="button" onclick="startWorker()" id="btnStart">
      Start WebWorker
  </button>

  <button type="button" onclick="stopWorker()" id="btnStop">
      Stop WebWorker
  </button>


<p id="demo"></p>

<!-- Include Dexie -->
<script src="https://unpkg.com/dexie@latest/dist/dexie.js"></script>
<!-- Include JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>


<script id="worker" type="javascript/worker">

importScripts("https://unpkg.com/dexie@latest/dist/dexie.js");

var started = false;
var timer;

onmessage = function (event)
{
    var orden = event.data.toString();

    switch (orden)
    {
        case 'start':
            start();
            break;

        case 'stop':
            stop();
            break;

        default:
        notRecognized(orden);
            break;
    }
}


function start() {
    if(! started)
    {
        timer = setInterval(function(){ job() }, 3000);
        started = true;
    }
}

function stop() {
    if(started)
    {
        clearInterval(timer);
        started = false;
    }
}

function job()     
{

    var db = new Dexie("ga_offline");
    //db.delete();                               

    db.version(1).stores({
            urls: '++id,url,fecha'
        });


    db.urls.put({url: "home.html", fecha: '2017-03-07 10:00:00'});
    db.urls.put({url: "home2.html", fecha: '2017-03-07 10:00:00'});

}

function notRecognized(orden)
{
    var mensaje = 'Comando no reconocido';
    selt.postMessage(mensaje + ': ' + orden);
}

</script>


  <script type="text/javascript">

      var myWorker;

      //Al cargar la pagina, se llama al onload, que carga el WebWorker
      window.onload = function () {

         //carga de js externos no permitido en chrome, hay q programarlo inline con Blob
          //myWorker = new Worker("worker1");

          //creo un elemento al vuelo con el contenido del script que contiene al worker
            var blob = new Blob([ document.querySelector('#worker').textContent ], {type : 'text/javascript'});
            //creo el worker
            myWorker = new Worker(window.URL.createObjectURL(blob));

          //Cuando se recibe un mensaje del worker, se ejecuta esto
          myWorker.onmessage = function (event) {
              document.getElementById("demo").textContent = event.data; //cambiamos el texto del <p>
              console.log("Got: " + event.data + "\n");
          };

          //cuando se produzca un pedo en el worker, se invoca esto
          myWorker.onerror = function (error) {
              console.log("Worker error: " + error.message + "\n");
              throw error;
          };
      };//fin onload

    //click en botón iniciar, mandamos 'start' al worker
    function startWorker() {
        myWorker.postMessage('start');
    }
    //click en botón parar, mandamos 'stop' al worker
    function stopWorker() {
        myWorker.postMessage('stop');
    }

  </script>

</body>

I appreciate some help. Thank you.

回答1:

Launch chromium with flag --allow-file-access-from-files

回答2:

It might be that you are not serving it from the web. If you have npm installed, try do this from a shell or command prompt and see if it helps:

npm install http-server -g
cd <your web root>
http-server -c .

Then start a browser to http://localhost:8080/ and view the console in your browser.

来源：https://stackoverflow.com/questions/42805775/access-to-the-indexed-database-api-is-denied-in-this-context

标签

google-chrome

indexeddb

web-worker

service-worker

dexie