Shift3 / boilerplate-client-react

The Bitwise standard starting point for new React web projects.
7 stars 10 forks source link

Adds caching for the app's shell (no data is cached) #748

Closed joshwingreene closed 1 year ago

joshwingreene commented 1 year ago

Changes

  1. Adds thevite-plugin-pwa package in order to add PWA caching capabilities. Its Vite-PWA method was added to the vite config file.
  2. Removes the link tag for the manifest.json file since the aforementioned plugin generates the manifest.json file for us
  3. The environment.prod.ts file was edited in order to direct requests to the local backend server instead of the staging server. This was an intentional change since these caching features are only available when we are targeting production.
  4. Adds the preview property to the vite config file in order to make the production port 4200

Purpose

Adds caching for the app's shell (no data is cached)

Approach

Vite's vite-plugin-pwa package was added in order to add caching capabilities. This PR uses the generateSW approach for registering and activating a service worker. This means that the app will register and activate the service worker for us.

Learning

Vite's Documentation was very useful. Here's the link: Getting Started | Guide | Vite PWA

Demo

Note: GitHub isn't allowing me to upload files at the moment. So, I used Google Drive instead.

Adds caching for the app's shell

Testing Steps

  1. Pull in the changes to your local copy of this branch and run it alongside the dj_starter_demo repo. Use the develop branch.
  2. Run npx vite build
  3. Run npx vite preview
  4. Try to do the actions that are showcased in the demo
joshwingreene commented 1 year ago

Create a demo where the frontend (without any data) is cached and can be viewed while the user is offline

joshwingreene commented 1 year ago

@coreyshuman The demo doesn't have any audio. For reference, I never add sound to my demo videos. I'll make this clear in the future.

Thank you for making that edit! I had a feeling that I was missing a file type when I was reviewing workbox's globPatterns property.