是否可以使用服务工作者缓存动态php文件？

I am trying to cache the html from a dynamic php-file when logged in (with session-cookie) but the html-file is fetched from the server without the credentials from the session-cookie. (I do not specify a filename in the URL only the path)

let cacheName = 'q2';

    let files = [
     '/q/',
     '/q/sw.js',
     '/q/js/main.js',
     '/q/js/init.js',
     '/q/js/lib.js',
     '/q/css/css.css',
     '/q/images/b.jpg',
     '/q/apps/BOK/js/main.js'
    ];


    self.addEventListener('install', (event) => {
        event.waitUntil(
            caches.open(cacheName)
            .then((cache) => {
                return cache.addAll(files)
                .then(() => {
                    console.info('All files are cached');
                    return self.skipWaiting(); 
                })
                .catch((error) =>  {
                    console.error('Failed to cache', error);
                });
            })
        );
    });

(I have omitted the self.addEventListener("fetch", function(event) )

When I look at the text/html file from '/q/ the service worker has fetched it from the server without the php session cookie PHPSESSID and the contents is therefore wrong.

(Otherwise it works perfect offline)

Is there a solution to this?

This behavior is explained in the Fetch API Specification.

HTTP cookies (and a few other things) are referred to as "credentials".

Whether or not credentials are including in an outgoing HTTP request is determined by the value of the credentials property of the Request object. By default, credentials is set to 'omit', which leads to the behavior you're seeing. If you want credentials like HTTP cookies included, you need to use Request objects whose credentials properties are set to 'include'.

To do this, instead of passing in an array of strings to cache.addAll(), you should pass in an array of Request objects with the proper credentials mode explicitly set. Here's how your code would change:

const requestsWithCredentials = [
  '/q/',
  '/q/sw.js',
  '/q/js/main.js',
  '/q/js/init.js',
  '/q/js/lib.js',
  '/q/css/css.css',
  '/q/images/b.jpg',
  '/q/apps/BOK/js/main.js'
].map(url => new Request(url, {credentials: 'include'}));

// Later...
cache.addAll(requestsWithCredentials);