是否可以使用Service Worker缓存动态php文件？

Question

我尝试登录时（带有会话cookie）从动态php文件中缓存html，但是从服务器获取html文件时没有会话cookie的凭据。 （我仅在路径中未在URL中指定文件名）

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);
                });
            })
        );
    });

（我省略了self.addEventListener（“ fetch”，function（event））

当我查看来自'/ q /的text / html文件时，服务工作者从服务器获取了没有php会话cookie PHPSESSID的文件，因此内容是错误的。

（否则，它可以完美地离线运行）

有针对这个的解决方法吗？

Answer 1

Fetch API规范中对此行为进行了说明。

HTTP cookie（以及其他一些东西）被称为“ 凭据 ”。

凭据是否包含在传出的HTTP请求中，由Request对象的credentials属性的值确定。 默认情况下， credentials设置为'omit' ，这会导致您看到的行为。 如果要包括HTTP cookie之类的凭据，则需要使用其credentials属性设置为'include' Request对象。

为此，您应该传递一个带有明确设置的正确credentials模式的Request对象数组，而不是将字符串数组传递给cache.addAll() 。 这是您的代码将如何更改：

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);