Фоновая синхронизация с Workbox в Vue

Question

Я пытаюсь сделать запрос синхронизации в фоновом режиме с WorkBox, в очень простом примере приложения с Vue. Я долго пересматривал свои коды, но я не нашел решения, или, возможно, что-то не так в моем коде.

Работник сервиса хорошо зарегистрирован, и когда я делаю 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 хорош, потому что когда сеть возвращается, он делает вызов, но в приложении ничего не происходит, и старые данные не заменяются новыми:/

Кто-нибудь может мне помочь? Я ищу это, но ничего не нашел...

Спасибо!

Answer 1

Если у вас есть вызов GET для кэширования, как подсказывает ваш фрагмент кода, вам не нужна фоновая синхронизация. Вам просто нужна конструкция кэширования во время выполнения с правильным обработчиком и шаблоном URL для кэширования вызовов GET. Вам понадобится фоновая синхронизация для вызовов POST/PUT/DELETE.