PWA: cache a PHP file for offline usage using service worker

Question

I tried creating a simple test-PWA which just consists of a single index.html file like:

<!DOCTYPE html>
<html lang="en">
   <head>
      <link rel="manifest" href="manifest.json" crossorigin="use-credentials">
      <script type="text/javascript">
         if ( "serviceWorker" in navigator ) {
           navigator.serviceWorker.register( "sw.js" )
             .then( function ( registration ) { 
               console.log( "ServiceWorker registration successful with scope: ", registration.scope );
         
             } ).catch( function ( err ) { 
         
               console.error( "ServiceWorker registration failed: ", err );
             } );
         
         }
      </script>
   </head>
   <body>
      My awesome PWA
   </body>
</html>

and it's accompanying sw.js service worker

const version = "1.06",
    preCache = "PRECACHE-" + version,
    cacheList = [
        "index.html",
    ];

/*  Service Worker Event Handlers */

self.addEventListener( "install", function ( event ) {

    console.log( "Installing the service worker!" );

    self.skipWaiting();

    caches.open( preCache )
        .then( cache => {

            cache.addAll( cacheList );

        } );

} );

self.addEventListener( "activate", function ( event ) {

    event.waitUntil(

        caches.keys().then( cacheNames => {
            cacheNames.forEach( value => {

                if ( value.indexOf( version ) < 0 ) {
                    caches.delete( value );
                }

            } );

            console.log( "service worker activated" );

            return;

        } )

    );

} );

self.addEventListener( "fetch", function ( event ) {

    event.respondWith(

        caches.match( event.request )
        .then( function ( response ) {

            if ( response ) {
                return response;
            }

            return fetch( event.request );
        } )
    );

} );

If I grab an Android device, fire up Chrome, 'install' it using the add-to-homescreen functionality, deactivate internet access and start the application using it's icon everythings fine.

Well, if I transform the index.html file into a php file index.php:

<?php /*empty*/ ?>
<!DOCTYPE html>
<html lang="en">
   <head>
      <link rel="manifest" href="manifest.json" crossorigin="use-credentials">
      <script type="text/javascript">
         if ( "serviceWorker" in navigator ) {
           navigator.serviceWorker.register( "sw.js" )
             .then( function ( registration ) { 
               console.log( "ServiceWorker registration successful with scope: ", registration.scope );
         
             } ).catch( function ( err ) { 
         
               console.error( "ServiceWorker registration failed: ", err );
             } );
         
         }
      </script>
   </head>
   <body>
      My awesome PWA
   </body>
</html>

change the file extension to .php in the service worker and try to run the application offline, I'm presented with the default 'the page can't be found' page.

Using the developer console of Chrome/desktop and going to Application -> Cache -> Cache Storage I can see the Content-length for my php file says it's 0 bytes.

Now I'm wondering - ain't it possible to cache .php files for offline usage (maybe because there's no backend server actually interpreting that file) or am I doing something wrong?

Service worker will not cache index.php (but it will cache the server output of index.php). This might point you in the right direction: stackoverflow.com/questions/58016408/role-of-php-file-in-pwa — kopz
PHP runs on the server, not the client. You cache the rendered HTML, not the server side code. — Chris Love

Nico Nico · Accepted Answer · 2020-09-24T12:56:47

The purpose of PWA and more especially the service worker is to perform the caching of interactions and caching of sites ( html, css, js ).

The service worker normally is taking care of communicating between the client and the PHP backend so the job of the service worker is to cache interaction in a local database and synchronize with the backend once it is available again.

Your PHP needs to act as a normal REST API, so your frontend ( angular, vue etc. ) can work correctly with the service worker performing the requests and interpreting answers. For it to be available offline your PWA app needs to cache the html sides locally and then cache interactions to queue them up to the server once available again.

An article explaining these things and different available strategies is available here: https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker

PWA: cache a PHP file for offline usage using service worker

1 Answers