在 Vue 中与 Workbox 进行后台同步

Question

我正在尝试使用 WorkBox 在一个非常简单的 Vue 示例应用程序中发出后台同步请求。我修改了很长时间的代码，但我没有找到解决方案，或者我的代码有问题。

Service Worker 注册良好，当我发出 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 的屏幕截图。

When the network is disconnected I receive this errors in the console. I am not sure if is it normal if background sync works well...

background-sync is registered in indexDB tab

Finally the network tab. There we see that the API call is well, because when the network returns it makes the call, but nothing else happens in the app, and the old data is not replaced by the new one :/

有人可以帮我吗？我正在寻找，但我没有找到任何东西......

谢谢！

Answer 1

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