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>Add here, a list of files that should be cached during the installation of the webservice.</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"appShell"</span>: [],</pre></div></div> </li> <li id="section-5"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-5">¶</a> </div> <p>If this is set to true, every request for http:// will be redirected to https://</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"enforceSSL"</span>: <span class="hljs-literal">false</span>,</pre></div></div> </li> <li id="section-6"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-6">¶</a> </div> <p>Default is false, if changed to true, will NOT delete other caches otherwise, all caches but the current ones will be deleted on activation</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"keepUnusedCaches"</span>: <span class="hljs-literal">false</span>,</pre></div></div> </li> <li id="section-7"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-7">¶</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-8"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-8">¶</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-9"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-9">¶</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>: {</pre></div></div> </li> <li id="section-10"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-10">¶</a> </div> <p>We are looking for everything with a status 400 or 500</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"status"</span>: [<span class="hljs-number">404</span>, <span class="hljs-number">500</span>],</pre></div></div> </li> <li id="section-11"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-11">¶</a> </div> <p>AND with one of these extensions</p> </div> <div class="content"><div class='highlight'><pre> <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-12"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-12">¶</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-13"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-13">¶</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-14"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-14">¶</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-15"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-15">¶</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-16"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-16">¶</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-17"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-17">¶</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-18"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-18">¶</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-19"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-19">¶</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-20"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-20">¶</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-21"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-21">¶</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-22"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-22">¶</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-23"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-23">¶</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-24"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-24">¶</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-25"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-25">¶</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-26"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-26">¶</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-27"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-27">¶</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> } } },</pre></div></div> </li> <li id="section-28"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-28">¶</a> </div> <p>In this example, we are redirecting requests using variables from the matching regular expression</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"redirectWithVar"</span>: { <span class="hljs-string">"match"</span>: {</pre></div></div> </li> <li id="section-29"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-29">¶</a> </div> <p>We can use in our <em>apply</em> actions, the groups from this expression, between parenthesis</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"path"</span>: <span class="hljs-string">"\/old-site\/(.*)"</span> }, <span class="hljs-string">"apply"</span>: {</pre></div></div> </li> <li id="section-30"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-30">¶</a> </div> <p>here, each groups is represented by a variable, in order accessed as $x where x is the position of the variable in the matching expression</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"redirect"</span>: <span class="hljs-string">"/redirected.html?from=$1"</span> } },</pre></div></div> </li> <li id="section-31"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-31">¶</a> </div> <p>Lets cache everything that has html extension OR is at / Notice there we are using the OR here, instead of just the AND</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"static-html"</span>: { <span class="hljs-string">"match"</span>: [</pre></div></div> </li> <li id="section-32"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-32">¶</a> </div> <p>everything with the html or htm extension</p> </div> <div class="content"><div class='highlight'><pre> { <span class="hljs-string">"extension"</span>: [<span class="hljs-string">"html"</span>, <span class="hljs-string">"htm"</span>] },</pre></div></div> </li> <li id="section-33"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-33">¶</a> </div> <p>OR everything in /</p> </div> <div class="content"><div class='highlight'><pre> { <span class="hljs-string">"path"</span>: <span class="hljs-string">"\/$"</span> } ],</pre></div></div> </li> <li id="section-34"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-34">¶</a> </div> <p>The default strategy is ‘offline-first’ With the online-first strategy, it will ALWAYS go for the network and use it to update the cache. Cache will ONLY be used when the network fails.</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"strategy"</span>: <span class="hljs-string">"online-first"</span>, <span class="hljs-string">"apply"</span>: { <span class="hljs-string">"cache"</span>: { <span class="hljs-string">"name"</span>: <span class="hljs-string">"static-html-files"</span>, <span class="hljs-string">"version"</span>: <span class="hljs-string">"1"</span> } } },</pre></div></div> </li> <li id="section-35"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-35">¶</a> </div> <p>Let’s use IndexedDB to store some data</p> </div> <div class="content"><div class='highlight'><pre> <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-36"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-36">¶</a> </div> <p>We will try to keep it up to date. DSW will look for it online, and if not possible, then look in the cached object in IndexedDB.</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"strategy"</span>: <span class="hljs-string">"offline-first"</span>, <span class="hljs-string">"apply"</span>: { <span class="hljs-string">"indexedDB"</span>: {</pre></div></div> </li> <li id="section-37"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-37">¶</a> </div> <p>The IndexedDB name</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"name"</span>: <span class="hljs-string">"userData"</span>,</pre></div></div> </li> <li id="section-38"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-38">¶</a> </div> <p>The version of it. If you change it, your db will be updated.</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"version"</span>: <span class="hljs-string">"3"</span>,</pre></div></div> </li> <li id="section-39"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-39">¶</a> </div> <p>The <em>json</em> data we are expecting in this example gives us and id, and we will use it as our kay for the IndexedDB structure.</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"key"</span>: <span class="hljs-string">"id"</span>,</pre></div></div> </li> <li id="section-40"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-40">¶</a> </div> <p>but we will also define some indexes</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"indexes"</span>: [</pre></div></div> </li> <li id="section-41"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-41">¶</a> </div> <p>one of the indexes is the property “name”</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"name"</span>,</pre></div></div> </li> <li id="section-42"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-42">¶</a> </div> <p>the other index is the property “twitter”…</p> </div> <div class="content"><div class='highlight'><pre> { <span class="hljs-string">"name"</span>: <span class="hljs-string">"twitter"</span>, <span class="hljs-string">"path"</span>: <span class="hljs-string">"twitter"</span>,</pre></div></div> </li> <li id="section-43"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-43">¶</a> </div> <p>…but for this one, we want to specify that it is unique.</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"options"</span>: { <span class="hljs-string">"unique"</span>: <span class="hljs-literal">true</span> } } ] } } }, <span class="hljs-string">"dashbord"</span>: { <span class="hljs-string">"match"</span>: { <span class="hljs-string">"path"</span>: <span class="hljs-string">"\/api\/dashbord\/.*"</span> },</pre></div></div> </li> <li id="section-44"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-44">¶</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>},</pre></div></div> </li> <li id="section-45"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-45">¶</a> </div> <p>With the fastest strategy, both the network and cache will be verified. It means it will <em>always</em> start a new request, but also means that once it’s resolved, it will keep the cache up to date. If the data is in cache, it will use the cached data. It assures us that the fastest result will be used, but also, that it will keep the data up to date in the cache</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"strategy"</span>: <span class="hljs-string">"fastest"</span>, <span class="hljs-string">"apply"</span>: {</pre></div></div> </li> <li id="section-46"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-46">¶</a> </div> <p>indexedDB support is still under development…</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"indexedDB"</span>: { <span class="hljs-string">"name"</span>: <span class="hljs-string">"dashbord"</span>, <span class="hljs-string">"version"</span>: <span class="hljs-string">"1"</span>,</pre></div></div> </li> <li id="section-47"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-47">¶</a> </div> <p>we can specify indexes using only strings</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"indexes"</span>: [<span class="hljs-string">"name"</span>] } } } } }</pre></div></div> </li> </ul> </div> </body> </html>