How to cache everything but !route ? - Githubissues

goldhand / sw-precache-webpack-plugin

Webpack plugin that generates a service worker using sw-precache that will cache webpack's bundles' emitted assets. You can optionally pass sw-precache configuration options to webpack through this plugin.

MIT License

1.44k stars 104 forks source link

How to cache everything but !route ? #108

Closed jaspersorrio closed 7 years ago

jaspersorrio commented 7 years ago

Thanks for anybody looking into this support request! I'm using create-react-app for my front end. But i would also like to have a wordpress blog hosted on the same site.

I'm not sure how to cache everything but the wordpress blog living on /blog route. Should i be using dontCacheBustUrlsMatching?
If so how should I go around doing it? There are no examples on how to use it.

Thank you!

[ ] I'm submitting a support request

webpack version: 2.5.1

sw-precache-webpack-plugin version: 0.9.1

Please tell us about your environment: OSX 10.12.6

Browser: [Chrome]

Current behavior: On browsers with SW enabled. SW serves react app cache for request to https://mysite.com/blog.

Expected/desired behavior: I want it to load wordpress blog from server. Accessing https://mysite.com/blog on safari shows the intended blog.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem along with your:

Webpack configuration:

new SWPrecacheWebpackPlugin({
  // By default, a cache-busting query parameter is appended to requests
  // used to populate the caches, to ensure the responses are fresh.
  // If a URL is already hashed by Webpack, then there is no concern
  // about it being stale, and the cache-busting can be skipped.
  dontCacheBustUrlsMatching: /\.\w{8}\./,
  filename: 'service-worker.js',
  logger(message) {
    if (message.indexOf('Total precache size is') === 0) {
      // This message occurs for every build and is a bit too noisy.
      return;
    }
    console.log(message);
  },
  minify: true,
  // For unknown URLs, fallback to the index page
  navigateFallback: publicUrl + '/index.html',
  // Ignores URLs starting from /__ (useful for Firebase):
  // https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
  navigateFallbackWhitelist: [/^(?!\/__).*/],
  // Don't precache sourcemaps (they're large) and build asset manifest:
  staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
  // Work around Windows path issue in SWPrecacheWebpackPlugin:
  // https://github.com/facebookincubator/create-react-app/issues/2235
  stripPrefix: paths.appBuild.replace(/\\/g, '/') + '/',
}),

Generated service worker (not minified):
```
"use strict";
```

