<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>service worker &#8212; ploshadka.net</title>
	<atom:link href="https://ploshadka.net/tag/service-worker/feed/" rel="self" type="application/rss+xml" />
	<link>https://ploshadka.net</link>
	<description>Мир интернет технологий</description>
	<lastBuildDate>Sat, 08 Aug 2020 20:10:54 +0000</lastBuildDate>
	<language>ru-RU</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.1</generator>
	<item>
		<title>WorkBox</title>
		<link>https://ploshadka.net/workbox/</link>
					<comments>https://ploshadka.net/workbox/#respond</comments>
		
		<dc:creator><![CDATA[Admin]]></dc:creator>
		<pubDate>Wed, 01 Apr 2020 08:00:17 +0000</pubDate>
				<category><![CDATA[Support]]></category>
		<category><![CDATA[PWA]]></category>
		<category><![CDATA[service worker]]></category>
		<category><![CDATA[WorkBox]]></category>
		<category><![CDATA[Основательные труды]]></category>
		<guid isPermaLink="false">https://ploshadka.net/?p=5624</guid>

					<description><![CDATA[WorkBox &#8212; инструмент от Google для настройки service worker. О том как настраивать service worker я уже писал. Описанные методы в той статье помогают настроить сервис воркер, но при этом настраивая его вручную, придется самостоятельно решать все сложности с кэшем....]]></description>
										<content:encoded><![CDATA[<p><strong>WorkBox</strong> &#8212; инструмент от Google для настройки service worker.<span id="more-5624"></span></p>
<p>О том как <a href="https://ploshadka.net/kak-zapustit-pwa/">настраивать service worker</a> я уже писал. </p>
<p>Описанные методы в той статье помогают настроить сервис воркер, но при этом настраивая его вручную, придется самостоятельно решать все сложности с кэшем. </p>
<p>WorkBox это библиотека или если хотите фреймворк для PWA. Он помогает настроить service worker так, чтобы вы полностью контролировали всю работу с кэшем.</p>
<p>В этой статье будет дано описание как настроить сервис воркер версии 3.6.1. Текущая версия 5-ая и она работает чуть иначе. Однако и 3.6.1 справляется с этой задачей. А так как на другой версии я пока не создавал, опишу процесс на версии 3.6.1.</p>
<h2>Настройка workbox</h2>
<p>Скачиваем workbox и кладем его внутрь файла <strong>sw.js</strong>:</p>
<div class="codecolorer-container javascript dawn" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;"><span style="color: #006600; font-style: italic;">// Workbox from google</span><br />
<span style="color: #000066; font-weight: bold;">var</span> workbox<span style="color: #339933;">=</span><span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><span style="color: #3366CC;">&quot;use strict&quot;</span><span style="color: #339933;">;</span><span style="color: #000066; font-weight: bold;">try</span><span style="color: #009900;">&#123;</span>self.<span style="color: #660066;">workbox</span>.<span style="color: #660066;">v</span><span style="color: #009900;">&#91;</span><span style="color: #3366CC;">&quot;workbox:sw:3.6.1&quot;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">=</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#125;</span><span style="color: #000066; font-weight: bold;">catch</span><span style="color: #009900;">&#40;</span>t<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #000066; font-weight: bold;">const</span> t<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;https://storage.googleapis.com/workbox-cdn/releases/3.6.1&quot;</span><span style="color: #339933;">,</span>e<span style="color: #339933;">=</span><span style="color: #009900;">&#123;</span>backgroundSync<span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;background-sync&quot;</span><span style="color: #339933;">,</span>broadcastUpdate<span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;broadcast-cache-update&quot;</span><span style="color: #339933;">,</span>cacheableResponse<span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;cacheable-response&quot;</span><span style="color: #339933;">,</span>core<span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;core&quot;</span><span style="color: #339933;">,</span>expiration<span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;cache-expiration&quot;</span><span style="color: #339933;">,</span>googleAnalytics<span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;google-analytics&quot;</span><span style="color: #339933;">,</span>navigationPreload<span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;navigation-preload&quot;</span><span style="color: #339933;">,</span>precaching<span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;precaching&quot;</span><span style="color: #339933;">,</span>rangeRequests<span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;range-requests&quot;</span><span style="color: #339933;">,</span>routing<span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;routing&quot;</span><span style="color: #339933;">,</span>strategies<span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;strategies&quot;</span><span style="color: #339933;">,</span>streams<span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;streams&quot;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span><span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">new</span> <span style="color: #FF0000;">class</span><span style="color: #009900;">&#123;</span>constructor<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">v</span><span style="color: #339933;">=</span><span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">t</span><span style="color: #339933;">=</span><span style="color: #009900;">&#123;</span>debug<span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;localhost&quot;</span><span style="color: #339933;">===</span>self.<span style="color: #660066;">location</span>.<span style="color: #660066;">hostname</span><span style="color: #339933;">,</span>modulePathPrefix<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">,</span>modulePathCb<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">e</span><span style="color: #339933;">=</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">t</span>.<span style="color: #660066;">debug</span><span style="color: #339933;">?</span><span style="color: #3366CC;">&quot;dev&quot;</span><span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;prod&quot;</span><span style="color: #339933;">,</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">s</span><span style="color: #339933;">=!</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span><span style="color: #000066; font-weight: bold;">new</span> Proxy<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">,</span><span style="color: #009900;">&#123;</span><span style="color: #000066; font-weight: bold;">get</span><span style="color: #009900;">&#40;</span>t<span style="color: #339933;">,</span>s<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>t<span style="color: #009900;">&#91;</span>s<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #000066; font-weight: bold;">return</span> t<span style="color: #009900;">&#91;</span>s<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span><span style="color: #000066; font-weight: bold;">const</span> o<span style="color: #339933;">=</span>e<span style="color: #009900;">&#91;</span>s<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span><span style="color: #000066; font-weight: bold;">return</span> o<span style="color: #339933;">&amp;&amp;</span>t.<span style="color: #660066;">loadModule</span><span style="color: #009900;">&#40;</span>`workbox<span style="color: #339933;">-</span>$<span style="color: #009900;">&#123;</span>o<span style="color: #009900;">&#125;</span>`<span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>t<span style="color: #009900;">&#91;</span>s<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#125;</span>setConfig<span style="color: #009900;">&#40;</span>t<span style="color: #339933;">=</span><span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">s</span><span style="color: #009900;">&#41;</span><span style="color: #000066; font-weight: bold;">throw</span> <span style="color: #000066; font-weight: bold;">new</span> Error<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Config must be set before accessing workbox.* modules&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="">Object</span>.<span style="color: #660066;">assign</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">t</span><span style="color: #339933;">,</span>t<span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">e</span><span style="color: #339933;">=</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">t</span>.<span style="color: #660066;">debug</span><span style="color: #339933;">?</span><span style="color: #3366CC;">&quot;dev&quot;</span><span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;prod&quot;</span><span style="color: #009900;">&#125;</span>skipWaiting<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>self.<span style="color: #660066;">addEventListener</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;install&quot;</span><span style="color: #339933;">,</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">=&gt;</span>self.<span style="color: #660066;">skipWaiting</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#125;</span>clientsClaim<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>self.<span style="color: #660066;">addEventListener</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;activate&quot;</span><span style="color: #339933;">,</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">=&gt;</span>self.<span style="color: #660066;">clients</span>.<span style="color: #660066;">claim</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#125;</span>loadModule<span style="color: #009900;">&#40;</span>t<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><span style="color: #000066; font-weight: bold;">const</span> e<span style="color: #339933;">=</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">o</span><span style="color: #009900;">&#40;</span>t<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #000066; font-weight: bold;">try</span><span style="color: #009900;">&#123;</span>importScripts<span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">s</span><span style="color: #339933;">=!</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#125;</span><span style="color: #000066; font-weight: bold;">catch</span><span style="color: #009900;">&#40;</span>s<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><span style="color: #000066; font-weight: bold;">throw</span> console.<span style="color: #660066;">error</span><span style="color: #009900;">&#40;</span>`Unable to <span style="color: #FF0000;">import</span> module <span style="color: #3366CC;">'${t}'</span> from <span style="color: #3366CC;">'${e}'</span>.`<span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>s<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#125;</span>o<span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">t</span>.<span style="color: #660066;">modulePathCb</span><span style="color: #009900;">&#41;</span><span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">t</span>.<span style="color: #660066;">modulePathCb</span><span style="color: #009900;">&#40;</span>e<span style="color: #339933;">,</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">t</span>.<span style="color: #660066;">debug</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>let s<span style="color: #339933;">=</span><span style="color: #009900;">&#91;</span>t<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span><span style="color: #000066; font-weight: bold;">const</span> o<span style="color: #339933;">=</span>`$<span style="color: #009900;">&#123;</span>e<span style="color: #009900;">&#125;</span>.$<span style="color: #009900;">&#123;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">e</span><span style="color: #009900;">&#125;</span>.<span style="color: #660066;">js</span>`<span style="color: #339933;">,</span>r<span style="color: #339933;">=</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">t</span>.<span style="color: #660066;">modulePathPrefix</span><span style="color: #339933;">;</span><span style="color: #000066; font-weight: bold;">return</span> r<span style="color: #339933;">&amp;&amp;</span><span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">===</span><span style="color: #009900;">&#40;</span>s<span style="color: #339933;">=</span>r.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;/&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span>s.<span style="color: #660066;">length</span><span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">&amp;&amp;</span>s.<span style="color: #660066;">splice</span><span style="color: #009900;">&#40;</span>s.<span style="color: #660066;">length</span><span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>s.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span>o<span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>s.<span style="color: #660066;">join</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;/&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></div></div>
<p>Дальше в этом же файле внутрь конструкции:</p>
<div class="codecolorer-container javascript dawn" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;"><span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>workbox<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
<span style="color: #009900;">&#125;</span></div></div>
<p>Добавляем файлы, которые будут отвечать за режим офлайн и страницы 404:</p>
<div class="codecolorer-container javascript dawn" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;">&nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">const</span> versionPrecache <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; workbox.<span style="color: #660066;">precaching</span>.<span style="color: #660066;">precacheAndRoute</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#91;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #3366CC;">&quot;url&quot;</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;pwa-offline.html&quot;</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #3366CC;">&quot;revision&quot;</span><span style="color: #339933;">:</span> versionPrecache<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #3366CC;">&quot;url&quot;</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;pwa-404.html&quot;</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #3366CC;">&quot;revision&quot;</span><span style="color: #339933;">:</span> versionPrecache<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></div></div>
<h2>Кэшируем изображения</h2>
<p>Дальше есть несколько вариантов написания, что ложить в кэш, например:</p>
<div class="codecolorer-container javascript dawn" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;">&nbsp; &nbsp; workbox.<span style="color: #660066;">routing</span>.<span style="color: #660066;">registerRoute</span><span style="color: #009900;">&#40;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009966; font-style: italic;">/(.*)\.(?:png|gif|jpg)(.*)/</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; workbox.<span style="color: #660066;">strategies</span>.<span style="color: #660066;">networkFirst</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cacheName<span style="color: #339933;">:</span> <span style="color: #3366CC;">'images'</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; plugins<span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">new</span> workbox.<span style="color: #660066;">cacheableResponse</span>.<span style="color: #660066;">Plugin</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; statuses<span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">200</span><span style="color: #009900;">&#93;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">new</span> workbox.<span style="color: #660066;">expiration</span>.<span style="color: #660066;">Plugin</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; maxEntries<span style="color: #339933;">:</span> <span style="color: #CC0000;">100</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; maxAgeSeconds<span style="color: #339933;">:</span> <span style="color: #CC0000;">60</span> <span style="color: #339933;">*</span> <span style="color: #CC0000;">60</span> <span style="color: #339933;">*</span> <span style="color: #CC0000;">24</span> <span style="color: #339933;">*</span> <span style="color: #CC0000;">7</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; purgeOnQuotaError<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">true</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#93;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></div></div>
<p>Этим мы создали группу <strong>images</strong>, воспользовались стратегией <strong>networkFirst</strong>. </p>
<div class="highlight">Стратегия networkFirst &#8212; это стратегия, при которой содержимое в кэше будет обновлено, если на сайте что-то изменилось. Если доступа в онлайн нет, то будет браться содержимое из кэша.</div>
<p>Используем <strong>purgeOnQuotaError</strong>, чтобы при превышении квоты на хранение данных очищать содержимое кэша.</p>
<p>Указываем <strong>maxEntries</strong> &#8212; сколько хранить элементов в кэше и количество в секундах <strong>maxAgeSeconds</strong>.</p>
<div class="highlight">Когда время указанное в maxAgeSeconds закончится, кэш удалиться, даже если приложение не в онлайн.</div>
<p><strong>cacheableResponse</strong> &#8212; говорит о том, что сохранять только то, что отдаёт нам статус 200.</p>
<h2>Кэшируем главную</h2>
<div class="codecolorer-container javascript dawn" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;"><span style="color: #000066; font-weight: bold;">const</span> mainHandler <span style="color: #339933;">=</span> workbox.<span style="color: #660066;">strategies</span>.<span style="color: #660066;">networkFirst</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; cacheName<span style="color: #339933;">:</span> <span style="color: #3366CC;">'main'</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; plugins<span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">new</span> workbox.<span style="color: #660066;">cacheableResponse</span>.<span style="color: #660066;">Plugin</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; statuses<span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">200</span><span style="color: #009900;">&#93;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">new</span> workbox.<span style="color: #660066;">expiration</span>.<span style="color: #660066;">Plugin</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; maxEntries<span style="color: #339933;">:</span> <span style="color: #CC0000;">50</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; maxAgeSeconds<span style="color: #339933;">:</span> <span style="color: #CC0000;">60</span> <span style="color: #339933;">*</span> <span style="color: #CC0000;">60</span> <span style="color: #339933;">*</span> <span style="color: #CC0000;">24</span> <span style="color: #339933;">*</span> <span style="color: #CC0000;">3</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; purgeOnQuotaError<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">true</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#93;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<br />
&nbsp; &nbsp; workbox.<span style="color: #660066;">routing</span>.<span style="color: #660066;">registerRoute</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/^https:\/\/ploshadka.(net|net\/)$/</span><span style="color: #339933;">,</span> args <span style="color: #339933;">=&gt;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">return</span> mainHandler.<span style="color: #660066;">handle</span><span style="color: #009900;">&#40;</span>args<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">then</span><span style="color: #009900;">&#40;</span>response <span style="color: #339933;">=&gt;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>response<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">return</span> caches.<span style="color: #660066;">match</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'pwa-offline.html'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>response.<span style="color: #660066;">status</span> <span style="color: #339933;">===</span> <span style="color: #CC0000;">404</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">return</span> caches.<span style="color: #660066;">match</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'pwa-404.html'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">return</span> response<span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></div></div>
<p>В этой записи мы говорим о том, что главную страницу кладем в отдельную группу. Если она не закэширована, будем показывать страницу офлайн &#8212; pwa-offline.html.</p>
<p>По аналогии делаем для всего остального. </p>
<p>Принцип кэширования &#8212; кэширование идет сверху вниз. Если оно попадает в первые группы, то не попадает дальше.</p>
<p>Так как все страницы зачастую учесть сложно, я советую создать группу для всего и положить этот код в конец файла:</p>
<div class="codecolorer-container javascript dawn" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;"><span style="color: #000066; font-weight: bold;">const</span> allOtherHandler <span style="color: #339933;">=</span> workbox.<span style="color: #660066;">strategies</span>.<span style="color: #660066;">networkFirst</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; cacheName<span style="color: #339933;">:</span> <span style="color: #3366CC;">'other'</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; plugins<span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">new</span> workbox.<span style="color: #660066;">cacheableResponse</span>.<span style="color: #660066;">Plugin</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; statuses<span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">200</span><span style="color: #009900;">&#93;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">new</span> workbox.<span style="color: #660066;">expiration</span>.<span style="color: #660066;">Plugin</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; maxEntries<span style="color: #339933;">:</span> <span style="color: #CC0000;">100</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; maxAgeSeconds<span style="color: #339933;">:</span> <span style="color: #CC0000;">60</span> <span style="color: #339933;">*</span> <span style="color: #CC0000;">60</span> <span style="color: #339933;">*</span> <span style="color: #CC0000;">24</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; purgeOnQuotaError<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">true</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#93;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<br />
&nbsp; &nbsp; workbox.<span style="color: #660066;">routing</span>.<span style="color: #660066;">registerRoute</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/(.*)/</span><span style="color: #339933;">,</span> args <span style="color: #339933;">=&gt;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">return</span> allOtherHandler.<span style="color: #660066;">handle</span><span style="color: #009900;">&#40;</span>args<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">then</span><span style="color: #009900;">&#40;</span>response <span style="color: #339933;">=&gt;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>response<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">return</span> caches.<span style="color: #660066;">match</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'pwa-offline.html'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>response.<span style="color: #660066;">status</span> <span style="color: #339933;">===</span> <span style="color: #CC0000;">404</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">return</span> caches.<span style="color: #660066;">match</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'pwa-404.html'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">return</span> response<span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></div></div>
<p>Тогда любая страница будет показывать в режиме офлайн страницу pwa-offline.html.</p>
<h2>Установка Service Worker</h2>
<p>Нам понадобится еще один файл, который будет устанавливать все то что мы написали выше.</p>
<p>Назовем этот файл <strong>sw-setup.js</strong>.</p>
<div class="codecolorer-container text dawn" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;height:400px;"><div class="text codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap;">const DEBUG = true;<br />
<br />
// Меняем версию файла, когда меняем service worker<br />
const serviceWorkerVer = &quot;/sw.js?v=1&quot;;<br />
<br />
var url &nbsp; &nbsp; = window.location.origin,<br />
&nbsp; &nbsp; fullUrl = url + serviceWorkerVer;<br />
<br />
+function installServiceWorker() {<br />
&nbsp; &nbsp; if (&quot;serviceWorker&quot; in navigator) {<br />
&nbsp; &nbsp; &nbsp; &nbsp; window.addEventListener('load', () =&gt; {<br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (navigator.serviceWorker.controller !== null) {<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; DEBUG &amp;&amp; console.log(&quot;[SW] Текущая версия в браузере &quot; + navigator.serviceWorker.controller.scriptURL);<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; DEBUG &amp;&amp; console.log(&quot;[SW] Новая версия &quot; + fullUrl);<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (navigator.serviceWorker.controller === null) {<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; registrationServiceWorker(navigator.serviceWorker);<br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if (<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; navigator.serviceWorker.controller.scriptURL !== fullUrl) {<br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; removeServiceWorker(navigator.serviceWorker);<br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; removeCache('workbox-precache-v2-' + url + '/');<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; removeCache('workbox-precache-' + url + '/');<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; removeCache('workbox-precache-' + url + '/-temp');<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; removeCache('workbox-precache');<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; removeCache('images');<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; removeCache('main');<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; removeCache('other');<br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; DEBUG &amp;&amp; console.log(&quot;[SW] Активный service worker последней версии найден, повторно не регистрируем&quot;);<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<br />
&nbsp; &nbsp; &nbsp; &nbsp; });<br />
&nbsp; &nbsp; }<br />
}();<br />
<br />
// Регистрация Service Worker<br />
function registrationServiceWorker(navigatorServiceWorker) {<br />
&nbsp; &nbsp; navigatorServiceWorker<br />
&nbsp; &nbsp; &nbsp; &nbsp; .register(serviceWorkerVer)<br />
&nbsp; &nbsp; &nbsp; &nbsp; .then(reg =&gt; {<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; DEBUG &amp;&amp; console.log(`[SW] Зарегистрирован service worker для адреса (scope): &nbsp;${reg.scope}`);<br />
&nbsp; &nbsp; &nbsp; &nbsp; })<br />
&nbsp; &nbsp; &nbsp; &nbsp; .catch(err =&gt; {<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; DEBUG &amp;&amp; console.log(`[SW] При регистрации service worker произошла ошибка: ${err}`);<br />
&nbsp; &nbsp; &nbsp; &nbsp; });<br />
}<br />
<br />
// Удаления service worker<br />
function removeServiceWorker(navigatorServiceWorker) {<br />
&nbsp; &nbsp; navigatorServiceWorker.getRegistrations()<br />
&nbsp; &nbsp; &nbsp; &nbsp; .then(function (registrations) {<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (var registration of registrations) {<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; registration.unregister();<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; DEBUG &amp;&amp; console.log(&quot;[SW] Предыдущая версия service worker была успешно удалена&quot;);<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; DEBUG &amp;&amp; console.log(&quot;[SW] ! Для установки новой версии перезагрузите страницу&quot;);<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<br />
&nbsp; &nbsp; &nbsp; &nbsp; );<br />
}<br />
<br />
// Очистка кэша<br />
function removeCache(cache) {<br />
&nbsp; &nbsp; caches.delete(cache).then(function (boolean) {<br />
&nbsp; &nbsp; &nbsp; &nbsp; DEBUG &amp;&amp; console.log(&quot;[SW] Кэш &quot; + cache + &quot; очищен&quot;);<br />
&nbsp; &nbsp; });<br />
}</div></div>
<h2>Файл минифест</h2>
<p>О нем уже есть в <a href="https://ploshadka.net/kak-zapustit-pwa/">этой статье</a>. Надо повторить.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://ploshadka.net/workbox/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Uncaught (in promise) DOMException: Quota exceeded.</title>
		<link>https://ploshadka.net/uncaught-in-promise-domexception-quota-exceeded/</link>
					<comments>https://ploshadka.net/uncaught-in-promise-domexception-quota-exceeded/#respond</comments>
		
		<dc:creator><![CDATA[Admin]]></dc:creator>
		<pubDate>Fri, 20 Mar 2020 08:00:38 +0000</pubDate>
				<category><![CDATA[JavaScript Errors]]></category>
		<category><![CDATA[service worker]]></category>
		<guid isPermaLink="false">https://ploshadka.net/?p=5621</guid>

					<description><![CDATA[Описание ошибки в консоли при настройке service worker. Ошибка в консоли браузера: Uncaught (in promise) DOMException: Quota exceeded. Означает, что превышен размер для сохранения данных. Каждый браузер выделяет определенное кол-во данных для сохранения в хранилище. Объем данных зависит от размера...]]></description>
										<content:encoded><![CDATA[<p>Описание ошибки в консоли при настройке service worker. <span id="more-5621"></span></p>
<p>Ошибка в консоли браузера:</p>
<blockquote><p>Uncaught (in promise) DOMException: Quota exceeded.</p></blockquote>
<p>Означает, что превышен размер для сохранения данных. </p>
<p>Каждый браузер выделяет определенное кол-во данных для сохранения в хранилище. Объем данных зависит от размера жесткого диска и браузера. </p>
<p>Google Chrome в режиме инкогнито позволяет хранить только 100 мб.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://ploshadka.net/uncaught-in-promise-domexception-quota-exceeded/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
