How to get Workbox PWA to work with .php file

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 🎉`);
   } 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"
     }
   
   ]);
   

Everything is working perfectly fine, Files are precached and I didn't get this regular offline message when I am in offline mode, as shown in the image below.

So, I copied the exact folder to have test-2 folder, then renamed my index.html file to to index.php and in my sw.js file I updated the url to below code

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

- Please note that I changed the revision value too

I did this because I want to implement PWA using Workbox into my own custom built single page app (but its in .php format).

Coming to my browser to run localhost/test-2 (normal mode), my files were precached too, including my index.php file (no error messages in my console and service worker was working perfectly fine); Only for me to switch to (offline mode) in my source tab and refresh my browser to test the offline experience and Alas! I got this Offline Message as shown in the Image below :(

I don't know what went wrong, I have no Idea what happened and I tried to google out some reasons for days but I don't seem to get any right and corresponding answer. Most of the tutorials out there is with .html

So the question is how can I implement PWA with .php file, so that when the user is offline, they dont get the normal You're offline Message but Instead my webpage should render?

Thanks in Advance

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