微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

使用灯塔错误构建 PWA

如何解决使用灯塔错误构建 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。

  1. 注册控制页面和 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 举报,一经查实,本站将立刻删除。