Jamie888 Ответов: 1

PWA не работает корректно в автономном режиме


Привет, у меня есть приложение PWA, использующее архитектуру MVC. Все работает нормально, за исключением того, что когда я выхожу в автономный режим, чтобы протестировать одну из основных функций PWA, я не могу загрузить содержимое своей страницы. Если быть точным, он просто загружает пользовательский интерфейс(пустой дизайн оболочки) без каких-либо данных/записей в нем. Я проверил своего сервисного работника, и все кажется хорошим.
Так вот, автономный сбой здесь довольно сложен. Я сделал быстрый тест, поставив галочку напротив флажка "Offline" на вкладке Network в Chrome Dev Tools и перезагрузив свою страницу, и она отлично загрузилась. Но когда я отключаю свое Wi-Fi-соединение/отсоединяю сетевой кабель, страница загружает только пустой пользовательский интерфейс без данных.
При проверке далее на вкладке Сеть для исследования сетевого трафика выясняется, что данные не удалось извлечь из service worker(не было состояния 200). Но самое странное заключается в том, что когда я захожу на вкладку Application -> Cache Storage, данные действительно кэшируются.
Пожалуйста, любые подсказки/помощь будут очень признательны. Ниже приведены мои коды для сервисного работника:

var cacheName = 'WebAppPWA-v1';
var filesToCache = [
    '/'   
    , '/images/icons/privilegeProgram.png'
    , '/Home/Index'    
    , '/MemberPrivilege/MemPrivilege'
    , '/MemberPrivilege/MemPrivilegeInfo'
    , '/MemberPrivilege/MemPrivilegeInfo?Category=All Categories'
    , '/MemberPrivilege/MemPrivilegeInfo?Category=Food & Beverages'
    , '/MemberPrivilege/MemPrivilegeInfo?Category=Entertainment / Leisure'
    , '/MemberPrivilege/MemPrivilegeInfo?Category=Health & Fitness'
    , '/MemberPrivilege/MemPrivilegeInfo?Category=Miscellaneous'    
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(cacheName)
        .then(cache => cache.addAll(filesToCache))
        .then(self.skipWaiting())
  );
});


self.addEventListener('activate', event => {
  const currentCaches = [cacheName];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return cacheNames.filter(cacheName => !currentCaches.includes(cacheName));
    }).then(cachesToDelete => {
      return Promise.all(cachesToDelete.map(cacheToDelete => {
        return caches.delete(cacheToDelete);
      }));
    }).then(() => self.clients.claim())
    );
    console.log('Service Worker Activated.');
});


self.addEventListener('fetch', event => {
    var req = event.request.clone();
    if (event.request.url.startsWith(self.location.origin) && req.clone().method === 'GET') {
        event.respondWith(
            fetch(event.request).catch(function () {
                return caches.match(event.request);
            })
       
    );
    }
    console.log('Service Worker Fetched.');
});


Что я уже пробовал:

1. измените стратегию выборки, но безрезультатно.
2. поискал в интернете любую похожую статью, но проблема все еще сохраняется.

1 Ответов

Рейтинг:
0

RickZeeland

Может ты попробуешь ППР Строитель[^]