How to cache external api requests

[lukemarsh]

Hey,

what options do I need to set to cache external api requests?

In my application I'm making requests to the github api and I can't find any settings to cache these requests

Any help would be really appreciated!

[NekR]

Hi @lukemarsh.

There is no way at moment, because it's just not implemented yet. Here is the issue for that: https://github.com/NekR/offline-plugin/issues/26

[lukemarsh]

Thanks @NekR. Do you know when you will be looking into this?

[NekR]

I am not sure yet. It's kind of complex and has to be done right.

Meanwhile, you can write a bit of ServiceWorker by yourself to support it.

// config

new OfflinePlugin({
  ServiceWorker: {
   // Entry in your project, will be included into SW file
    entry: './sw-handler.js'
  }
})

// sw-handler.js

self.addEventListener('fetch', function(event) {
  if (event.request.url.match(IS_GITHUB_REGEXP)) {
    // cache it here in separate cache
  }
});

[lukemarsh]

Thanks for getting back to me :)

I have set that up but the fetch event isn't being called. Have you got an example of this working?

cheers

[NekR]

@lukemarsh it supposed to work, I'll check tomorrow. Thanks for reporting.

[NekR]

@lukemarsh it works for me. It isn't called for URLs generated from webpack, but called for everything else.

[lukemarsh]

Thanks. Can you show me an example?

[NekR]

It's few comments above: https://github.com/NekR/offline-plugin/issues/64#issuecomment-223949743

[lukemarsh]

I saw that but the fetch event is never being called

[NekR]

Again. It works for me and for other people. We can continue this conversation forever. I don't know what you in you project and you don't show anything to help me figure it out. On Jun 14, 2016 11:49 AM, "Luke Marsh" [email protected] wrote:

I saw that but the fetch event is never being called

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/NekR/offline-plugin/issues/64#issuecomment-225818561, or mute the thread https://github.com/notifications/unsubscribe/ABIlkTZTSxT4eL0k5vNRI1AEbEPGCU0xks5qLmsbgaJpZM4IuvPO .

[lukemarsh]

Apologies - I think we may have our wires crossed.

This is my setup:

webpack config sw-handler

is this correct?

[NekR]

In general seems fine. But why you use scope property? Here https://github.com/lukemarsh/redux-boilerplate/blob/master/web/webpack/config.prod.js#L43 it's not needed because it's deprecated and you already use publicPath. Here https://github.com/lukemarsh/redux-boilerplate/blob/master/web/webpack/config.prod.js#L35 it sets scope for ServiceWorker, but I doubt that ./ is valid value for it.

Other thing is that you set publicPath: '/static/' which makes SW operate in a /static/ scope (cannot access urls like /). Problem is that at a moment, publicPath is also affects SW/AppCache output files so runtime expects SW to live on /static/sw.js in your case. See here and that whole issue for more details: https://github.com/NekR/offline-plugin/issues/65#issuecomment-225567708

Also why your sw-handler.js lived in dist folder? I don't know your project structure, but it seems weird because it will be bundled into sw,js anyway.

I think that you have to 1) remove all scope props; 2) put sw-handler.js in your src dir (if putting it to dist dir was a mistake); 3) set publicPath to /; 4) use rewrites option to as described in #65 until issue with publicPath isn't fixed.

Feel free to ask any questions.

[lukemarsh]

Thank you so much! Awesome :) I'm going to star this repo!

[NekR]

Here is possible API design for it: https://github.com/NekR/offline-plugin/issues/117

Can you take a look? Would you be okay with it?

[kizaonline]

Hi @NekR ,

Is there any update or new suggestions/advice in regards to this issue?

We are looking to use this library with our Angular SPA which calls our API on different host (setup for CORS) and would like to know if we should look into the adding the API to externals option and trying to get the configuration of preFetchRequest correct and working with our API