Turn off ALL precaching

[danboyle8637]

Is there a way to disable ALL precaching from the service worker and Workbox?

Essentially I only want my service worker to handle fetch requests I tell it to... push notifications... and my custom offline page. Nothing else.

Is this possible?

I feel like the precaching messes with a lot of what Next does when building pages and using third party auth services seem to get all screwy as well.

[danboyle8637]

If you pass an empty array to runTimeCaching in the config. That should do it right? Can someone confirm that.

[amanSMylo]

runTimeCaching is different, you could hack arround by using injectmanifest plugin by providing swSrc in next config, and set your serviceworker file like the example provided below, note that precacheAndRoute gets an empty array instead of usual wb manifest.

This is bit of an anti pattern tho, since Injectmanifest or generateSW are used when you need precaching, but I couldn't find any other way to make it work with next-pwa.

Please try this first, and let us know how it goes, you can modify the runtime caching strategies however you like.

` import { skipWaiting, clientsClaim } from "workbox-core"; import { ExpirationPlugin } from "workbox-expiration"; import { NetworkOnly, NetworkFirst, CacheFirst, StaleWhileRevalidate, } from "workbox-strategies"; import { registerRoute } from "workbox-routing"; import { precacheAndRoute, cleanupOutdatedCaches } from "workbox-precaching";

skipWaiting(); clientsClaim();

self.__WB_MANIFEST; precacheAndRoute([]));

cleanupOutdatedCaches();

registerRoute( ({ request }) => request.url.includes("/api/"), new NetworkOnly({ cacheName: "apis", networkTimeoutSeconds: 10, plugins: [ new ExpirationPlugin({ maxEntries: 16, maxAgeSeconds: 86400, purgeOnQuotaError: true, }), ], }), );

registerRoute( /^https:\/\/fonts.(?:googleapis|gstatic).com\/.*/i, new CacheFirst({ cacheName: "google-fonts", plugins: [ new ExpirationPlugin({ maxEntries: 4, maxAgeSeconds: 315363, purgeOnQuotaError: true, }), ], }), "GET", ); registerRoute( /.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i, new StaleWhileRevalidate({ cacheName: "static-font-assets", plugins: [ new ExpirationPlugin({ maxEntries: 4, maxAgeSeconds: 604800, purgeOnQuotaError: true, }), ], }), "GET", );

registerRoute( /.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i, new StaleWhileRevalidate({ cacheName: "static-image-assets", plugins: [ new ExpirationPlugin({ maxEntries: 64, maxAgeSeconds: 86400, purgeOnQuotaError: true, }), ], }), "GET", ); registerRoute( /.(?:js)$/i, new StaleWhileRevalidate({ cacheName: "static-js-assets", plugins: [ new ExpirationPlugin({ maxEntries: 32, maxAgeSeconds: 86400, purgeOnQuotaError: true, }), ], }), "GET", ); registerRoute( /.(?:css|less)$/i, new StaleWhileRevalidate({ cacheName: "static-style-assets", plugins: [ new ExpirationPlugin({ maxEntries: 32, maxAgeSeconds: 86400, purgeOnQuotaError: true, }), ], }), "GET", ); registerRoute( /.(?:json|xml|csv)$/i, new NetworkFirst({ cacheName: "static-data-assets", plugins: [ new ExpirationPlugin({ maxEntries: 32, maxAgeSeconds: 86400, purgeOnQuotaError: true, }), ], }), "GET", ); `

[danboyle8637]

@amanSMylo Thanks. I will definitely keep this in mind.

Can you mix in Workbox register route function with custom add event listeners? ... in the same service worker file?

self.addEventListener('fetch', event => {
...
})

My test app seems to be working but I want to make sure I'm not going to hit any nasty surprises when I implement this in our production app.

Thanks!

[amanSMylo]

Technically yes, because you'd be running the same js functions after the fetch event is called, in the same scope.

But what is the need of doing so?

Get Outlook for Androidhttps://aka.ms/AAb9ysg

---

From: Dan @.> Sent: Thursday, March 3, 2022 6:27:21 PM To: shadowwalker/next-pwa @.> Cc: Aman Singh @.>; Mention @.> Subject: Re: [shadowwalker/next-pwa] Turn off ALL precaching (Issue #331)

@amanSMylohttps://github.com/amanSMylo Thanks. I will definitely keep this in mind.

Can you mix in Workbox register route function with custom add event listeners? ... in the same service worker file?

self.addEventListener('fetch', event => { ... })

My test app seems to be working but I want to make sure I'm not going to hit any nasty surprises when I implement this in our production app.

Thanks!

— Reply to this email directly, view it on GitHubhttps://github.com/shadowwalker/next-pwa/issues/331#issuecomment-1058015342, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ASQQFMDDISG243TXQMN6OXTU6CZLDANCNFSM5PT6CNEQ. Triage notifications on the go with GitHub Mobile for iOShttps://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Androidhttps://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub. You are receiving this because you were mentioned.Message ID: @.***>

[danboyle8637]

@amanSMylo No reason... the current custom service worker I just wrote uses the...

self.addEventListener('fetch', ...)

style...

I just wanted to make sure I wasn't going to cause other issues. I appreciate all the help on clarifying my questions. Thanks!

[btahir]

@amanSMylo No reason... the current custom service worker I just wrote uses the...

self.addEventListener('fetch', ...)

style...

I just wanted to make sure I wasn't going to cause other issues. I appreciate all the help on clarifying my questions. Thanks!

I'm in the same boat as you. Would like to have my app refresh every time a user opens it (have some data that needs to be refetched to show fresh stuff on the page). Did you figure this out? I tried runtimeCaching with an empty array and even NetworkFirst but it didn't do anything.

[danboyle8637]

@btahir I didn't without changing the service worker file and rebuilding the app. Are you just wanting to be safe to make sure the correct assets are loaded in the app?

[btahir]

Ah gotcha - what exactly did you change? I'm just simply trying to force a refresh when user loads the app. The reason is I have data displaying (like time and weather) that needs to be updated with a fresh fetch request (run on component mount aka useEffect react hook). Here is the app for reference: https://theclockapp.vercel.app/

Currently my hack is to have a setInterval in useEffect so it runs every minute but I am not a fan of this polling approach.

[meotimdihia]

@shadowwalker Please provide an option to turn off all precaching. @danboyle8637 could you share your code? Do I need to create a custom worker file?

self.addEventListener('fetch', event => {
...
})

[shadowwalker]

I think you can do publicExcludes: ['**/*'], buildExcludes:[() => true]

[btahir]

Unfortunately didn't work but thanks for suggesting.

[pawlarius]

Can we re-open this issue?

I tried this comment but our app still pre-caching everything.

I think you can do publicExcludes: ['**/*'], buildExcludes:[() => true]

[jin60641]

https://github.com/shadowwalker/next-pwa/blob/master/index.js#L156

publicExcludes actually works as publicIncludes. for negate, we need a prefix !

  runtimeCaching: [],
  publicExcludes: ['!**/*'], // like this
  buildExcludes: [() => true],
  fallbacks: false,
  cacheStartUrl: false,