https://github.com/tkssharma/pwa-workbox-react
React PWA Workbox
https://github.com/tkssharma/pwa-workbox-react
pwa reactjs workbox
Last synced: over 1 year ago
JSON representation
React PWA Workbox
- Host: GitHub
- URL: https://github.com/tkssharma/pwa-workbox-react
- Owner: tkssharma
- Created: 2019-08-26T07:51:24.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-08-26T11:17:16.000Z (almost 7 years ago)
- Last Synced: 2025-01-20T13:34:34.236Z (over 1 year ago)
- Topics: pwa, reactjs, workbox
- Language: JavaScript
- Size: 198 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Using Workbox with Create React App
Employee CRUD with WorkBox
### Build the project
```bash
$ npm install
$ npm run build
```
### Running Application
```bash
$ yarn global add serve
$ serve -s build
or
$ cd build
$ python -m SimpleHTTPServer 8000
```
### caching mechanism using workbox
```
workbox.routing.registerRoute(
new RegExp('.css$'),
workbox.strategies.cacheFirst({
cacheName: 'poc-cache-Stylesheets',
plugins: [
new workbox.expiration.Plugin({
maxAgeSeconds: 60 * 60 * 24 * 7, // cache for one week
maxEntries: 20, // only cache 20 request
purgeOnQuotaError: true,
}),
],
}),
);
workbox.routing.registerRoute(
new RegExp('.(png|svg|jpg|jpeg)$'),
workbox.strategies.cacheFirst({
cacheName: 'poc-cache-Images',
plugins: [
new workbox.expiration.Plugin({
maxAgeSeconds: 60 * 60 * 24 * 7,
maxEntries: 50,
purgeOnQuotaError: true,
}),
],
}),
);
workbox.routing.registerRoute(
new RegExp('https://randomuser.me/api/'),
workbox.strategies.staleWhileRevalidate({
cacheName: 'poc-cache-employees',
cacheExpiration: {
maxAgeSeconds: 60 * 30,
},
}),
);
```