New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Manually cache an url #807

Closed
hrasoa opened this Issue Sep 17, 2017 · 7 comments

Comments

Projects
None yet
6 participants
@hrasoa

hrasoa commented Sep 17, 2017

Library Affected:
workbox-sw

Browser & Platform:
"all browsers".

Issue or Feature Request Description:

In sw-toolbox, I was able to manually cache any url like this:

Inside the sw.js:

self.addEventListener('message', function(event) {
   if (event.data && event.data.action === 'navigate') {
     caches.open(cacheName).then(function(cache) {
       var req = new Request(event.data.url);
       toolbox.cache(req.url);
     });
   }
 });

Then I could call anywhere:

navigator.serviceWorker.controller.postMessage({ action: 'navigate', url: '/about' });

Now using this example: https://workboxjs.org/examples/workbox-sw/ is there a way to do the same ?

@hrasoa hrasoa changed the title from Manually cache to Manually cache an url Sep 17, 2017

@hrasoa

This comment has been minimized.

Show comment
Hide comment
@hrasoa

hrasoa Sep 17, 2017

Ok I found:

importScripts('https://unpkg.com/workbox-runtime-caching@0.0.2/build/importScripts/workbox-runtime-caching.dev.v0.0.2.js');

...

const custom = new workbox.runtimeCaching.RequestWrapper();
self.addEventListener('message', function(event) {
  if (event.data && event.data.action === 'navigate') {
    custom.fetchAndCache({ request: new Request(event.data.url) });
  }
});

hrasoa commented Sep 17, 2017

Ok I found:

importScripts('https://unpkg.com/workbox-runtime-caching@0.0.2/build/importScripts/workbox-runtime-caching.dev.v0.0.2.js');

...

const custom = new workbox.runtimeCaching.RequestWrapper();
self.addEventListener('message', function(event) {
  if (event.data && event.data.action === 'navigate') {
    custom.fetchAndCache({ request: new Request(event.data.url) });
  }
});

@hrasoa hrasoa closed this Sep 17, 2017

@ogix

This comment has been minimized.

Show comment
Hide comment
@ogix

ogix Feb 24, 2018

The solution does not work in 3.0.0-beta

ogix commented Feb 24, 2018

The solution does not work in 3.0.0-beta

@jeffposnick

This comment has been minimized.

Show comment
Hide comment
@jeffposnick

jeffposnick Feb 27, 2018

Collaborator

In general, you can use the Cache Storage API directly to accomplish this. The one Workbox-specific wrinkle is that you might want to get the name of the default runtime cache that Workbox uses when you don't specify your own cache name. You can get this in v3 via workbox.core.cacheNames.runtime.

So the equivalent to #807 (comment) is:

self.addEventListener('message', event => {
   if (event.data && event.data.action === 'navigate') {
     // Just use the Cache Storage API directly,
     // and add to the default runtime cache:
     caches.open(workbox.core.cacheNames.runtime)
       .then(cache => cache.add(event.data.url));
   }
 });

We've got some info about this in the v3 preview docs at https://developers.google.com/web/tools/workbox/guides/configure-workbox#configure_cache_names

Collaborator

jeffposnick commented Feb 27, 2018

In general, you can use the Cache Storage API directly to accomplish this. The one Workbox-specific wrinkle is that you might want to get the name of the default runtime cache that Workbox uses when you don't specify your own cache name. You can get this in v3 via workbox.core.cacheNames.runtime.

So the equivalent to #807 (comment) is:

self.addEventListener('message', event => {
   if (event.data && event.data.action === 'navigate') {
     // Just use the Cache Storage API directly,
     // and add to the default runtime cache:
     caches.open(workbox.core.cacheNames.runtime)
       .then(cache => cache.add(event.data.url));
   }
 });

We've got some info about this in the v3 preview docs at https://developers.google.com/web/tools/workbox/guides/configure-workbox#configure_cache_names

@gauntface gauntface reopened this Mar 6, 2018

@gauntface

This comment has been minimized.

Show comment
Hide comment
@gauntface

gauntface Mar 6, 2018

Collaborator

Let's add this to V3 docs.

Collaborator

gauntface commented Mar 6, 2018

Let's add this to V3 docs.

@gerhardsletten

This comment has been minimized.

Show comment
Hide comment
@gerhardsletten

gerhardsletten Mar 6, 2018

Yes, it would be nice to have a public method for this, because initial resources loaded while web-worker is installing will not be added to the runtime cache before the second visit, so there is a need to send path for the landing-page and its page-specific assets manually into runtime-caching if you would like to offer them offline on next visit

gerhardsletten commented Mar 6, 2018

Yes, it would be nice to have a public method for this, because initial resources loaded while web-worker is installing will not be added to the runtime cache before the second visit, so there is a need to send path for the landing-page and its page-specific assets manually into runtime-caching if you would like to offer them offline on next visit

@hanford

This comment has been minimized.

Show comment
Hide comment
@hanford

hanford Mar 7, 2018

@gerhardsletten if support lands I can immediately add to next-offline 🔥

hanford commented Mar 7, 2018

@gerhardsletten if support lands I can immediately add to next-offline 🔥

@jeffposnick

This comment has been minimized.

Show comment
Hide comment
@jeffposnick
Collaborator

jeffposnick commented May 22, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment