1

我正在尝试在一个非常简单的 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 调用很好，因为当网络返回时，它会进行调用，但应用程序中没有其他任何事情发生，并且旧数据不会被新数据替换：/

有谁能够帮我？我在找那个，但我没有找到任何东西......

谢谢！

4

1 回答 1

0

如果您有一个 GET 调用缓存，如您的代码片段所示，那么您不需要后台同步。您只需要使用正确的处理程序和 url 模式构建运行时缓存来缓存 GET 调用。POST/PUT/DELETE 调用需要后台同步。

于 2018-11-30T08:28:42.547 回答