缓存的index.html内容包装在<；预处理>；_Html_Service Worker_Progressive Web Apps_Manifest.json

缓存的index.html内容包装在<；预处理>；

html

缓存的index.html内容包装在<；预处理>；,html,service-worker,progressive-web-apps,manifest.json,Html,Service Worker,Progressive Web Apps,Manifest.json,也许我不明白这是怎么回事。但我遵循了桌面上的谷歌PWA指南，可以很好地安装PWA。唯一的问题是，缓存的index.html显示为纯文本，而不是呈现的html 我的服务人员如下所示： const CACHE_NAME = 'backfuel-cache-v1'; const urlsToCache = [ '/backfuel/src/manifest.json', '/backfuel/src/index.html', '/backfuel/src/css/Main.c

也许我不明白这是怎么回事。但我遵循了桌面上的谷歌PWA指南，可以很好地安装PWA。唯一的问题是，缓存的index.html显示为纯文本，而不是呈现的html

我的服务人员如下所示：

const CACHE_NAME = 'backfuel-cache-v1';
const urlsToCache = [
    '/backfuel/src/manifest.json',
    '/backfuel/src/index.html',
    '/backfuel/src/css/Main.css',
    '/backfuel/src/app/Main.js'
];

self.addEventListener('install', function (event) {
    // Perform install steps
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(function (cache) {
                console.log('Opened cache');
                return cache.addAll(urlsToCache);
            })
    );
});

self.addEventListener('fetch', function (event) {
    event.respondWith(
        caches.match(event.request)
            .then(function (response) {
                console.log('Cache response: ', response.clone());
                // Cache hit - return response
                if (response) {
                    return response;
                }

                return fetch(event.request).then(
                    function (response) {
                        // Check if we received a valid response
                        if (!response || response.status !== 200 || response.type !== 'basic') {
                            return response;
                        }

                        // IMPORTANT: Clone the response. A response is a stream
                        // and because we want the browser to consume the response
                        // as well as the cache consuming the response, we need
                        // to clone it so we have two streams.
                        const responseToCache = response.clone();

                        caches.open(CACHE_NAME)
                            .then(function (cache) {
                                cache.put(event.request, responseToCache).then(
                                    res => {
                                        console.log('Chached', res);
                                    },
                                    rej => {
                                        console.log('Cache Error: ', rej);
                                    });
                            });

                        return response;
                    }
                );
            })
    );
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#eeeeee">
    <title>backfuel</title>
    <link href="https://fonts.googleapis.com/css?family=Abel|Karla|Pacifico&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/backfuel/src/css/Main.css">
    <link rel="manifest" href="/backfuel/src/manifest.json">
    <script type="module" src="/backfuel/src/app/Main.js"></script>
</head>
    <body>
        <div id="title-bar">
            <h2 id="title">
                backfuel
            </h2>
        </div>
        <div id="content">
            <ul class="carousel">
                <li class="carousel-item"><p>01.01.2020</p><p>32l</p><p>670km</p><p>44.26 &euro;</p></li>
                <li class="carousel-item"><p>20.01.2020</p><p>16l</p><p>250km</p><p>22.15 &euro;</p></li>
                <li class="carousel-item"><p>15.02.2020</p><p>64l</p><p>1001km</p><p>83.67 &euro;</p></li>
                <li class="carousel-item"><p>30.02.2020</p><p>8l</p><p>50km</p><p>5.81 &euro;</p></li>
                <li class="carousel-item"><p>10.03.2020</p><p>48l</p><p>750km</p><p>72.69 &euro;</p></li>
                <li class="carousel-item"><p>01.04.2020</p><p>56l</p><p>900km</p><p>85.18 &euro;</p></li>
            </ul>
        </div>
        <button class="fab">
            +
        </button>
    </body>
</html>

HTML是这样的：

const CACHE_NAME = 'backfuel-cache-v1';
const urlsToCache = [
    '/backfuel/src/manifest.json',
    '/backfuel/src/index.html',
    '/backfuel/src/css/Main.css',
    '/backfuel/src/app/Main.js'
];

self.addEventListener('install', function (event) {
    // Perform install steps
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(function (cache) {
                console.log('Opened cache');
                return cache.addAll(urlsToCache);
            })
    );
});

self.addEventListener('fetch', function (event) {
    event.respondWith(
        caches.match(event.request)
            .then(function (response) {
                console.log('Cache response: ', response.clone());
                // Cache hit - return response
                if (response) {
                    return response;
                }

                return fetch(event.request).then(
                    function (response) {
                        // Check if we received a valid response
                        if (!response || response.status !== 200 || response.type !== 'basic') {
                            return response;
                        }

                        // IMPORTANT: Clone the response. A response is a stream
                        // and because we want the browser to consume the response
                        // as well as the cache consuming the response, we need
                        // to clone it so we have two streams.
                        const responseToCache = response.clone();

                        caches.open(CACHE_NAME)
                            .then(function (cache) {
                                cache.put(event.request, responseToCache).then(
                                    res => {
                                        console.log('Chached', res);
                                    },
                                    rej => {
                                        console.log('Cache Error: ', rej);
                                    });
                            });

                        return response;
                    }
                );
            })
    );
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#eeeeee">
    <title>backfuel</title>
    <link href="https://fonts.googleapis.com/css?family=Abel|Karla|Pacifico&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/backfuel/src/css/Main.css">
    <link rel="manifest" href="/backfuel/src/manifest.json">
    <script type="module" src="/backfuel/src/app/Main.js"></script>
</head>
    <body>
        <div id="title-bar">
            <h2 id="title">
                backfuel
            </h2>
        </div>
        <div id="content">
            <ul class="carousel">
                <li class="carousel-item"><p>01.01.2020</p><p>32l</p><p>670km</p><p>44.26 &euro;</p></li>
                <li class="carousel-item"><p>20.01.2020</p><p>16l</p><p>250km</p><p>22.15 &euro;</p></li>
                <li class="carousel-item"><p>15.02.2020</p><p>64l</p><p>1001km</p><p>83.67 &euro;</p></li>
                <li class="carousel-item"><p>30.02.2020</p><p>8l</p><p>50km</p><p>5.81 &euro;</p></li>
                <li class="carousel-item"><p>10.03.2020</p><p>48l</p><p>750km</p><p>72.69 &euro;</p></li>
                <li class="carousel-item"><p>01.04.2020</p><p>56l</p><p>900km</p><p>85.18 &euro;</p></li>
            </ul>
        </div>
        <button class="fab">
            +
        </button>
    </body>
</html>

从ServiceWorker/Cache加载时，该页面将index.html的内容显示为纯文本。我确信这一定是重复的，但我找不到正确的搜索来找到答案

谢谢大家!

听起来你正在做一个单页应用程序，将响应注入到一个PRE标记中。仅供参考，这不会给您提供HTML-console.log（'Cache-response:'，response.clone（））；你需要做response.text（）才能得到它。如果这是我想要的行为，我对你的回答感到困惑。服务人员不会更改响应主体，除非您编写代码来更改响应主体，而您还没有这样做。这个怎么样。创建一个只有静态网页的网站。将您的服务人员添加到该站点。我想你会看到缓存的资产以你想要的方式工作。我也很困惑。因此，我发布了这个问题。谢谢你的努力。奇怪的是，在另一台计算机上，缓存根本不工作。