Question

我正在创建一个渐进式网站www.seta-capital.com，在检查器上我没有收到任何错误，我看到服务人员的注册，但该网站未离线加载，Lighthouse工具说没有服务工人在场并且没有取货清单。您能告诉我是否做错了吗？

我创建了非常简单的manifest.json

{
  "short_name": "Seta",
 "name": "Seta Capital",
"icons": [
{
  "src": "../img/logo_no_writing.png",
  "type": "image/png",
  "sizes": "192x192"
},
{
  "src": "../img/logo_no_writing.png",
  "type": "image/png",
  "sizes": "512x512"
 }
],
 "start_url": "/",
 "background_color": "#3367D6",
 "display": "standalone",
 "scope": "/",
 "theme_color": "#3367D6"
}

在index.php中，我添加了脚本以查找json

我添加了一个Service Worker注册脚本：

<script>
if('serviceWorker' in navigator) {
  navigator.serviceWorker
           .register('../js/sw.js')
           .then(function() { console.log("Service Worker Registered"); 
 });
 }
 </script>

最后，我的sw.js文件是：

self.addEventListener('install', function(e) {
 e.waitUntil(
   caches.open('setacapital').then(function(cache) {
     return cache.addAll([
       '../',
       '../index.php',
       '../css/Formcss.css',
       '../js/jquery-2.1.0.min.js',
       '../js/circle-progress.min.js',
       '../css/Formcss2.css',
       '../img/bg.jpg',

     ]);
   })
 );
});

self.addEventListener('fetch', function(event) {
 console.log(event.request.url);

 event.respondWith(
   caches.match(event.request).then(function(response) {
    return response || fetch(event.request);
   })
);
});

Answer 1

那行不通。

您的index.php可能是一个复杂的动态创建文件。.取决于许多其他php代码和数据库查询。

您需要缓存预渲染的文件，例如index.html文件。

我的Service Worker不会离线加载页面，也不会获取清单

1 个答案: