背景与Vue中的工作箱同步-Java 学习之路

我试图用一个非常简单的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的屏幕截图 .

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 :/

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

谢谢！

1 回答

0

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

回复于 2024-04-28T02:50:31+08:00

背景与Vue中的工作箱同步

1 回答

相关问题