【发布时间】：2019-06-13 04:25:40
【问题描述】：
我遇到了一个特殊的问题，我无法理解为什么会发生这种情况。请如果有人经历过类似的事情并且有解决方法，我将不胜感激。
我在本地设置了一个开发服务器。我使用 xampp 并设置了 https 等等。所以我的本地开发内容是从服务器提供的，地址是https://local-site.test/
我还有我的生产环境，我将我的网站部署到一个共享托管服务器上，该服务器设置为https://production-site.com
本地（开发）站点和生产站点的文件结构相同。因此，对于路径或文件夹结构从一个环境到另一个环境不同，我没有任何问题。是一样的。
当我在本地开发服务器上运行我的应用程序时，它运行良好。所有页面都被缓存（静态和动态），当我模拟离线时，缓存页面被返回。 （在 Chrome、Firefox 和 Opera 中完美运行）
但是，当我将文件移植到生产服务器时，我会在清单选项卡中收到警告通知，指出 chrome 无法显示所有图标。 （在可安装性部分下）。这在我的本地服务器上不是问题。三个图标都位于同一个文件夹中，并从它可以调用和显示的 json 清单文件中调用。
在生产服务器上，它只显示第一个是 192x192。它不显示另外两个 256 和 512 像素。在本地服务器上，它显示了所有三个，并且它们都是从同一位置提供服务的。
不过，当我为 pwa 运行灯塔审核时，我的应用程序通过了所有测试。在我访问过我的应用程序的所有设备上，当我从 chrome 收到安装横幅提示以将页面安装到我的主屏幕时，我已经能够安装该应用程序。因此，我能够从我的实时服务器成功地在手机和平板电脑上安装应用程序。
主要问题是当我从一个页面导航到另一个页面时，我看到所有缓存都在创建 - 静态和动态的，但是当我进入飞行模式或使用离线模拟器时，它一直说页面处于离线状态.
我这辈子都想不通是什么导致了这个问题，除非有可能的网络服务器配置会影响它。
下面是屏幕截图和我正在使用的代码。 （就像我说的，我对本地和生产内容的设置是相同的，所以我在两端所做的事情没有什么不同）。它在我的测试服务器上运行良好，但在共享托管服务器上它有提到的问题。
{
"name": "My site",
"short_name": "Site",
"icons": [
{
"src": "android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "android-chrome-256x256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#0A78A8",
"background_color": "#ffffff",
"start_url": "/",
"scope": "/",
"description":"The short description",
"display": "standalone",
"dir":"ltr",
"lang":"en_US"
}
上面是我的 manifest.json 文件。
let CACHE_STATIC_NAME = 'static-v1';
let CACHE_DYNAMIC_NAME = 'dynamic-v1';
self.addEventListener('install', function (event) {
event.waitUntil(
caches.open(CACHE_STATIC_NAME)
.then(function (cache) {
return cache.addAll([
'/',
'/assets/img/logo-white-name-200-long.png',
'/assets/css/styles.css',
'/assets/css/fonts/icofont.woff',
'/assets/css/fonts/icofont.woff2',
'/assets/fonts/michroma.woff2',
'/assets/fonts/roboto-italic.woff2',
'/assets/fonts/roboto.woff2',
'/assets/js/fetch.js',
'/assets/js/promise.js',
'/assets/js/global-app.js',
'/assets/css/img/home/home-hero-800.jpg'
]);
})
)
});
self.addEventListener('activate', function (event) {
event.waitUntil(
caches.keys()
.then(function (keyList) {
return Promise.all(keyList.map(function (key) {
if (key !== CACHE_STATIC_NAME && key !== CACHE_DYNAMIC_NAME) {
return caches.delete(key);
}
}));
})
);
return self.clients.claim();
});
self.addEventListener('fetch', function (event) {
event.respondWith(
caches.match(event.request)
.then(function (response) {
if (response) {
return response;
}
else {
return fetch(event.request)
.then(function (res) {
return caches.open(CACHE_DYNAMIC_NAME)
.then(function (cache) {
cache.put(event.request.url, res.clone());
return res;
})
})
.catch(function (err) {
});
}
})
);
});
上面是我的 service worker 文件
This is dev tools showing that my content is being cached in local storage on page visits
Lighthouse PWA audit, my app passes all tests
在第二次访问后，从生产服务器获得“从 chrome 安装横幅提示”后，我可以在不同的手机和平板电脑上安装该应用程序。但是当我尝试离线查看内容时，它不会提供来自服务人员的任何缓存内容。
只是为了补充一点，我已经打电话给我的网络主机并完成了整个场景，他们看不到任何可能阻止文件脱机显示的原因。
另外，当我在 Firefox 上测试它时——无论是在桌面设备还是移动设备上，它都能完美运行。我可以在离线模式或飞行模式下访问所有页面。
真是令人费解。仅在 chrome 和 opera（也使用 chrome 渲染引擎）上，它无法在离线模式下工作。
如果有人能确定导致问题的原因，我将不胜感激。
我知道这是一篇很长的帖子，但我尝试发布尽可能多的信息来帮助调试问题。
提前致谢。
【问题讨论】：
标签： cross-browser webserver progressive-web-apps