gistfile1.txt

let bookList = document.getElementById("bookList")

// register the service worker
if("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/serviceWorker.js")
  .then((registration) => {
    console.log("Server worker has been registered with scope ",registration.scope)
  }).catch((error) => {
    console.log(error)
  })
}


function populateBooks() {

  fetch('https://raw.githubusercontent.com/benoitvallon/100-best-books/master/books.json')
  .then(response => response.json())
  .then((books) => {

   let bookItems = books.map((book) => {
      return `<li>
      <label>${book.title}</label>
      <img src='https://raw.githubusercontent.com/benoitvallon/100-best-books/master/static/${book.imageLink}'></img>
      </li>`
    })


    bookList.innerHTML = bookItems.join(' ')

  })

}

populateBooks()

gistfile2.txt

const CACHE_NAME = "books-cache-v3"
const CACHED_URLS = [
  '/',
  '/index.html',
  '/site.css',
  '/index-offline.html',
  '/app.js'
]

self.addEventListener('install',(event) => {

  console.log("install")

  event.waitUntil(
    caches.open(CACHE_NAME)
    .then((cache) => {
      return cache.addAll(CACHED_URLS)
    })
  )
})

self.addEventListener('activate',(event) => {
  console.log('activatess')
  // delete the old cache
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames.map((cacheName) => {
          if(CACHE_NAME !== cacheName && cacheName.startsWith('books-cache')) {
            return caches.delete(cacheName)
          }
        })
      )
    })
  )

})

self.addEventListener('fetch',(event) => {
  event.respondWith(
    fetch(event.request).catch(() => {
      return caches.match(event.request).then((response) => {
        if(response) {
          return response
        }
      })
    })
  )
})

gistfile3.txt

.menu {
  list-style: none;
  display: flex;
  background-color: gray;
  color: white;
  padding: 5px
}

.menu li {
  margin: 10px;
}

#bookList {
  display:flex;
  flex-wrap: wrap;
}

#bookList li {
  width: 150px;
  height: 150px;
}

#bookList img {
  width: 100px;
}