search

itaditya / trick-or-treat-game

Play it for free here
https://trick-or-treat.netlify.com/
16 stars 17 forks source link

add Service Worker to cache game static assets #14

Open itaditya opened 4 years ago

itaditya commented 4 years ago

Currently all the js, css and images can be cached via service worker so people can play the game offline as well as a PWA on a phone.

xorob0 commented 4 years ago

I can work on this one tonight

itaditya commented 4 years ago

Thanks for picking this task. Some starting points-

  1. Use workbox to write service worker logic. This is a great article https://web.dev/precache-with-workbox-react
  2. Make sure during local develoment, if we change some code that is shown in browser, cache doesn't interfere with it.
  3. In production, CRA appends a hash to assets. Make sure Service Worker plays well with it.

To do this, you'll need to ensure that index.html is not cached. Reason is when a new build is made, the index.html will have asset paths updated to new hash. Then when a user opens the website, the new index.html will ask for new hashed paths instead of old cached paths. So we'll be able to push new changes if we need to. If there is no change in code, the index.html will keep requesting old hashed assets and they'll be served from cache.

xorob0 commented 4 years ago

I have a working Service Worker with assets support here : https://github.com/itaditya/trick-or-treat-game/pull/33