处理来自子目录的离线页面资源

Question

我正在开发一个 PWA，在本地主机 Xampp 服务器上对其进行测试。这是我的文件夹结构

/
  |- css
  |   |- style.css
  |- sub
  |   |- other.html
  |- index.html
  |- manifest.webmanifest
  |- service-worker.js
  |- offline.html

offline.html 在 head 标签中有一个 link 到 css 文件 css/style.css。当我在 URL localhost/index.html 并离线时，离线页面加载完美。但是当我去 localhost/sub/other.html 并离线时， style.css 无法加载（已缓存）。

浏览器正在寻找 localhost/sub/css/style.css 中的文件。所以我想 offline.html 中 style.css 的位置需要是 ../css/style.css.

如何处理子目录的位置问题？

Answer 1

如果您的 /offline.html 文件的内容用于实现任意 URL 的离线导航，您有两个选项来确保正确加载您的子资源：

在指定子资源的 src 或 href 时始终使用绝对值 URL。换句话说，使用 <link href="/css/style.css" ...> 而不是 <link href="css/style.css" ...>。
将 <base href="/"> tag 添加到您的 offline.html HTML，这将导致所有子资源 URL 相对于 [=17= 解析].

处理来自子目录的离线页面资源

Handle offline page resources from sub directories

progressive-web-apps