Steps to see the demo:
- Fork the Repo
- Register for Netlify
- Click on Create new Site from Git
- Choose your fork.
- In the Build Settings
- Build Command:
yarn build
- Publish Directory:
out
- Build Command:
- Wait for Deploy to finish and then open your website in a tab.
- Now go to Netlify Deploys and trigger another deploy.
- Open your website in another tab. Both tabs should now have "New Version Available Toast"
- Click "Upgrade" on any one tab and then both tabs should reload.
This example covers:
- Service Worker with Typescript
- Service Worker Bundling (Provided by the workbox webpack plugin)
- Precaching of client side assets when service worker starts
- Communication to user that new update is available.
- Reload all existing tabs when Service Worker is updated to avoid state mismatch.
- Update service worker when user navigates (by clicking on link or some action)
- Update service worker when user refreshes the page
- How to use assetPrefix when assets are uploaded to CDN
- Precache HTML assets in export mode.
Further Reading: