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

Question

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)

1. index.html


2. test.css


3. test.jpg


4. test.js



5. 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 

Answer 1

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:

1. 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']
   }
   

2. 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.

3. 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`];
       }
     }
   );