PWA and localstorage

We in our company have been more and more plunging into the process of developing Progressive Web Applications (PWA) recently. The essence of PWA is simple - the WEB application can be installed as native. It works fine on android, windows and linux. It works a little worse on iOs and macos. But today it's not about compatibility.

Earlier, almost always when it was necessary to save some information in the browser, we used localStorage. Its built-in limitations suited us completely in almost all cases (with the exception of some projects). But in the case of PWA, the situation is interesting - localStorage does not work in PWA mode. That is, when the application is launched "as native" in the phone interface. The problem is not critical, but it took some time to understand what was happening.

The solution is quite simple – to use IndexedDB.

import { openDB } from 'idb'

const dbPromise = openDB('keyval-store', 1, {
  upgrade (db) {
    db.createObjectStore('keyval')
  }
})

const idbKeyval = {
  async get (key) {
    return (await dbPromise).get('keyval', key)
  },
  async set (key, val) {
    return (await dbPromise).put('keyval', val, key)
  },
  async delete (key) {
    return (await dbPromise).delete('keyval', key)
  },
  async clear () {
    return (await dbPromise).clear('keyval')
  },
  async keys () {
    return (await dbPromise).getAllKeys('keyval')
  }
}

let data = idbKeyval.get('key') // получение значения
idbKeyval.set('key', '123') // сохранение значения
idbKeywal.delete('key') // удаление значения

The extension itself is installed with a simple command

npm install -s idb

Ultimately, we can use idbKeyval as a storage of the "Key-Values" type and completely replace localstorage with functionality support everywhere.

P.S. There is also an extension https://www.npmjs.com/package/localforage which implements API Localstorage using WebSQL or IndexedDB.