如何使Workbox与.php文件一起工作

Question

我对PWA很陌生，并且使用工作框；所以我有一个具有以下文件结构的测试文件夹，使用localhost作为我的服务器(即localhost/ test )

1. index.html
2. test.css
3. test.jpg
4. test.js
5. sw.js (代码如下所示)； importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.0.0/workbox-sw.js')； if (工作盒){ console.log(Yay! Workbox is loaded)；} console.log(Boo! Workbox didn't load)；} //precache所有站点文件workbox.precaching.precacheAndRoute( { "url"："index.html"，“修订”：“8e0llff09b7627bf6ae49ccbe60”}，{ "url"："test.css"，“修订”：“1fe106d7b2bedfd2dda77f06479f676”}，{ "url"："test.jpg"，“修订”：“1afdsoaigyusga6d9a07a07gsa867dgs”}，{ "url"："test.js"，“修订”：“8asdufosdf89ausdf8ausdfardf98afd”}；

一切都很好，文件是经过训练的，当我处于脱机模式时，我没有收到这条正常的离线消息，如下图所示。

​

​

因此，我复制了正确的文件夹以拥有test-2文件夹，然后将我的index.html文件重命名为index.php，在sw.js文件中将url更新为以下代码

{
    "url": "index.php",
    "revision": "8e987fasd5727bf6ae49ccbe60"
  },

-请注意，我也更改了修订值

我这么做是因为我想在我自己定制的单页应用程序中使用工作框来实现PWA (但它是.php格式的)。

在我的浏览器上运行localhost/ test -2 (普通模式)时，我的文件也被加密了，包括我的index.php文件(我的控制台中没有错误消息，服务工作人员运行得非常好)；只是为了我切换到源选项卡中的(脱机模式)，并刷新我的浏览器来测试脱机体验和Alas！我收到这条离线消息，如下图所示：

​

​

我不知道出了什么问题，我不知道发生了什么，我几天来一直试图找出一些原因，但我似乎没有得到任何正确和相应的答案。大部分的教程都是关于.html的

所以问题是我如何用.php文件实现PWA，这样当用户离线时，他们不会得到正常的您离线消息，而是我的网页应该呈现？

提前谢谢

Answer 1

详细说明@pate的答案。

默认情况下，Workbox会尝试确保支持漂亮的URL。

因此，在第一个示例中，您缓存了/test/index.html。因此，当您请求/test/时，Workbox建议实际上检查precache的以下内容：

• /测试/
• /test/index.html

如果您的页面是/test/about.html，并且您访问了该页面，那么/test/about方案将附加一个.html并检查它。

当您切换到.php扩展时，这个逻辑突然不再工作了。

要做到这一点，有几种选择：

1. 如果您使用任何工作框工具来构建清单，则使用templatedUrls特性映射到文件(这里有更多的细节)： templatedUrls：{ '/test-2/'：'/test-2/index.php‘}
2. 如果您是在服务器端将预缓存列表列出来，您可以告诉它在没有index.php的情况下对URL index.php进行预缓存，而提示只会缓存它。请注意，您必须确保index.php的任何更改都会对修订版进行更改。
3. 如果您没有生成预缓存清单，可以使用urlManipulaion选项告诉precache检查URL，(这里有更多的细节)： workbox.precaching.precacheAndRoute(……，{ urlManipulaion：({ URL }) => { // TODO:基于此检查该URL是否以斜杠结尾//添加index.php。返回url，${url}.php，${url}index.php；} )；

Answer 2

这很可能是因为在显示屏幕截图的错误中，您试图访问test-2/而不是

后台的Workbox返回到对以斜杠结尾的每一条路由尝试index.html。由于这个原因，即使您没有"/“缓存的SW试图给您"/”+ "index.html“似乎被缓存，并且页面脱机工作。

如果您尝试在脱机时访问test-2/index.php，我敢打赌您的页面会正常工作。是吗？