3

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

  1. 索引.html
  2. 测试.css
  3. 测试.jpg
  4. 测试.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 而是我的网页应该呈现？

提前致谢

4

2 回答 2

3

详细说明@pate的答案。

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

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

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

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

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

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

  1. 如果您使用任何工作箱工具来构建清单，您将使用该templatedUrls功能映射到文件（此处有更多详细信息）：

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

  2. 如果您自己在服务器端制作预缓存列表，您可以告诉它在/test-2/没有 index.php 的情况下预缓存 URL，并且预缓存将简单地缓存它。请注意，您必须确保随着 index.php 的任何更改而更改修订版。

  3. 如果您没有制作预缓存清单，您可以使用urlManipulaion选项告诉预缓存检查 URL，（更多细节在这里）：

    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`];
    }
  }
);
于 2018-04-18T18:22:25.950 回答
1

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

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

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

于 2018-04-16T17:16:17.457 回答