如何让 Workbox PWA 使用 .php 文件

Question

我是 PWA 新手并使用 Workbox；所以我有这个具有以下文件结构的测试文件夹，使用 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 (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 文件 （我的控制台中没有错误消息，服务人员工作正常）;只有我在我的源标签中切换到（离线模式）并刷新我的浏览器来测试离线体验，唉！我收到了这条离线消息，如下图所示：(

我不知道出了什么问题，我不知道发生了什么，我试图用谷歌搜索几天的一些原因，但我似乎没有得到任何正确和相应的答案。大多数教程都带有 .html

所以问题是如何使用 .php 文件实现 PWA，这样当用户离线时，他们不会收到正常的 You're offline Message 而是我的网页应该呈现？

提前致谢

Answer 1

详细说明@pate 的回答。

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

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

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

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

当您切换到 .php 扩展时，此逻辑将突然不再起作用。

有几个选项可以让这个工作：

1. 如果您使用任何工作箱工具来构建清单，您将使用 templatedUrls 功能映射到文件 (More details here)：

   templatedUrls: {
       '/test-2/': ['/test-2/index.php']
   }
   

2. 如果您自己在服务器端制作预缓存列表，您可以告诉它预缓存不带 index.php 的 URL /test-2/，预缓存只会缓存它。 请注意，您必须确保随着 index.php 的任何更改而更改修订版。

3. 如果您不制作预缓存清单，您可以使用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`];
       }
     }
   );
   

Answer 2

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

Workbox 在后台回退到尝试 index.html 为每个以斜线结尾的路由。出于这个原因，即使你没有“/”缓存，SW也会尝试给你“/”+“index.html”，这似乎是缓存的，并且页面可以离线工作。

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