dsw

<!DOCTYPE html> <html> <head> <title>config-example.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <ul class="sections"> <li id="title"> <div class="annotation"> <h1>config-example.js</h1> </div> </li> <li id="section-1"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-1">¶</a> </div> </div> <div class="content"><div class='highlight'><pre>{</pre></div></div> </li> <li id="section-2"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-2">¶</a> </div> <p>This is the <strong>version</strong> of your cached configuration. In case you want to reload it, some change must be done in this file, if not in the content itself, at least, in the version number. This number is also used to name your cached files.</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"dswVersion"</span>: <span class="hljs-number">2.2</span>,</pre></div></div> </li> <li id="section-3"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-3">¶</a> </div> <p>Will force previous service workers to stop, and replace them for the newer one otherwise, your new service worker configuration will only take place when the current service worker experes (the next reload, or about a day)</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"applyImmediately"</span>: <span class="hljs-literal">true</span>,</pre></div></div> </li> <li id="section-4"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-4">¶</a> </div> <p>Here is where you will add all of your rules. You can create as many as you want, and name them as you will.</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"dswRules"</span>: {</pre></div></div> </li> <li id="section-5"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-5">¶</a> </div> <p>You may name your rules here this rule will redirect every not found image (or with error) to a default image</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"imageNotFound"</span>: {</pre></div></div> </li> <li id="section-6"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-6">¶</a> </div> <p>everything that matches a status like 404 or 500 and is an image (in the given extensions)</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"match"</span>: { <span class="hljs-string">"status"</span>: [<span class="hljs-number">404</span>, <span class="hljs-number">500</span>], <span class="hljs-string">"extension"</span>: [<span class="hljs-string">"jpg"</span>, <span class="hljs-string">"gif"</span>, <span class="hljs-string">"png"</span>, <span class="hljs-string">"jpeg"</span>, <span class="hljs-string">"webp"</span>] }, <span class="hljs-string">"apply"</span>: {</pre></div></div> </li> <li id="section-7"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-7">¶</a> </div> <p>will actually become a default 404 image</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"fetch"</span>: <span class="hljs-string">"/images/public/404.jpg"</span> } },</pre></div></div> </li> <li id="section-8"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-8">¶</a> </div> <p>This other example redirects pages that are not found</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"pageNotFound"</span>: {</pre></div></div> </li> <li id="section-9"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-9">¶</a> </div> <p>Any requisition that has a 404 status (including css, js, etc)</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"match"</span>: { <span class="hljs-string">"status"</span>: [<span class="hljs-number">404</span>] }, <span class="hljs-string">"apply"</span>: {</pre></div></div> </li> <li id="section-10"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-10">¶</a> </div> <p>will receive our default 404 page</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"fetch"</span>: <span class="hljs-string">"/404.html"</span> } },</pre></div></div> </li> <li id="section-11"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-11">¶</a> </div> <p>Redirecting requests</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"redirectOlderPage"</span>: { <span class="hljs-string">"match"</span>: {</pre></div></div> </li> <li id="section-12"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-12">¶</a> </div> <p>In this example, everything inside this directory should be redirected</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"path"</span>: <span class="hljs-string">"\/legacy-images\/.*"</span> }, <span class="hljs-string">"apply"</span>: {</pre></div></div> </li> <li id="section-13"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-13">¶</a> </div> <p>we simply fetch the different content we could also use the “redirect” action here, it would work as the same, but with a 302 status header</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"fetch"</span>: <span class="hljs-string">"/images/public/gizmo.jpg"</span> } },</pre></div></div> </li> <li id="section-14"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-14">¶</a> </div> <p>Some times, we want something NOT to be cached. In the following examples, we will cache EVERY image. That’s why we are defining here one exception.</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"imageNotCached"</span>: {</pre></div></div> </li> <li id="section-15"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-15">¶</a> </div> <p>the image named “not-cached” will</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"match"</span>: { <span class="hljs-string">"path"</span>: <span class="hljs-string">"\/images\/not-cached"</span> }, <span class="hljs-string">"apply"</span>: {</pre></div></div> </li> <li id="section-16"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-16">¶</a> </div> <p>not be cached…ever!</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"cache"</span>: <span class="hljs-literal">false</span> } },</pre></div></div> </li> <li id="section-17"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-17">¶</a> </div> <p>Now, let’s create a cache for every single image (except the one before)</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"images"</span>: {</pre></div></div> </li> <li id="section-18"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-18">¶</a> </div> <p>Everything that matches the right extensions (and has a status different than 404 or 500, once we already defined rules for those)</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"match"</span>: { <span class="hljs-string">"extension"</span>: [<span class="hljs-string">"jpg"</span>, <span class="hljs-string">"gif"</span>, <span class="hljs-string">"png"</span>, <span class="hljs-string">"jpeg"</span>, <span class="hljs-string">"webp"</span>] }, <span class="hljs-string">"apply"</span>: { <span class="hljs-string">"cache"</span>: {</pre></div></div> </li> <li id="section-19"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-19">¶</a> </div> <p>will be cached at “cached-images::1”</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"name"</span>: <span class="hljs-string">"cached-images"</span>,</pre></div></div> </li> <li id="section-20"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-20">¶</a> </div> <p>If you don’t specify the version, it uses the value in dswVersion</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"version"</span>: <span class="hljs-string">"1"</span> } } },</pre></div></div> </li> <li id="section-21"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-21">¶</a> </div> <p>let’s cache our static files</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"statics"</span>: {</pre></div></div> </li> <li id="section-22"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-22">¶</a> </div> <p>all of our scripts and styles will be cached (once they don’t meet the prefious criteria of 404 status)</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"match"</span>: { <span class="hljs-string">"extension"</span>: [<span class="hljs-string">"js"</span>, <span class="hljs-string">"css"</span>] }, <span class="hljs-string">"apply"</span>: { <span class="hljs-string">"cache"</span>: { <span class="hljs-string">"name"</span>: <span class="hljs-string">"static-files"</span>, <span class="hljs-string">"version"</span>: <span class="hljs-string">"1"</span> } } }, <span class="hljs-string">"userData"</span>: { <span class="hljs-string">"match"</span>: { <span class="hljs-string">"path"</span>: <span class="hljs-string">"\/api\/user\/.*"</span> },</pre></div></div> </li> <li id="section-23"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-23">¶</a> </div> <p>Here, we are telling the browser to send cookies and session credentions when fetching this You can pass any options accepted by fetch, here</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"options"</span>: { <span class="hljs-string">"credentials"</span>: <span class="hljs-string">"same-origin"</span>}, <span class="hljs-string">"apply"</span>: { <span class="hljs-string">"indexedDB"</span>: { <span class="hljs-string">"name"</span>: <span class="hljs-string">"userData"</span>, <span class="hljs-string">"version"</span>: <span class="hljs-string">"1"</span>, <span class="hljs-string">"indexes"</span>: [<span class="hljs-string">"name"</span>] } } }, <span class="hljs-string">"updates"</span>: { <span class="hljs-string">"match"</span>: { <span class="hljs-string">"path"</span>: <span class="hljs-string">"\/api\/updates/"</span> }, <span class="hljs-string">"keepItWarm"</span>: <span class="hljs-literal">true</span>, <span class="hljs-string">"apply"</span>: { <span class="hljs-string">"indexedDB"</span>: { <span class="hljs-string">"name"</span>: <span class="hljs-string">"shownUpdates"</span>, <span class="hljs-string">"version"</span>: <span class="hljs-string">"1"</span> } } }, <span class="hljs-string">"articles"</span>: { <span class="hljs-string">"match"</span>: { <span class="hljs-string">"path"</span>: <span class="hljs-string">"\/api\/updates/"</span> }, <span class="hljs-string">"apply"</span>: { <span class="hljs-string">"cache"</span>: { <span class="hljs-string">"name"</span>: <span class="hljs-string">"cachedArticles"</span>, <span class="hljs-string">"version"</span>: <span class="hljs-string">"1"</span> } } }, <span class="hljs-string">"events"</span>: { <span class="hljs-string">"match"</span>: { <span class="hljs-string">"path"</span>: <span class="hljs-string">"\/api\/events/"</span> }, <span class="hljs-string">"apply"</span>: { <span class="hljs-string">"indexedDB"</span>: { <span class="hljs-string">"name"</span>: <span class="hljs-string">"eventsList"</span>, <span class="hljs-string">"version"</span>: <span class="hljs-string">"1"</span> } } }, <span class="hljs-string">"lineup"</span>: { <span class="hljs-string">"match"</span>: { <span class="hljs-string">"path"</span>: <span class="hljs-string">"\/api\/events\/(.*)/"</span> }, <span class="hljs-string">"apply"</span>: { <span class="hljs-string">"indexedDB"</span>: { <span class="hljs-string">"name"</span>: <span class="hljs-string">"eventLineup-$1"</span>, <span class="hljs-string">"version"</span>: <span class="hljs-string">"1"</span> } } } } }</pre></div></div> </li> </ul> </div> </body> </html>