function setOfCachedUrls(e) { return e.keys().then(function(e) { return e.map(function(e) { return e.url }) }).then(function(e) { return new Set(e) }) } var precacheConfig = [ ["index.html", "952b5212853b4c8328be1b962318323d"], ["static/css/main.668103fb.css", "0b764e5e5cd878757de9a639dae7033b"], ["static/js/0.c437d323.chunk.js", "cfca782026d8de8ce79b1fbe9e4a8c87"], ["static/js/main.922be2fb.js", "7736a49e7ee62d9b18668199272cfb5f"], ["static/media/20-savings.0e76beee.jpg", "0e76beee657739bbef2ae54a5bec94dc"], ["static/media/about-us.ee674e53.jpg", "ee674e53d3b6437f7d6cb0ec1eabeb10"], ["static/media/animal.676f1122.gif", "676f112234b0274ad9e659bd40916867"], ["static/media/arrowdown.cd90a7ab.svg", "cd90a7abdac44b6d21cbf3c44852cbb4"], ["static/media/bankTT.814a91ba.png", "814a91baeede36f26b46d7d68c477fb5"], ["static/media/banner.ae11e841.jpg", "ae11e841bc2c22f3dfa1153f2e799500"], ["static/media/buyer-protection.2ac2463c.svg", "2ac2463c6494c7bbc0393353c2ac44f9"], ["static/media/cart.cefb5595.svg", "cefb55955a05d218ea683978b6903fb8"], ["static/media/credit-card.1e1c4823.png", "1e1c48236f5f7efb6538b5a272ecf09c"], ["static/media/dollar.b78bfc27.svg", "b78bfc27b6686c772154ce8aa90584ec"], ["static/media/factory.e5f6a64d.svg", "e5f6a64dc585e329351057e5fd4c25d6"], ["static/media/fav.0853bfa5.svg", "0853bfa58eb406803b7a7d466140cb33"], ["static/media/global.61db90a3.svg", "61db90a3fc0c6e537323824ebd24e8b0"], ["static/media/instant.f2da67a1.svg", "f2da67a1ea6df5be93fd6d2925ff4e24"], ["static/media/logistics.10afa878.svg", "10afa878630862585e4fe837bb6d956e"], ["static/media/master.feb5c662.png", "feb5c6626819e02767862d50a09b206b"], ["static/media/o-ring-jis-b2401-p500-id-499.5mm-x-cs-8.4mm.4baa2efb.jpg", "4baa2efbc400de4af133d2fd7117dbe2"], ["static/media/pp.7a6ce15d.png", "7a6ce15d6714301628332f3d57203a20"], ["static/media/ppcom.fa90774c.svg", "fa90774cf99780f6efdf8f65a400d8d2"], ["static/media/pvc-raincoat.2bd0580c.jpg", "2bd0580c090a1cd351bd7db05fd84b25"], ["static/media/pyrovatex-fire-retardant-suit.62560805.png", "6256080553505123bedacda88b219e37"], ["static/media/safety-gloves-pu-first-grey.0d121a95.jpg", "0d121a9502f813413a75fe1d0dadb616"], ["static/media/safety-vest-with-reflective-strip.cd5a3ca3.jpg", "cd5a3ca3e4ccc768059ede7d974efcba"], ["static/media/sandbox.34beb805.jpg", "34beb80504c1fb8d763d54ab6c99230b"], ["static/media/sell-with-us.1e189b4c.svg", "1e189b4cd919a1f596f639e777e6472d"], ["static/media/singapore.dd592486.png", "dd59248620145625d1f098c6c1ac47d5"], ["static/media/smes-go-digital.7f6f6fdb.png", "7f6f6fdbb7b9c437d4cc4a4fe53a7431"], ["static/media/sourcing.2584d058.svg", "2584d058a1d4097e2efb68d699ed9556"], ["static/media/stress.0e99c7db.svg", "0e99c7db718a37fac784738ade6aecec"], ["static/media/traffic-cone-28inch-orange-reflective.b3139c5e.jpg", "b3139c5e5e0c3086a2d36e1ca7417b3a"], ["static/media/user.ef0cb80d.svg", "ef0cb80d150b153fc21d41767c3998e6"], ["static/media/warehouse.c36b79bc.jpg", "c36b79bcbd6365da14f54f2bf6384512"] ], cacheName = "sw-precache-v3-sw-precache-webpack-plugin-" + (self.registration ? self.registration.scope : ""), ignoreUrlParametersMatching = [/^utm/], addDirectoryIndex = function(e, a) { var t = new URL(e); return "/" === t.pathname.slice(-1) && (t.pathname += a), t.toString() }, cleanResponse = function(e) { return e.redirected ? ("body" in e ? Promise.resolve(e.body) : e.blob()).then(function(a) { return new Response(a, { headers: e.headers, status: e.status, statusText: e.statusText }) }) : Promise.resolve(e) }, createCacheKey = function(e, a, t, c) { var n = new URL(e); return c && n.pathname.match(c) || (n.search += (n.search ? "&" : "") + encodeURIComponent(a) + "=" + encodeURIComponent(t)), n.toString() }, isPathWhitelisted = function(e, a) { if (0 === e.length) return !0; var t = new URL(a).pathname; return e.some(function(e) { return t.match(e) }) }, stripIgnoredUrlParameters = function(e, a) { var t = new URL(e); return t.hash = "", t.search = t.search.slice(1).split("&").map(function(e) { return e.split("=") }).filter(function(e) { return a.every(function(a) { return !a.test(e[0]) }) }).map(function(e) { return e.join("=") }).join("&"), t.toString() }, hashParamName = "_sw-precache", urlsToCacheKeys = new Map(precacheConfig.map(function(e) { var a = e[0], t = e[1], c = new URL(a, self.location), n = createCacheKey(c, hashParamName, t, /.\w{8}./); return [c.toString(), n] })); self.addEventListener("install", function(e) { e.waitUntil(caches.open(cacheName).then(function(e) { return setOfCachedUrls(e).then(function(a) { return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(t) { if (!a.has(t)) { var c = new Request(t, { credentials: "same-origin" }); return fetch(c).then(function(a) { if (!a.ok) throw new Error("Request for " + t + " returned a response with status " + a.status); return cleanResponse(a).then(function(a) { return e.put(t, a) }) }) } })) }) }).then(function() { return self.skipWaiting() })) }), self.addEventListener("activate", function(e) { var a = new Set(urlsToCacheKeys.values()); e.waitUntil(caches.open(cacheName).then(function(e) { return e.keys().then(function(t) { return Promise.all(t.map(function(t) { if (!a.has(t.url)) return e.delete(t) })) }) }).then(function() { return self.clients.claim() })) }), self.addEventListener("fetch", function(e) { if ("GET" === e.request.method) { var a, t = stripIgnoredUrlParameters(e.request.url, ignoreUrlParametersMatching); a = urlsToCacheKeys.has(t); a || (t = addDirectoryIndex(t, "index.html"), a = urlsToCacheKeys.has(t)); !a && "navigate" === e.request.mode && isPathWhitelisted(["^(?!\/__).*"], e.request.url) && (t = new URL("/index.html", self.location).toString(), a = urlsToCacheKeys.has(t)), a && e.respondWith(caches.open(cacheName).then(function(e) { return e.match(urlsToCacheKeys.get(t)).then(function(e) { if (e) return e; throw Error("The cached response that was expected is missing.") }) }).catch(function(a) { return console.warn('Couldn\'t serve response for "%s" from cache: %O', e.request.url, a), fetch(e.request) })) } });

jaspersorrio commented 7 years ago

This is silly but i found out how.

So if you need your app to serve from https://mysite.com/ and want a wordpress/ghost blog on https://mysite.com/blog but dont want service worker to intercept the request, edit the navigateFallbackWhitelist field.

Documentation on can be found here