Boo! TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.

[Adam Zerner]

I'm having trouble getting vue-offline-preloader to work for me. When I load localhost:8080 I get the following error in my console: Boo! TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script..

I think I followed the directions in the README properly. I ran npm install vue-offline-preloader --save. My package.json and package-lock.json files reflect vue-offline-preloader having been successfully installed, as well as node_modules.

I ran ln -s ./node_modules/vue-offline-preloader/src/worker.js worker.js from ~/code/premium-poker-tools, the root of my project. worker.js seems to have been successfully symlinked.

I added the vue-offline-preloader component to App.vue:

<template>
  <div id="app" v-on:mouseup="setClickContextToNull()">
    <navbar
      v-on:saveScenario="expandSaveScenarioModal()"
      v-on:loadScenario="expandLoadScenarioModal()"
    ></navbar>
    <div class="container">
      <router-view></router-view>
    </div>
    <save-scenario-modal></save-scenario-modal>
    <load-scenario-modal
      v-bind:equityCalculatorScenarios="$store.state.equityCalculator.savedScenarios"
      v-bind:outcomeAnalyzerScenarios="$store.state.outcomeAnalyzer.savedScenarios"
    ></load-scenario-modal>
    <vue-offline-preloader
      v-bind:assets="[
        '/',
        'static/logo.png',
        'static/favicon.png'
      ]"
    ></vue-offline-preloader>
  </div>
</div>
</template>

<script>
  import Navbar from '@/components/navbar';
  import SaveScenarioModal from '@/components/scenarios/save-scenario-modal';
  import LoadScenarioModal from '@/components/scenarios/load-scenario-modal';
  import store from '@/store';
  import utilities from '@/services/utilities/utilities';
  import VueOfflinePreloader from 'vue-offline-preloader';

  export default {
    name: 'app',
    components: {
      'navbar': Navbar,
      'save-scenario-modal': SaveScenarioModal,
      'load-scenario-modal': LoadScenarioModal,
      'vue-offline-preloader': VueOfflinePreloader,
    },
    methods: {
      setClickContextToNull: function () {
        this.$store.commit('equityCalculator/setClickContextsToNull');
        this.$store.commit('outcomeAnalyzer/setClickContextsToNull');
      },
      expandSaveScenarioModal: function () {
        $('#save-scenario-modal').modal();
      },
      expandLoadScenarioModal: function () {
        $('#load-scenario-modal').modal();
      },
    },
    created: function () {
      utilities.hands.makeTweaksBasedOnHandRankings(store.state.settings, store.state.equityCalculator.players, store.state.outcomeAnalyzer.players);
    },
  };
</script>

<style lang="scss">
  $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
  $font-size-base: 12px;
  $container-large-desktop: 100%;
  @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
  @import "src/assets/app";
</style>

I started off only including a few assets. I'm confused about how the assets part works. Do I need index.html (I did try adding it, but that didn't help)? Everything in my static folder? Can I include the whole static folder by including the string static, or do I need to individually copy each file?

I'm also confused about development versus production. The file paths would be different for me, so I assume I need to include different paths for development versus production, right?

[Adam Zerner]

I ended up going through Udacity's Offline Web Applications course yesterday. I got my app working using native Service Worker code rather than vue-offline-preloader.

I think I know what went wrong when I tried using vue-offline-preloader. The main issue is that my server code wasn't responding with the worker.js file. I didn't really have a handle of what was going on, and it isn't explicitly mentioned in the README. I now understand that navigator.serviceWorker.register('/worker.js') is probably in the vue-offline-preloader code somewhere, and that that code sends a GET /worker.js request out to the server. With my server responding to that request with a 404, I got the Boo! TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script. error.

I'm confused about how the assets part works.

I now understand that the stuff in the assets array are paths to GET requests that you want to be cached and then loaded from the cache when offline.

Do I need index.html?

Not unless you make a GET /index.html request. If you're making a GET / request and responding with the index.html file, you just need / in your assets array.

Everything in my static folder?

Anything that you want to cache to be viewed offline, yes.

Can I include the whole static folder by including the string static, or do I need to individually copy each file?

As far as I'm aware, you need to copy each file individually.

I'm also confused about development versus production. The file paths would be different for me, so I assume I need to include different paths for development versus production, right?

Correct. The file paths may be different, so you need to handle that.

---

If any of this is wrong, please correct me.