无法使离线页面在渐进式 Web AOO 中工作

Question

技术：React、TS、Tailwind CSS

所以，我在学习如何制作PWA&我成功地做了一个。但我无法激活脱机页面。

我看了一堆教程&阅读过时的文章。

我从以下链接关注了与此相关的最新信息，但仍然无法使我的脱机.html页面正常工作：https://developer.chrome.com/docs/workbox/managing-fallback-responses/#offline-仅页面

具有以上代码的文件：https://github.com/mzs21/weather-app/blob/main/src/App.tsx#L22

Offline.html文件：https://github.com/mzs21/weather-app/blob/main/public/offline.html

Github：https://github.com/mzs21/weather-app

Live：https://weather-app-mzs.netlify.app/

TIA。

Answer 1

在PWA中，要使用脱机文件，可以按照以下步骤操作：-

1. 打开网站上的脱机页面，然后转到开发工具中的网络选项卡
2. 现在更改为脱机模式并刷新脱机页面
3. 在"网络"选项卡中，您将看到一些文件，而不是块文件被调用
4. 一个接一个地从头中复制这些文件URL，并在缓存阵列中的服务工作者内部经过它们
5. 你的cache.addAll将有我在下面提到的这种类型的文件

'/static/css/8.74e12705.chunk.css',
'/static/css/main.f4039512.chunk.css',         
'/static/js/8.fe897f0b.chunk.js',
'/static/js/main.bcf94194.chunk.js',
'/static/js/0.e2c58f2d.chunk.js',
'/static/js/1.5d470210.chunk.js',
'/static/js/4.9e9f39a1.chunk.js',
'/static/js/12.4eb8aa89.chunk.js',
'/static/js/16.9e2c1c31.chunk.js',
'/offline.html',