vue.js - Vue のワークボックスとのバックグラウンド同期

Question

Vue を使用した非常に単純なサンプル アプリケーションで、WorkBox を使用してバックグラウンド同期要求を作成しようとしています。長い間コードを修正しましたが、解決策が見つかりませんでした。または、コードに何か問題がある可能性があります。

サービスワーカーは適切に登録されており、ajax リクエストを行うと、バックグラウンド同期がアクティブになります。

VUE

<template>
  <div class="users">
    <h1>USERS</h1>
    <input type="text" v-model="qty" placeholder="How many users to find">
    <button @click.prevent="search()">How many users would you like to find?</button>
    <ul>
      <li v-for="user in users">
        {{user.email}}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data(){
    return {
      users: null,
      qty: 10
    }
  },
  methods:{
    search(){
      axios.get('https://randomuser.me/api', {
        params: {
          results: this.qty
        }
      })
      .then(response => {
        console.log(response);
        this.users = response.data.results
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

VUE.CONFIG.JS

module.exports = {
  // ...other vue-cli plugin options...
  pwa: {
    name: 'My App',
    themeColor: '#4DBA87',
    msTileColor: '#000000',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black',

    workboxPluginMode: 'GenerateSW',
    workboxOptions: {
      runtimeCaching: [{
        urlPattern: new RegExp('https://randomuser.me/api'),
        handler: 'networkOnly',
        options: {
          //background sync. conf
          backgroundSync: {
            name: 'my-queue-asier',
            options: {
              maxRetentionTime: 60 * 60,
            }
          }
        }
      }]
    }
  }
}

これらは、イベントが発生したときの DevTools のスクリーンショットです。

ネットワークが切断されると、コンソールにこのエラーが表示されます。バックグラウンド同期が正常に機能するかどうかはわかりません...

background-sync は indexDB タブに登録されます

最後にネットワークタブ。ここで、ネットワークが戻ったときに呼び出しを行うため、API 呼び出しが適切であることがわかりますが、アプリでは他に何も起こらず、古いデータは新しいデータに置き換えられません:/

誰でも私を助けることができますか？私はそれを探しますが、何も見つかりませんでした...

ありがとう！