У меня особенная проблема, и я не могу понять, почему это может происходить.Пожалуйста, если кто-то испытывал что-то подобное и имел обходной путь, я был бы признателен.
У меня есть сервер разработки, настроенный локально.Я использую 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) {
});
}
})
);
});
Выше моего файла рабочего сервиса
предупреждение об инструментах Chrome Dev, которые не смогли загрузить два из значков.успешно работает на веб-сервере разработки
Это инструменты разработчика, показывающие, что мой контент кэшируется в локальном хранилище при посещениях страницы
Аудит Lighthouse PWAмое приложение проходит все тесты
Я могу установить приложение на разных телефонах и планшетах после второго посещения после получения «приглашения для установки баннера из chrome» с рабочего сервера.Но при попытке просмотра контента в автономном режиме он не обслуживает кэшированный контент от сервисных работников.
Просто чтобы добавить что-то еще, я вызвал своих веб-хостов и просмотрел весь сценарий с их стороны, и они не видят никакой причины с их стороны, которая могла бы блокировать показ файлов в автономном режиме.
Кроме того, когда я тестирую все это на Firefox - как на настольном, так и на мобильном устройстве, он работает отлично.Я могу получить доступ ко всем страницам в автономном режиме или в режиме полета.
Это действительно сбивает с толку. Только на Chrome и Opera (которые также используют механизм рендеринга Chrome) он не работает в автономном режиме.
Буду признателен за любую помощь, если кто-нибудь сможет определить, что может быть причиной проблемы.
Я знаю, что это длинное сообщение, но я попытался опубликовать как можно больше информации, чтобы помочь с отладкой проблемы.
Заранее спасибо.