PWA无法正常脱机工作 [英] PWA not working correctly offline

问题描述

我有一个使用MVC架构的PWA应用程序。一切正常，除非我离线测试PWA的一个主要功能，我无法加载我的页面内容。确切地说，它只是加载UI（空壳设计）而没有任何数据/记录。我检查了我的服务人员，一切似乎都很好。

现在，离线失败在这里非常棘手。我做了一个快速测试，勾选了Chrome开发工具中网络选项卡中的离线复选框，然后重新加载我的页面并完全加载。但是，当我关闭我的wifi连接/拔掉我的网络电缆时，页面只加载没有数据的空UI。

在网络选项卡上进一步检查以调查网络流量时，结果数据无法从服务工作者获取（没有状态200）。但奇怪的是，当我转到应用程序选项卡时 - >缓存存储，数据确实是缓存的。

请非常感谢任何线索/帮助。以下是我的服务人员代码：

Hi, I have a PWA application using MVC architecture. Everything is working fine except when I go offline to test out one of the main features of PWA, I cannot load the content of my page. To be exact, it just load the UI(empty shell design) without any data/record in it. I checked my service worker and everything seems good.
Now, the offline failing here is quite tricky. I did a quick test by tick checked the "Offline" checkbox in Network tab in Chrome Dev Tools and reload my page and it loaded perfectly. But when I turn off my wifi connection/unplugged my network cable, the page only loads the empty UI without the data.
Upon inspection further on the Network tab to investigate on the network traffic, turns out data is failed to be fetched from service worker(there was no status 200). But things that is weird is that when I go to Application tab -> Cache Storage, the data is indeed cached.
Please any clues/help would be very much appreciated. Below are my codes for service worker:

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.在线查看任何类似的文章，但问题仍然存在。

What I have tried:

1. Change the fetch strategy but to no avail.
2. Looked online for any similar article but problem still persist.

推荐答案

也许你可以尝试 PWA Builder [ ^ ]

Maybe you can try PWA Builder[^]

这篇关于PWA无法正常脱机工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！