Stuck?

Check out the changes https://github.com/pearlbea/bloaty-mcbloatface/pull[/3

Note: Service Workers will only work on a secure origin such as localhost or a domain with https://

Enable SW

• Clear our your changes from the previous exercise with git checkout master
• In config/webpack/production.js enable loading of the Workbox plugin
• In config/webpack/plugins/workbox.js enable InjectManifest
  • InjectManifest will take the base app/javascript/sw.js and inject precaching for the files Webpack is building
• In app/javascript/packs/application.ts enable the serviceWorker registration

Pre-cache User Routes

• In app/javascript/sw.js enable precacheAndRoute for /users
  • This will tell Workbox to precache the response from /users
• Run in prod mode yarn run prod and go to /users
• With the Dev Tools application tab open you should see a service worker registered and Workbox registration logs
• While you are here, enable "update on reload"

• You should also see JavaScript and CSS assets showing up in the Cache Storage

• Right click on the Cache Storage bucket names to delete them
• Head to the Dev Tools Performance tab and click "start profiling and reload page" with an empty cache
• After the measurements are complete, check out the Event Log for the Finish Loading time