PWA配置求助：start_url与Service Worker异常及Lighthouse检测问题

嘿，我帮你梳理下这两个核心问题的根因和具体修复方案：

1. Web App Manifest 配置问题修复 #

你的Manifest代码存在语法错误和格式问题，这直接导致了Lighthouse的图标和启动屏报错：

图标配置错误 #

目前你把192px和512px的图标合并在同一个对象里，还在icons数组外重复写了图标属性，这会让浏览器无法正确识别不同尺寸的图标。正确的写法是每个图标单独作为icons数组的一个元素：

$scope = '.';
$start_url = './';
$image_192 = HTTP::getShopUrl() . 'manifest/logo_192.png';
$image_512 = HTTP::getShopUrl() . 'manifest/logo_512.png';
$code_langue = $this->Language->getCode();
$manifest = [
 'dir' => 'ltr',
 'lang' => $code_langue,
 'name' => $siteName,
 'short_name' => $shortName,
 'description' => $description,
 'scope' => $scope,
 'display' => 'standalone',
 'start_url' => $start_url,
 'theme_color' => '#317EFB',
 'orientation' => 'any',
 'background_color' => '#fff',
 'related_applications' => [],
 'prefer_related_applications' => false,
 'screenshots' => [],
 'generated' => true,
 'icons' => [
     [
         'src' => $image_192,
         'sizes'=> '192x192',
         'type' => 'image/png'
     ],
     [
         'src' => $image_512,
         'sizes'=> '512x512',
         'type' => 'image/png'
     ]
 ]
];
$json_manifest = json_encode($manifest);
echo $json_manifest;

另外注意几个细节：

• PHP数组里直接用变量赋值即可，不需要{$variable}的格式
• related_applications应该是空数组而非空字符串，prefer_related_applications用布尔值false而非字符串，符合JSON规范
• 检查HTTP::getShopUrl()返回的路径是否正确，确保拼接后的图标URL能正常访问（比如访问https://你的域名/manifest/logo_192.png能看到图片）

自定义启动屏问题 #

PWA的启动屏是浏览器根据Manifest的theme_color、background_color和正确配置的icons自动生成的，不需要额外手动配置。修复图标配置后，这个报错应该会自动消失。

2. start_url 离线无法返回200响应修复 #

这个问题的核心是你的Service Worker没有缓存start_url对应的页面（也就是./），离线时无法从缓存中返回该页面的200响应。

修改Service Worker缓存策略 #

步骤1：在install阶段缓存start_url

修改install事件，把start_url加入缓存列表：

// This is the "Offline page" service worker
const CACHE = "pwabuilder-page";
const offlineFallbackPage = "offline.html";

// Install stage sets up the offline page and start URL in the cache
self.addEventListener("install", function (event) {
 console.log("[PWA Builder] Install Event processing");
 event.waitUntil(
 caches.open(CACHE).then(function (cache) {
 console.log("[PWA Builder] Cached offline page and start URL during install");
 // 缓存离线页和start_url对应的页面
 const cacheResources = [offlineFallbackPage, './'];
 if (offlineFallbackPage === "offline") {
 return cache.add(new Response("TODO: Update the value of the offlineFallbackPage constant in the serviceworker."));
 }
 return cache.addAll(cacheResources);
 })
 );
});

步骤2：调整fetch事件逻辑，优先缓存返回start_url

确保当请求start_url时，优先从缓存读取，离线时能直接返回200响应：

// If any fetch fails, it will show the offline page.
self.addEventListener("fetch", function (event) {
 if (event.request.method !== "GET") return;

 // 优先处理start_url的请求
 const requestUrl = new URL(event.request.url);
 if (requestUrl.pathname === '/' || requestUrl.pathname === './') { // 匹配start_url
   event.respondWith(
     caches.match(event.request)
       .then(cachedResponse => {
         // 有缓存直接返回，否则请求网络并更新缓存
         return cachedResponse || fetch(event.request)
           .then(networkResponse => {
             caches.open(CACHE).then(cache => {
               cache.put(event.request, networkResponse.clone());
             });
             return networkResponse;
           })
           .catch(() => {
             // 极端情况：缓存和网络都失败，返回离线页
             return caches.match(offlineFallbackPage);
           });
       })
   );
   return;
 }

 // 其他请求的原有逻辑
 event.respondWith(
 fetch(event.request).catch(function (error) {
 if (
 event.request.destination !== "document" ||
 event.request.mode !== "navigate"
 ) {
 return;
 }
 console.error("[PWA Builder] Network request Failed. Serving offline page " + error);
 return caches.open(CACHE).then(function (cache) {
 return cache.match(offlineFallbackPage);
 });
 })
 );
});

额外检查 #

确保start_url指向的页面（./）在在线状态下能正常返回200响应，没有跳转或404错误。

修复完这两部分后，重新部署代码，再运行Lighthouse检测，应该就能解决所有报错了。

内容的提问来源于stack exchange，提问作者Wallas