如何让Workbox PWA与.php文件一起使用

I am new to PWA and using Workbox; So I have this test folder with the following file structure, using localhost as my server (i.e. localhost/test)

index.html

test.css

test.jpg

test.js

sw.js (Code Shown below);
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.0.0/workbox-sw.js');
```
if (workbox) {

  console.log(`Yay! Workbox is loaded 
```

To elaborate to @pate's answer.

Workbox by default tries to make sure that pretty URL's are supported out of the box.

So in the first example, you cached /test/index.html. So when you request /test/, Workbox precaching actually checks the precache for:

/test/
/test/index.html

If your page was /test/about.html, and you visited the page /test/about precache would append a .html and check for that.

When you switched to the .php extension this logic would suddenly no longer work.

There are a few options to get this working:

If you are using any of the workbox tools to build your manifest, you are use the templatedUrls feature to map to a file (More details here):
```
templatedUrls: {
    '/test-2/': ['/test-2/index.php']
}
```
If you are making the precache list yourself server side, you can just tell it to precache the URL /test-2/ without the index.php and precaching will simply cache that. Please note that you must ensure the revision changes with any changes to index.php.

If you aren't making the precache manifest, you can use urlManipulaion option to tell precache to check for URL's, (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`];
    }
  }
);

This is most likely because in the error showing screenshot you're trying to access test-2/ instead of test-2/index.php.

Workbox, in the background, falls back to trying index.html for every route that ends in a slash. For this reason, even if you don't have "/" cached SW tries to give you "/" + "index.html" which seems to be cached, and the page works offline.

I bet your page works if you try to access test-2/index.php while offline. Does it?