title: Configuring service worker in Polymer 2.X
body: <p>I need to configure the service worker for the first tine, and I am totally lost.
  I have a very standard Polymer 2 application with the following <code>polymer.json</code> file:</p>
  
  <pre><code>{
    "entrypoint": "index.html",
    "shell": "src/my-app.html",
    "autoBasePath": true,
    "fragments": [
      "src/my-page-stats.html",
       ...
      "src/my-page-404.html"
    ],
    "sources": [
      "images/**/*",
      "src/**/*",
      "libs/**/*"
    ],
    "extraDependencies": [
      "bower_components/webcomponentsjs/*.js",
      "!bower_components/webcomponentsjs/gulpfile.js",
      "manifest.json",
      "src/lib/Utils.js"
    ],
    "lint": {
      "rules": [
        "polymer-2"
      ]
    },
    "builds": [
      {
        "preset": "es5-bundled"
      },
      {
        "preset": "es6-bundled"
      },
      {
        "preset": "es6-unbundled"
      }
    ],
    "lint": {
      "rules": [
        "polymer-2"
      ],
      "ignoreWarnings": [
        "invalid-polymer-expression"
      ]
    }
  }
  </code></pre>
  
  <p>The <code>libs</code> directory contains a bunch of sym links:</p>
  
  <pre><code>total 12
  Sortable.js -&gt; ../bower_components/Sortable/Sortable.js
  datalist-polyfill.min.js -&gt; ../../node_modules/datalist-polyfill/datalist-polyfill.min.js
  ejs.js -&gt; ../../node_modules/ejs/ejs.js
  ejs.min.js -&gt; ../../node_modules/ejs/ejs.min.js
  leaflet -&gt; ../../node_modules/leaflet/dist/
  moment-precise-range.js -&gt; ../../node_modules/moment-precise-range-plugin/moment-precise-range.js
  moment-timezone-with-data.js -&gt; ../../node_modules/moment-timezone/builds/moment-timezone-with-data-2012-2022.js
  moment.js -&gt; ../../node_modules/moment/moment.js
  </code></pre>
  
  <p>Now, I am having several problems with the service worker, and I can't figure out what to do:</p>
  
  <ul>
  <li><p>The <code>libs</code> folder is not getting cached. If the network is down, the browser will attempt to load all of the files in <code>libs</code>. I thought it would since under <code>sources</code> in my <code>polymer.json</code> I have  <code>"libs/**/*"</code> I wonder if them being links is a problem?</p></li>
  <li><p>The route <code>routes/appInfo.js</code> <em>must</em> get cached, and it doesn't right now. It's a dynamic Javascript file that sets a global variable, used throughout the application. It doesn't get cached because it;s not mentioned anywhere as a "special" file, but... it is.</p></li>
  <li><p>The route <code>/routes/passwordRecover/**</code> must be ignored by the service worker. The problem right now is that if a user requests a password recovery token, and they have already loaded the site before, the request gets handled by the service worker which redirects them straight to the default index.html. So, the reset never actually happens.</p></li>
  </ul>
  
  <p>The problem here is that I am not even sure what files to change. I looked at the <a href="https://www.polymer-project.org/2.0/toolbox/service-worker" rel="nofollow noreferrer">officual documentation for service worker in Polymer 2.0</a> but I still have questions.</p>
  
  <p>For example:</p>
  
  <ul>
  <li><p>If I specify <code>--sw-precache-config config-file.json</code>, I have to write a config file on my own <code>from scratch</code>. Is there a way to see the default "starting point" at least, so that I don't make silly mistakes?</p></li>
  <li><p>How do I force specific URLs to be cached (see <code>routes/appInfo.js</code>), how do I prevent others from being cached (see <code>/routes/passwordRecover/**</code>) and how do I check why <code>libs/**</code> are not being cached?</p></li>
  </ul>