shadowwalker / next-pwa

Zero config PWA plugin for Next.js, with workbox 🧰
MIT License
3.88k stars 324 forks source link

Default SW.js seems to be caching video streams from external URL #273

Open sanderkooger opened 3 years ago

sanderkooger commented 3 years ago

Summary

We are buildign a video stream application on top of Cloudflare stream, When streinging vides with video JS the TS segments get cached in the Serviceworker.

Versions

How To Reproduce

Steps to reproduce the behavior:

image

Expected Behaviors

Have control over what is cached by excluding either domain or filetype I tried to add it to my excludes

withPWA({
        pwa: {
          dest: 'public',
          disable: process.env.NODE_ENV === 'development',
          // maximumFileSizeToCacheInBytes: 5000000,
          // mode: 'development', // enable verbose loggin in prod
          buildExcludes: [
            /chunks\/images\/.*$/, // Don't precache files under .next/static/chunks/images this improves next-optimized-images behaviour
            /chunks\/pages\/api\/.*/ // Dont cache the API it needs fresh serverinfo
          ],
          exclude: [
            /\.map$/, // dont cache map files
            /^.*ts.*$/, // Dont let serviceworker touch the TS streams
            /-manifest.json$/ // exclude those pesky json files in _next root but still serve the ones we need from /_next/static
          ],
          skipWaiting: true, // installs new SW when available withou a promt, we only need to send a reload request to user.
          dynamicStartUrl: false, // recommend: set to false if your start url always returns same HTML document, then start url will be precached, this will help to speed up first load.
          reloadOnOnline: false, // Prevents reloads on offline/online switch
          sourcemap: false
        },

How do i make workbox not cache videos ( it leads to a too large cache)

BenjaminIsMyName commented 1 year ago

Any solution? My Next.js app at redilet.com also has this issue. Videos from AWS S3 Bucket are being fetched fully when visiting the page.

image image

Update: I solved it by disabling cross-origin caching. See commit: 78930ca18ed359e9ceed6b1e50a3966a6028013e 🥳🎉