使用灯塔错误构建 PWA

问题描述

我正在将一个简单的网页变成 PWA。我把它归结为灯塔内只有一个错误，但在尝试修复该错误之后。我把它变成了 3。我不知道该怎么做；我已经尝试解决这个问题超过 4 个小时了。

这是我正在变成 pwa 的简单网页 Shawn The Barber

这是我不断收到的 Lighthouse 错误：

1：离线时当前页面不响应 200

2:start_url 在 offlineTimed out 等待 start_url (https://aflawlesscut.com/tree/shawnthebarber/index.html) 响应时不响应 200。

3. 不注册控制页面和 start_url 的 Service Worker

这是我的清单文件：

{
  "name": "Shawn The Barber","short_name": "Shawn The Barber","start_url": "/tree/shawnthebarber/index.html","display": "standalone","background_color": "#F4F4F4","theme_color": "#F4F4F4","orientation": "portrait-primary","icons": [
    {
      "src": "/tree/shawnthebarber/images/icons/shawn72.png","type": "image/png","sizes": "72x72"
    },{
      "src": "/tree/shawnthebarber/imgs/icons/shawn192.png","sizes": "196x196","purpose": "any"
    },"purpose": "maskable"
    },{
      "src": "/tree/shawnthebarber/images/icons/shawn96.png","sizes": "96x96"
    },{
      "src": "/tree/shawnthebarber/images/icons/shawn128.png","sizes": "128x128"
    },{
      "src": "/tree/shawnthebarber/images/icons/shawn144.png","sizes": "144x144"
    },{
      "src": "/tree/shawnthebarber/images/icons/shawn152.png","sizes": "152x152"
    },{
      "src": "/tree/shawnthebarber/images/icons/shawn192.png","sizes": "192x192"
    },{
      "src": "/tree/shawnthebarber/images/icons/shawn384.png","sizes": "384x384"
    },{
      "src": "/tree/shawnthebarber/images/icons/shawn512.png","sizes": "512x512"
    }
  ]
}

这是我的 Service-worker.js 文件

const staticCacheName = 'norse-apps-v2';
const assets = [
  '/tree/shawnthebarber/index.html','/tree/shawnthebarber/service-worker.js','/tree/shawnthebarber/styles.css',];
// install event
/* Start the service worker and cache all of the app's content */
self.addEventListener('install',function(e) {
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      return cache.addAll(filesToCache);
    })
  );
});

/* Serve cached content when offline */
self.addEventListener('fetch',function(e) {
  e.respondWith(
    caches.match(e.request).then(function(response) {
      return response || fetch(e.request);
    })
  );
});

我不知道此时要进一步做什么。如果有人可以提供帮助，或者有一个简单的 PWA 服务工作者和清单示例。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）