处理子目录中的脱机页面资源

Question

我正在本地主机Xampp服务器上进行PWA测试。这是我的文件夹结构

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

offline.html在head标签中有一个指向css文件css/style.css的链接。当我在URLlocalhost/index。html当我离线时，离线页面加载得很好。但是当我进入localhost/sub/other。html离线时，style.css无法加载(它被缓存了)。

浏览器正在查找localhost/sub/css/style.css中的文件。所以我猜在离线。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="/">标签添加到offline.htmlHTML中，这将导致所有子资源url相对于/进行解析。