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">"version"</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>DSW Also offers push notification support with a nice API for your clients and a powerful mechanism for notifications.</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"notification"</span>: {</pre></div></div> </li> <li id="section-8"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-8">¶</a> </div> <p>if true, will ask for notifications permission as soon as the SW gets registered</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"auto"</span>: <span class="hljs-literal">false</span>,</pre></div></div> </li> <li id="section-9"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-9">¶</a> </div> <p>For now, GCM is the only supported service for push notifications</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"service"</span>: <span class="hljs-string">"GCM"</span>,</pre></div></div> </li> <li id="section-10"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-10">¶</a> </div> <p>set here your project’s id in GCM</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"senderId"</span>: <span class="hljs-string">"your-project-id"</span>,</pre></div></div> </li> <li id="section-11"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-11">¶</a> </div> <p>when notified, where could DSW get information about title, body and icon for the notification</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"dataSrc"</span>: <span class="hljs-string">"http://where.to/get-your/notification-data"</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 case title, body and icon are not in the root path of the object received from dataSrc</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"dataPath"</span>: <span class="hljs-string">"notification"</span>,</pre></div></div> </li> <li id="section-13"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-13">¶</a> </div> <p>Target is used when the user clicks on the notification. It will then open a window with this source, or focus a tab, in case it is already opened</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"target"</span>: <span class="hljs-string">"/"</span> },</pre></div></div> </li> <li id="section-14"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-14">¶</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">"rules"</span>: {</pre></div></div> </li> <li id="section-15"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-15">¶</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-16"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-16">¶</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-17"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-17">¶</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-18"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-18">¶</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-19"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-19">¶</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-20"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-20">¶</a> </div> <p>In case a script is not found, it should not return the 404 html</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"scriptsNotFound"</span>: { <span class="hljs-string">"match"</span>: { <span class="hljs-string">"status"</span>: [<span class="hljs-number">404</span>], <span class="hljs-string">"extension"</span>: [<span class="hljs-string">"js"</span>] },</pre></div></div> </li> <li id="section-21"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-21">¶</a> </div> <p>instead, we simply output nothing</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"apply"</span>: { <span class="hljs-string">"output"</span>: <span class="hljs-string">""</span> } },</pre></div></div> </li> <li id="section-22"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-22">¶</a> </div> <p>You can also output a string right away</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"easterEgg"</span>: { <span class="hljs-string">"match"</span>: { <span class="hljs-string">"path"</span>: <span class="hljs-string">"/easter-egg"</span> }, <span class="hljs-string">"apply"</span>: {</pre></div></div> </li> <li id="section-23"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-23">¶</a> </div> <p>by using the output action (it accepts variables, as in other examples)</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"output"</span>: <span class="hljs-string">"You found an easter egg!!!"</span> } }</pre></div></div> </li> <li id="section-24"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-24">¶</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-25"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-25">¶</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-26"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-26">¶</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-27"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-27">¶</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-28"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-28">¶</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-29"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-29">¶</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-30"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-30">¶</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-31"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-31">¶</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-32"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-32">¶</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-33"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-33">¶</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-34"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-34">¶</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-35"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-35">¶</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-36"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-36">¶</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-37"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-37">¶</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-38"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-38">¶</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-39"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-39">¶</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-40"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-40">¶</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-41"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-41">¶</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-42"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-42">¶</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-43"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-43">¶</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-44"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-44">¶</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-45"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-45">¶</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-46"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-46">¶</a> </div> <p>we can also expire the cache</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"expires"</span>: <span class="hljs-string">"1h"</span> <span class="hljs-comment">// 1s, 1m, 1h, 1d, 1w, 1M, 1y</span> } } },</pre></div></div> </li> <li id="section-47"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-47">¶</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-48"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-48">¶</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-49"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-49">¶</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-50"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-50">¶</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-51"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-51">¶</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-52"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-52">¶</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-53"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-53">¶</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-54"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-54">¶</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-55"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-55">¶</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> } } ] } } },</pre></div></div> </li> <li id="section-56"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-56">¶</a> </div> <p>You can also bypass some requests</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"byPassable"</span>: { <span class="hljs-string">"match"</span>: { <span class="hljs-string">"path"</span>: <span class="hljs-string">"/bypass/"</span> }, <span class="hljs-string">"apply"</span>: {</pre></div></div> </li> <li id="section-57"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-57">¶</a> </div> <p>With the “request” value, it WILL perform the request, with no treatment. But the response will either be the response itself(in case of success) or an empty string(if failed)</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"bypass"</span>: <span class="hljs-string">"request"</span> } },</pre></div></div> </li> <li id="section-58"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-58">¶</a> </div> <p>When bypassing, you may also want to simply ignore some path</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"ignorable"</span>: {</pre></div></div> </li> <li id="section-59"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-59">¶</a> </div> <p>imagine you have an old path and that some legacy script, html or css is still trying to load resources from it</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">"/ignore/"</span> }, <span class="hljs-string">"apply"</span>: {</pre></div></div> </li> <li id="section-60"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-60">¶</a> </div> <p>by ignoring it, no network request will be started, and the output will be always a successful empty string</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"bypass"</span>: <span class="hljs-string">"ignore"</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-61"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-61">¶</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-62"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-62">¶</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-63"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-63">¶</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-64"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-64">¶</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> <li id="section-65"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-65">¶</a> </div> <p>You can preload bundles of files on demand. This means that you can load and cache a group of files when your user loads another page. For example, when the user loads the <em>kart page</em>, you can load and store the <em>purchase</em> scripts and styles, as they are probably going to need this later.</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"kartPageBundle"</span>: { <span class="hljs-string">"match"</span>: { <span class="hljs-string">"path"</span>: <span class="hljs-string">"/purchase-page/kart.html"</span> }, <span class="hljs-string">"apply"</span>: { <span class="hljs-string">"cache"</span>: { <span class="hljs-string">"name"</span>: <span class="hljs-string">"kart-page"</span>, <span class="hljs-string">"version"</span>: <span class="hljs-number">1</span> }, <span class="hljs-string">"bundle"</span>: {</pre></div></div> </li> <li id="section-66"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-66">¶</a> </div> <p><em>name</em> is optional and will be used in the cache name</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"name"</span>: <span class="hljs-string">"kart-bundle"</span>,</pre></div></div> </li> <li id="section-67"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-67">¶</a> </div> <p>as well as the <em>version</em>.</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"version"</span>: <span class="hljs-number">2</span>,</pre></div></div> </li> <li id="section-68"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-68">¶</a> </div> <p><em>files</em> is required, though, and contains the list of all files to be stored in cache as soon as the matching request starts.</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"files"</span>: [ <span class="hljs-string">"/purchase-page/purchase.js"</span>, <span class="hljs-string">"/purchase-page/purchase.html"</span> ],</pre></div></div> </li> <li id="section-69"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-69">¶</a> </div> <p>you may also set some expiring time for the bundle.</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-string">"expires"</span>: <span class="hljs-string">"1h"</span> } } } } }</pre></div></div> </li> </ul> </div> </body> </html>