0

I'm trying to get PouchDB's Getting Started Guide working using IE11 from a local file (file://). Is it possible?

It works great using a local http server by adding the following scripts to the header in the index.html file:

<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@3.0.0/dist/fetch.umd.min.js"></script>

I think my issue is both indexedDB and localStorage seem to be restricted by IE when served using the file:// protocol, however I was able to get localStorage working on it's own using the code below from this post:

!localStorage && (l = location, p = l.pathname.replace(/(^..)(:)/, "$1$$"), (l.href = l.protocol + "//127.0.0.1" + p));

So I thought that would get it working, but even then when i add the pouchdb localstorage adapter I get this error: "AssertionError: .status required, old abstract-leveldown".

Even if that did work, the solution isn't ideal because I need to add file://127.0.0.1 to the trusted sites list.

That's about as far as I've gotten, any help would be appreciated!

Elwyn Teki
  • 11
  • 1
  • Why are you not using the `idb` adapter? – RamblinRose Feb 25 '20 at 02:06
  • Hi Ramblin, the idb (indexedDB) adapter doesn't work when using a local 'file://', it's 'undefined'. The only storage I've been able to get to work with IE11 is the localStorage using that work around above. Unless I'm missing something :\ – Elwyn Teki Feb 25 '20 at 02:46
  • Which version of abstract-leveldown are you using? From the following similar issues: [issue 1](https://github.com/Level/level-js/issues/59) and [issue 2](https://github.com/pouchdb/pouchdb/issues/6949), it seems that this is a allowed failures, you could try to set the db.status before using levelup. – Zhi Lv Feb 25 '20 at 03:08
  • Hi Zhi, I should confess I'm not a web-developer by trade so just doing my best here. But I've tried setting db.status in the pouchdb localstorage adaptor, it did get me pass that error im now getting a pouchdb object back which is great, but when I do this: db.allDocs({include_docs: true, descending: true}, function(err, doc) { redrawTodosUI(doc.rows); }); doc comes back as undefined and results in this warning: Possible Unhandled Promise Rejection: TypeError: Unable to get property 'rows' of undefined or null reference. So it doesn't work... but we're closer? – Elwyn Teki Feb 25 '20 at 04:22
  • Hi Zhi, thanks for your help, it's working now with localstorage, the last thing I needed to do was add the object-assign polyfill for IE after making that change it's all working. It's not entirely ideal due to the user having to add 'file://127.0.0.1' to their trusted sites, so I'll wait to see if anyone comes up with a cleaner solution, otherwise I'll write that in as the final solution. – Elwyn Teki Feb 25 '20 at 04:55

1 Answers1

1

Thanks to Zhi Lv - MSFT comment I was able to get the demo working in IE11, however it requires the user to add 'file://127.0.0.1' to the trusted sites list in IE.

After completing the 'Getting Started' guide you'll need to make the following changes.

Update the head element in index.html file:

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>VanillaJS • TodoMVC</title>
    <link rel="stylesheet" href="style/base.css">
    <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@3.0.0/dist/fetch.umd.min.js"></script>      
    <script src="pouchdb/object-assign.js"></script>
    <script src="pouchdb/pouchdb-7.2.1.js"></script>
    <script src="pouchdb/pouchdb.localstorage.js"></script>
    <script src="pouchdb/pouchdb.memory.js"></script>

    <!--[if IE]>
      <script src="style/ie.js"></script>
    <![endif]-->
  </head>

You will need to download any missing 7.2.1 pouch-db files and put into a pouchdb directory. object-assign.js can be found here.

Modify the app.js, replace the db variable with these two lines:

  !localStorage && (l = location, p = l.pathname.replace(/(^..)(:)/, "$1$$"), (l.href = l.protocol + "//127.0.0.1" + p));
  var db = new PouchDB('todos', {adapter: 'localstorage'});

Goto line 8796 of pouchdb.localstorage.js, edit it to set the db.status like this:

function LevelUP (db, options, callback) {
  db.status = 'unknown';
  if (!(this instanceof LevelUP)) {
    return new LevelUP(db, options, callback)
  }

Bit of a muck around, but worked for me. Any improvement please let me know.

Elwyn Teki
  • 11
  • 1