1

I am trying to make a background-sync request with WorkBox, in a very simple example application with Vue. I revised my codes for a long time but I did not find the solution, or maybe, something is wrong in my code.

The service worker is well registered and when I make the ajax request, background-sync is activated.

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,
            }
          }
        }
      }]
    }
  }
}

These are screenshots from the DevTools when the events are fired.

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

Can anybody help me? I look for that but I didn´t find anything...

Thanks!

asiermusa
  • 160
  • 1
  • 9

1 Answers1

0

If you have a GET call to cache, as your code snippet suggests, then you do not need a background sync. You just need a construct of runtimecaching with the right handler and url pattern to get GET calls cached. You shall need background sync for POST/PUT/DELETE calls.

Aashish Singla
  • 53
  • 1
  • 6
  • Are you sure? I used background sync in JS plain projects with GET calls without problem. Imagine you have a GET call and internet connection fails. What do you suggest? If you need to recover the last GET petition, you need some background sync config, I think... thanks – asiermusa Dec 11 '18 at 13:47
  • Background sync is primarily for the data that user wants to send to the server but since the connection is down, he has to maintain it somewhere till the time, connection is back and you can now synchronize. For GET Calls, it is about caching the response that you got from the server and use the same response in next GET call. There is no syncing up that you need to do here. I hope, that clarifies? – Aashish Singla Dec 13 '18 at 05:13
  • Yes, I understand you...but what do you suggest to do? how can I fire the GET event where connection is back again? – asiermusa Dec 14 '18 at 07:11
  • I guess you can try to push a GET call into the IndexedDB queue as well but why don't you serve the GET command through cache and why do you want to wait till the connection? Is there a scenario where you have not yet cached all the GET calls and thats where you are considering this? – Aashish Singla Dec 23 '18 at 14:02
  • There are different scenarios, of course! In a PWA, if you are without connection and you try to make a GET petition...why wont use a background sync?? I cannnot understand... Sometimes GET petitions are not cacheeed because they have with different parameters. Or the values to check in the server are changing in one form. Of course I have not pre-cacheed all GET calls. – asiermusa Dec 26 '18 at 11:01
  • Yes, in that case - GET would need to have background sync and I agree. Just that UI shall need to notify user accordingly since for GET, user expects UI to return the response asap. I shall try a Get in my code and will revert with my observations. Thanks for your clarifications. – Aashish Singla Dec 30 '18 at 10:15
  • Ok thank you!! I will apreciate it!! lets see my code: The search method doesn't know how many users will be requested. So I need something to that scenario. Thanks!! – asiermusa Dec 31 '18 at 11:06