Proper way to deal with locale-based resources

[humphd]

I've got a few patches I'm trying to write that relate to using sw-precache and being intelligent about which strings to cache along with other static resources. For example, just saying dist/**/* would include all strings for all languages. Or in other cases, I have URL based resources that I want to cache, which are prefixed with locale or lang info, pt-BR/index.html vs. en-US/index.html.

What do you suggest for dealing with the l10n case when using sw-precache? Is there a sample somewhere that shows what you'd do in various cases, or could we write some docs here that provide some tips?

Thanks for any help.

[jeffposnick]

This is an important area, but not something that we've developed specific guidance for, unfortunately.

My general recommendation would be to avoid listing any locale-specific resources in your staticFileGlobs, and instead rely on runtimeCaching along with a strategy like fastest (i.e. stale-while-revalidate) to serve the resources that do get cached.

This is somewhat related to the concepts from https://github.com/GoogleChrome/sw-precache/issues/145, in that ideally we'd let developers specify an "optional" bundle of versioned resources that might get cached at some point after service worker installation.

[humphd]

@jeffposnick this is really helpful, thank you. It would be worth mentioning this case in your docs, even if only so that searching for l10n, etc. with regard to this lands one on the runtimeCaching section of the README.

[radiofrequency]

I have a different app shell per language that is given to the client depending on a cookie or accepts header. When a user changes the language, i delete the serviceworker cache for the app shell, set the new cookie and reload the page. For users without service worker, just set cookie and reload.

Here is the service worker message handler:

service-worker.tmpl

self.addEventListener('message', function(event) {
    if (event.data === "deletecache") {
      caches.delete(cacheName,{}).then(function(done) {
        event.ports[0].postMessage({
            action: "reload",
        });
      });
    }