PWAのWebアプリをいつでも最新の状態にしたいです

Vue.jsで作成したPWAのWebアプリがあるのですが、キャッシュのせいで更新が効きません。
そこでボタンを押すと手動で更新できるようにしたいと思い以下のサイトを参考にコードを書いてみたのですが、service workerをあまり理解できていないため上手くいきませんでした。

https://blog.htmlhifive.com/2018/08/27/pwa-cache-update/

ボタンで実装しなくても良いのでユーザーがPWAのアプリを簡単に最新の状態で使用できるようにしたいです。どのようにしたら良いでしょうか..?

/* registerServiceWorker.js */

import { register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready () {
      console.log(
        'App is being served from cache by a service worker.\n' +
        'For more details, visit https://goo.gl/AFskqB'
      )
    },
    registered () {
      console.log('Service worker has been registered.')

      if ('serviceWorker' in navigator) {
        navigator.serviceWorker
          .register('/serviceworker.js')
          .then(registration => {
            // 登録成功
            registration.onupdatefound = function() {
              console.log('アップデートがあります！');
              registration.update();
            }
          })
          .catch(err => {
            // 登録失敗
            console.log(err);
        });
      }


    },
    cached () {
      console.log('Content has been cached for offline use.')
    },
    updatefound () {
      console.log('New content is downloading.')
    },
    updated () {
      console.log('New content is available; please refresh.')
    },
    offline () {
      console.log('No internet connection found. App is running in offline mode.')
    },
    error (error) {
      console.error('Error during service worker registration:', error)
    }
  })
}

/* setting.vue */

<template>
  <v-btn @click="appUpdate">
    アプリを最新の状態にアップデート
  </v-btn>
</template>

<script>

export default {

    appUpdate(){

      navigator.serviceWorker.getRegistration()
        .then(registration => {
          registration.unregister();
        })
        
      const channel = new MessageChannel();
      navigator.serviceWorker.controller
        .postMessage('update', [channel.port2]);        

      var urlsToCache = [
        '/',
        '/bower_components/jquery/dist/jquery.min.js',
        '/bower_components/hifive/h5.js',
        '/bower_components/hifive/h5.css',
        '/bower_components/hifive/ejs-h5mod.js',
        '/ncmb.min.js',
        '/app.js'
      ];

      self.addEventListener('install', function(event) {
        return install(event);
      });

      self.addEventListener('message', function(event) {
        return install(event);
      });

      var CACHE_NAME = 'my-site-cache-v1';

      const install = (event) => {
        return event.waitUntil(
          caches.open(CACHE_NAME)
            .then(function(cache) {
              urlsToCache.map(url => {
                return fetch(new Request(url)).then(response => {
                  return cache.put(url, response);
                });
              })
            })
            .catch(function(err) {
              console.log(err);
            })
        );
      }
    }
  },
}
</script>