{"id":148,"date":"2019-08-19T12:00:48","date_gmt":"2019-08-19T09:00:48","guid":{"rendered":"https:\/\/amorev.ru\/?p=148"},"modified":"2019-10-06T20:50:41","modified_gmt":"2019-10-06T17:50:41","slug":"pwa-and-localstorage","status":"publish","type":"post","link":"https:\/\/amorev.ru\/en\/pwa-and-localstorage\/","title":{"rendered":"PWA and localstorage"},"content":{"rendered":"\n<p>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.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/amorev.ru\/wp-content\/uploads\/2019\/08\/1552460680956-indexeddb-programming-with-dexiejs-1024x546.jpg\" alt=\"\u042d\u0442\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438\u043c\u0435\u0435\u0442 \u043f\u0443\u0441\u0442\u043e\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 alt; \u0435\u0433\u043e \u0438\u043c\u044f \u0444\u0430\u0439\u043b\u0430 - 1552460680956-indexeddb-programming-with-dexiejs-1024x546.jpg\"\/><\/figure>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>The solution is quite simple \u2013 to use IndexedDB.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import { openDB } from 'idb'\n\nconst dbPromise = openDB('keyval-store', 1, {\n  upgrade (db) {\n    db.createObjectStore('keyval')\n  }\n})\n\nconst idbKeyval = {\n  async get (key) {\n    return (await dbPromise).get('keyval', key)\n  },\n  async set (key, val) {\n    return (await dbPromise).put('keyval', val, key)\n  },\n  async delete (key) {\n    return (await dbPromise).delete('keyval', key)\n  },\n  async clear () {\n    return (await dbPromise).clear('keyval')\n  },\n  async keys () {\n    return (await dbPromise).getAllKeys('keyval')\n  }\n}\n\nlet data = idbKeyval.get('key') \/\/ \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\nidbKeyval.set('key', '123') \/\/ \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\nidbKeywal.delete('key') \/\/ \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f<\/pre>\n\n\n\n<p>The extension itself is installed with a simple command<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm install -s idb<\/pre>\n\n\n\n<p>Ultimately, we can use idbKeyval as a storage of the \"Key-Values\" type and completely replace localstorage with functionality support everywhere.<\/p>\n\n\n\n<p>P.S. There is also an extension <a href=\"https:\/\/www.npmjs.com\/package\/localforage\">https:\/\/www.npmjs.com\/package\/localforage<\/a> which implements API Localstorage using WebSQL or IndexedDB.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &hellip; <\/p>\n","protected":false},"author":1,"featured_media":164,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[166,49],"tags":[153,29,28,18],"class_list":["post-148","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-main","category-razrabotka","tag-develop","tag-indexeddb","tag-localstorage","tag-pwa"],"_links":{"self":[{"href":"https:\/\/amorev.ru\/en\/wp-json\/wp\/v2\/posts\/148","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/amorev.ru\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/amorev.ru\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/amorev.ru\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/amorev.ru\/en\/wp-json\/wp\/v2\/comments?post=148"}],"version-history":[{"count":0,"href":"https:\/\/amorev.ru\/en\/wp-json\/wp\/v2\/posts\/148\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/amorev.ru\/en\/wp-json\/wp\/v2\/media\/164"}],"wp:attachment":[{"href":"https:\/\/amorev.ru\/en\/wp-json\/wp\/v2\/media?parent=148"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/amorev.ru\/en\/wp-json\/wp\/v2\/categories?post=148"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/amorev.ru\/en\/wp-json\/wp\/v2\/tags?post=148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}