代码之家 › 专栏 › 技术社区 › Solar

如何使用Workbox PWA。php文件

workbox service-worker json php javascript

Solar · 技术社区 · 7 年前

我是PWA新手,使用Workbox;因此,我有一个文件结构如下的测试文件夹,使用localhost作为我的服务器 (即本地主机/测试)

指数html
测验css
测验jpg公司
测验js公司

软件。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文件夹,然后重命名了 指数html文件 至至 指数php 在我的 软件。js文件 我将url更新为以下代码

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

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

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

来我的浏览器运行localhost/test-2 (正常模式) ,我的文件也进行了预缓存,包括我的索引。php文件 (我的控制台中没有错误消息,服务人员工作正常) ; 只有我可以切换到 (脱机模式) 在我的源选项卡中,刷新我的浏览器以测试离线体验,唉!我收到此脱机消息,如下图所示:(

我不知道出了什么问题,我也不知道发生了什么,几天来我一直在搜索一些原因,但我似乎没有得到任何正确和相应的答案。大多数教程都有。html

所以问题是我如何用实现PWA。php文件,这样当用户脱机时,他们不会收到正常的You are offline消息,而是应该呈现我的网页?

提前感谢

2 回复 | 直到 7 年前

Matt Gaunt 7 年前

详细说明@pate的答案。

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

在第一个示例中,您缓存了 /test/index.html . 所以当你要求 /test/ ,Workbox Preaching实际检查Preache是否:

/测试/
/测试/索引。html

如果您的页面 /test/about.html ,并且您访问了该页面 /test/about precache将附加一个。html并检查它。

当您切换到 .php 这种逻辑突然不再适用。

有几个选项可以让它工作:

如果您正在使用任何workbox工具来构建清单,那么您将使用 templatedUrls 要映射到文件的要素( More details here ):
```
templatedUrls: {
    '/test-2/': ['/test-2/index.php']
}
```
如果您自己在服务器端制作预缓存列表,您可以告诉它预缓存URL /test-2/ 没有索引。php和预缓存将简单地缓存它。 请注意,您必须确保修订版随索引的任何更改而更改。php .

如果您没有制作预缓存清单,可以使用 urlManipulaion 选项告诉precache检查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`];
    }
  }
);

pate 7 年前

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

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

我敢打赌,如果您尝试访问 测试-2/索引。php 脱机时。是吗?