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

Question

我是 PWA 的新手，正在使用 Workbox；所以我有这个具有以下文件结构的测试文件夹，使用 localhost 作为我的服务器 （即 localhost/test）

index.html
test.css
test.jpg
test.js

sw.js（代码如下所示）；

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.0.0/workbox-sw.js');

if (workbox) {
  console.log(`Yay! Workbox is loaded `);
} else {
  console.log(`Boo! Workbox didn't load `);
}

//precache all the site files
workbox.precaching.precacheAndRoute([
  {
    "url": "index.html",
    "revision": "8e0llff09b765727bf6ae49ccbe60"
  },
  {
    "url": "test.css",
    "revision": "1fe106d7b2bedfd2dda77f06479fb676"
  },
  {
    "url": "test.jpg",
    "revision": "1afdsoaigyusga6d9a07sd9gsa867dgs"
  },
  {
    "url": "test.js",
    "revision": "8asdufosdf89ausdf8ausdfasdf98afd"
  }

]);

一切正常，文件已预缓存，当我处于离线模式时没有收到此常规离线消息，如下图所示。

所以，我复制了包含 test-2 文件夹的确切文件夹，然后将我的 index.html 文件 重命名为 index.php 并在我的 sw.js 文件中 我将 url 更新为以下代码

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

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

我这样做是因为我想在我自己定制的单页应用程序中使用 Workbox 实现 PWA（但它的格式为 .php）。

来到我的浏览器运行 localhost/test-2 （正常模式），我的文件是也预缓存，包括我的 index.php 文件 （我的控制台中没有错误消息，服务人员工作得很好）；只有我在我的源选项卡中切换到（离线模式）并刷新我的浏览器以测试离线体验和唉！我收到了这条离线消息，如下图所示:(

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

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

提前致谢

Answer 1

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

Workbox 在后台回退到尝试 index.html 以斜杠结尾的每条路线。因此，即使您没有“/”缓存 SW 也会尝试为您提供“/”+ "index.html"，这似乎已被缓存，并且该页面可以脱机工作。

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

Answer 2

详细说明@pate 的回答。

默认情况下，Workbox 会尝试确保开箱即用地支持漂亮的 URL。

因此在第一个示例中，您缓存了 /test/index.html。因此，当您请求 /test/ 时，Workbox 预缓存实际上会检查预缓存：

/测试/
/test/index.html

如果您的页面是 /test/about.html，并且您访问了页面 /test/about，预缓存将附加一个 .html 并检查它。

当您切换到 .php 扩展程序时，此逻辑突然不再有效。

有几个选项可以实现此功能：

如果您使用任何工作箱工具来构建您的清单，您将使用 templatedUrls 功能映射到一个文件 (More details here):
```
templatedUrls: {
    '/test-2/': ['/test-2/index.php']
}
```
如果你自己在服务器端制作预缓存列表，你可以告诉它预缓存 URL /test-2/ 而没有 index.php 并且预缓存将简单缓存那个。 请注意，您必须确保修订版本随 index.php.

如果您没有制作预缓存清单，您可以使用 urlManipulaion 选项告诉预缓存检查 URL，(More details here) :

workbox.precaching.precacheAndRoute(
  [
    .....
  ],
  {
    urlManipulaion: ({url}) => {
      // TODO: Check if the URL ends in slash or not
      // Add index.php based on this.
      return [url, `${url}.php`, `${url}index.php`];
    }
  }
);

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

How to get Workbox PWA to work with .php file

javascript

php

json

service-worker

workbox