Фоновая синхронизация с Workbox в Vue - PullRequest
Новая
       30

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

0 голосов
/ 15 ноября 2018

Я пытаюсь сделать запрос фоновой синхронизации с 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 при запуске событий.

Когда сеть отключена, я получаю эти ошибки в консоли. Я не уверен, нормально ли это, если фоновая синхронизация работает хорошо ...

Фоновая синхронизация зарегистрирована на вкладке indexDB

Наконец, вкладка сети. Там мы видим, что вызов API хорош, потому что когда сеть возвращается, он делает вызов, но в приложении ничего не происходит, и старые данные не заменяются новыми: /

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

Спасибо!

1 Ответ

0 голосов
/ 30 ноября 2018

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

...