我已经使用Vue，js，node技术构建了启用PWA的SPA。问题是，每当我关闭PC时，服务工作者都会删除我存储的缓存以脱机查看应用程序，否则它将起作用。第二个问题是，除非我在浏览器中启用CORS，否则它拒绝获取包含Google字体的数据。由于PWA基于浏览器，并且用户将不会在浏览器中安装CORS附加组件，是否有某种方法可以在（Windows）服务器上启用CORS？预先感谢，这是我的服务人员代码。
// service worker file. Every time when you change this file rename staticCache const in order to changes to be visible when user closes tab and reopens it.
const staticCache = 'site-static-1'; // static cache for main site files, app shell (all static files, html, css, starting images, logo etc). If you change code always rename this to new number
const assets = [ // this is array of app shell API requests for assets. Those are keys and asset values (images etc) will be values of key/value pair in array
'/',
'/index.html',
'/app.c328ef1a.js',
'/app.c328ef1a.css',
'/manifest.webmanifest',
'/photo-login.04703ebf.jpg',
'/icon_area.9bfa0c9a.png',
'/icon_144x144.c75152b5.png',
'/img/avatar_default.png',
'/img/icon_pwa.png',
'https://fonts.googleapis.com/css?family=Raleway:300,400,600,700',
'https://code.highcharts.com/stock/highstock.js',
'https://code.highcharts.com/stock/modules/data.js',
'https://code.highcharts.com/stock/modules/exporting.js',
'https://cdn.pubnub.com/sdk/javascript/pubnub.4.21.7.min.js',
'https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwIYqWqhPAMif.woff2',
'https://fonts.gstatic.com/s/raleway/v14/1Ptug8zYS_SKggPNyCMIT5lu.woff2',
'https://fonts.gstatic.com/s/raleway/v14/1Ptug8zYS_SKggPNyC0ITw.woff2',
'https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwPIsWqhPAMif.woff2',
'https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwPIsWqZPAA.woff2',
'https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwJYtWqhPAMif.woff2',
'https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwJYtWqZPAA.woff2'
]; // we hve to fetch separately fonts from links inside fonts.googleapis.com
// In Chrome Web Tools go to Application>Cache storage and click /css?family=raleway, links are inside value of that key
// installing service worker event
self.addEventListener('install', evt => {
console.log('Service worker has been installed');
// programmatically skip awaiting for new changed sw file to become active, because sometimes closing Chrome and tabs is not enough
// if we change sw.js and want to make sure change is visible ie cache is refreshed, we need to change version number of staticCache constant.
// NOTE: If we save this file by adding asset to be fetched (image for example) it will be visible in a new cache upon clicking browser reload.
// ..but if we delete it from the list of items to be fetched, IT WILL REMAIN in the cache until we change staticCache version number, save and reload browser page.
// So it is best practice to always change version number in staticCache whenever you make and save changes.
self.skipWaiting(); // it will be triggered only if there is a new sw version that awaits to be executed
evt.waitUntil( // installing awaits until this is executed first, otherwise it could stop it
caches.open(staticCache).then(cache => { // it opent cache, if there isn't it will create one
cache.addAll(assets); // add into cache all assets from the assets array []
})
);
});
// activating service worker event
self.addEventListener('activate', evt => {
console.log('Service worker has been activated');
evt.waitUntil(
caches.keys().then(keys => { // get array with keys (of key/value pair) from different cache versions in Chrome Dev Tools>Application>Cache Storage
// go thru all caches keys array and delete all values except newest cache, named in staticCache const. That way only the last cache is used by an app
return Promise.all(keys
.filter(key => key !== staticCache)
.map(key => caches.delete(key))
)
})
);
});
// fetch event
self.addEventListener('fetch', evt => {
console.log('SW is fetching data');
evt.respondWith( // check if requested data is stored in the cache.
caches.match(evt.request).then(cacheRes => {
return cacheRes || fetch(evt.request) // if item is in cache use it, if isn't go to the server and fetch it
})
)
});
答案 0 :(得分：0)
问题似乎出在服务工作者中的.col-sm-4 {
color:#fff
}
.panel-default>.panel-heading {
background-color:#561b14 !important
}
.panel-body {
background:#000 !important;
}
.p2p {
font-weight:600;
color:#d6d2cb
}
h4.panel-title {
color:#fff
}
.panel-default {
background:#000
}
.bible {
background:#561B14
}
.bbtt {
color:#deddd9
}
.bblcl {
background:#561B14
}
.bbltitle {
color:#deddd9
}
#accordion li {
list-style:none;
padding:5px;
}
#accordion li a {
color:#deddd9;
font-size:17px
}
#accordion li a:hover {
background:#711F14;
padding:5px;
border-radius:10px;
color:#deddd9
}
.five-three h4 {
padding-left:20px
}
/*Start of CSS OF Chapters */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;} body{margin:0;} a{background:transparent;} a:focus{outline:thin dotted;} a:active,a:hover{outline:0;} *,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} html{font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0);} body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.428571429;color:#333333;background-color:#ffffff;} a{color:#428bca;text-decoration:none;} a:hover,a:focus{color:#2a6496;text-decoration:underline;} a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;} h4{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:500;line-height:1.1;color:inherit;} h4{margin-top:10px;margin-bottom:10px;} h4{font-size:18px;} .clearfix:before,.clearfix:after{content:" ";display:table;} .clearfix:after{clear:both;} @-ms-viewport{width:device-width;} format("svg");font-weight:normal;font-style:normal;} html,body,a{-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased;-ms-font-smoothing:antialiased;font-smoothing:antialiased;} html{font-size:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);} body{background-color:#f6f4f2;font-size:14px;color:#000;} a{cursor:pointer;} h4{font-size:18px;} h4{color:#676767;font-size:13px;font-size:13px;font-weight:400;line-height:15px;margin-top:0;} a:visited{color:#b34b2c;} @media (min-width:768px){h4{font-size:15px;font-size:15px;font-weight:400;line-height:15px;}} a{color:#631e16;text-decoration:none;} a:hover,a:focus{color:#511811;text-decoration:underline;} a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;} div.bbl-chapters-container{display:none;background-color:black;} @media (max-width:767px){div.bbl-chapters-container{position:relative;height:100%;border-radius:5px;padding-top:45px;}} @media (min-width:768px) and (max-width:1204px){div.bbl-chapters-container{margin-left:-12px;margin-right:-11px; margin-bottom:-12px}} @media (min-width:1205px){div.bbl-chapters-container{padding:1px 22px 0;margin:-1px 10px 0;border-radius:0 0 5px 5px;}} div.bbl-chapters{} @media (min-width:768px) and (max-width:1204px){div.bbl-chapters{display:none;margin-bottom:-15px;padding:20px 37px;}} div.bbl-chapters.open{display:block;} .bbl-chapter-heading{font-size:14px;font-weight:bold;letter-spacing:0.15em;margin:0;text-transform:uppercase;} .bbl-chapter-heading{display:none;color:#deddd9;} @media (min-width:768px){.bbl-chapter-heading{display:block;margin-top:10px !important}} .bbl-chapters div.bbl-chapter-table{display:none;padding:1px 0 0 1px;} @media (min-width:768px){.bbl-chapters div.bbl-chapter-table{margin:15px 0 0 0;display:inline-block;}} .bbl-chapters.open div.bbl-chapter-table{display:inline-block;} .bbl-chapters div.bbl-chapter{text-align:center;border:1px solid #373738;display:inline-block;margin:-1px 0 0 -1px;} .bbl-chapters div.bbl-chapter:hover{background-color:#902b1f;color:#e8e6e4;} .bbl-chapters div.bbl-chapter a{color:#deddd9;display:block;width:42px;height:42px;line-height:42px;text-decoration:none;font-size:15px;}
/*
Start of List of Chapters CSS
*/
#bbl ul.books li:hover a{color:#ead3d0;background-color:#902b1f;}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;} body{margin:0;} a{background:transparent;} a:focus{outline:thin dotted;} a:active,a:hover{outline:0;} *,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} html{font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0);} body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.428571429;color:#333333;background-color:#ffffff;} a{color:#428bca;text-decoration:none;} a:hover,a:focus{color:#2a6496;text-decoration:underline;} a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;} h3{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:500;line-height:1.1;color:inherit;} h3{margin-top:20px;margin-bottom:10px;} h3{font-size:24px;} ul{margin-top:0;margin-bottom:10px;} .clearfix:before,.clearfix:after{content:" ";display:table;} .clearfix:after{clear:both;} @-ms-viewport{width:device-width;}
format("svg");font-weight:normal;font-style:normal;}
html,body,a{-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased;-ms-font-smoothing:antialiased;font-smoothing:antialiased;}
html{font-size:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
body{background-color:#f6f4f2;font-size:14px;color:#000;}
a{cursor:pointer;}
h3{font-size:24px;}
a:visited{color:#b34b2c;}
a{color:#631e16;text-decoration:none;}
a:hover,a:focus{color:#511811;text-decoration:underline;}
a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}
#bbl-wrapper1{display:none;}
@media (min-width:768px){#bbl-wrapper1{display:block;}}
#bbl{display:none;font-size:14px;}
@media (min-width:768px) and (max-width:1204px){#bbl{margin-left:-165px;padding-left:5px;}}
@media (min-width:1205px){#bbl{padding-left:5px;}}
.bbl-column{float:left;padding:0 0 15px 0;margin-left:10px;}
.bbl-column:first-child{margin-left:0;}
.bbl-column h3{font-size:14px;color:#ead3d0;font-weight:bold;text-transform:uppercase;letter-spacing:0.15em;padding-left:20px;}
.bbl-column:first-child h3{padding-left:10px;}
.bbl-column ul.books{float:left;width:140px;padding:0;margin:0;line-height:22px;}
@media (min-width:1024px){.bbl-column ul.books{width:150px;}}
.bbl-column ul.books.first{float:left;padding-left:10px;border-left:1px solid #711f14;}
.bbl-column:first-child ul.books.first{padding-left:0;border-left:none;}
#bbl ul.books li{list-style-type:none;}
#bbl ul.books li a{display:inline-block;width:90%;padding:0 0 0 10px;border-radius:10px;color:#d6d2cb;text-decoration:none;}
div.bbl-all-books{padding:0 0 15px 10px;clear:both;}
.bbl-all-books a{color:#deddd9;}
#bbl-wrapper1 {
background:#711E13;
width:1000px
}
/*Start of chapters*/
div.col-sm-7.five-three {
width: 60% !important;
}
div.col-sm-5.five-two {
width: 40% !important;
}
事件处理程序上。这主要用于从浏览器中删除旧缓存。尝试用以下代码替换事件监听器
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container bible">
<header class="page-header">
<h2 class="bbltitle">Book Categories</h2>
</header>
<main>
<article class="panel-group bs-accordion" id="accordion" role="tablist" aria-multiselectable="true">
<!-- Container -->
<div class="row bblcl">
<!-- Category 1 Column -->
<div class="col-md-4">
<!-- Category 1 title row -->
<div class="row">
<h4 class="bbtt text-center" style="font-weight:600"> CATEGORY 1 </h4>
</div>
<!-- Category 1 title row -->
<!-- 2 column books row -->
<div class="row">
<div class="col-md-6">
<ul>
<li><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-controls="collapseOne">Book 1</a></li>
<li><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-controls="collapseOne">Book 2</a></li>
</ul>
</div>
<div class="col-md-6">
<ul>
<li><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse20" aria-controls="collapseOne">Book 3</a></li>
<li><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse21" aria-controls="collapseOne">Book 4</a></li>
</ul>
</div>
</div>
<!-- 2 column books row -->
</div>
<!-- Category 1 Column -->
<!-- Category 2 Column -->
<div class="col-md-4">
<!-- Category 2 title row -->
<div class="row">
<h4 class="p2p text-center" style="font-weight:600"> CATEGORY 2</h4>
</div>
<!-- Category 2 title row -->
<!-- 2 column books row -->
<div class="row">
<div class="col-md-6">
<ul>
<li><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse40" aria-controls="collapseOne">Book 5</a></li>
<li><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse41" aria-controls="collapseOne">Book 6</a></li>
</ul>
</div>
<div class="col-md-6">
<ul>
<li><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse59" aria-controls="collapseOne">Book 7</a></li>
<li><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse60" aria-controls="collapseOne">Book 8</a></li>
</ul>
</div>
</div>
<!-- 2 column books row -->
</div>
<!-- Category 2 Column -->
<!-- Category 3 Column -->
<div class="col-md-4">
<!-- Category 3 title row -->
<div class="row">
<h4 class="bbtt text-center" style="font-weight:600">CATEGORY 3</h4>
</div>
<!-- Category 3 title row -->
<!-- 2 column books row -->
<div class="row">
<div class="col-md-6">
<ul>
<li><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse67" aria-controls="collapseOne">Book 9</a></li>
<li><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse68" aria-controls="collapseOne">Book 10</a></li>
</ul>
</div>
<div class="col-md-6">
</div>
</div>
<!-- 2 column books row -->
</div>
<!-- Category 3 Column -->
</div>
<!-- Container -->
</article>
</main>
</div>