This snippet shows how to cache and serve a skeleton page

serve-skeleton-page.js

// Offline Web Applications course on Udacity https://classroom.udacity.com/courses/ud899

//When a browser runs a service worker for the first time, an event is fired within it, 'install'. This can be used
//to trigger functions to download assets and save them to the cache, using the Cache API

//Started with snippet from https://gist.github.com/luke-denton/ef791e5150470814a7a155cd85b1bf80
var staticCacheName = "my-cache-v2"; //Update the cache version

self.addEventListener('install', function(event) {
  var urlsToCache = [
    '/skeleton', //Change this from / to /skeleton
    'js.main.js',
    'css/main.css',
    'imgs/icon.png',
    'https://fonts.gstatic.com/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woff',
    'https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff'
  ];
  
  //call event.waitUntil with the same code as referenced snippet
});

self.addEventListener('fetch', function(event) {
  //Respond to requests for the root page with the page skeleton from the cache
  var requestUrl = new URL(event.request.url);
  
  //Only intercept requests from the same origin (i.e. Don't intercept Google Fonts requests, or any third party request like that)
  if (requestUrl.origin === location.origin) {
    //Check if the request is for the root page
    if (requestUrl.pathname === '/') {
      //Respond with the cached skeleton, which will be there as it is now cached as part of the install step
      event.respondWith(caches.match('/skeleton'));
      return;
    }
  }
  
  //Call respond with to handle requests that aren't from the same origin or for the root page
});

where is this skeleton defined ?

From the Udacity Course, "Offline Web Applications"

• Lesson 2: Introducing the Service Worker
• 26. Caching the Page Skeleton

After a week of trying to figure out why /skeleton wasn't working on my own app... I finally figured it out!! /skeleton is a proprietary feature built specifically into this course's wittr project. Although it was introduced as though it would work anywhere, on any project, it is not, as I so wrongly derived, a magical part of the Browser's Web Cache API.

Here is the distinction between root / and /skeleton from the project's repo [server\Server.js]

    this._app.get('/', (req, res) => {
      res.send(indexTemplate({
        scripts: '<script src="/js/main.js" defer></script>',
        content: postsTemplate({
          content: this._messages.map(item => postTemplate(item)).join('')
        })
      }));
    });

    this._app.get('/skeleton', (req, res) => {
      res.send(indexTemplate({
        scripts: '<script src="/js/main.js" defer></script>',
        content: postsTemplate()
      }));
    });

Unsure how to mimick their functionality outside of their app's setup (which appears to involve a handlebar template file)... so unsure how one would apply this outside of the course's own server-run app.

Thanks for the explanation.