# \[PWA\] Service worker app cache duration

**URL:** <https://forum.ionicframework.com/t/pwa-service-worker-app-cache-duration/125400>\
**Category:** ionic-v3\
**Created:** [March 21, 2018, 3:51pm UTC](https://forum.ionicframework.com/t/pwa-service-worker-app-cache-duration/125400 "2018-03-21T15:51:54Z")\
**Posts on this page:** 1\
**Showing post:** 13

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [July 5, 2018, 12:43pm UTC](https://forum.ionicframework.com/t/pwa-service-worker-app-cache-duration/125400/13 "2018-07-05T12:43:22Z")

</div>

`workbox` sound definitely interesting and might be the way to solve the cache problem when updating the app and automatically

`workbox-webpack-plugin` could be chained to webpack and on each build will generate a new list of the resources to cache 🙂

but unfortunately can’t be used ☹ I did the migration, everything works fine … till I run a `--prod` build. `workbox-webpack-plugin` will generate a `precache-hash.js` file in the `www/build` folder containing the list of resource to cache, awesome, but problem is that `ionic app-script` try to minify all files under `www/build` and unfortunately fails on minifying that particular file

**SOLUTION**

`workbox-build` could be use and chained with gulp (reference: [https://developers.google.com/web/tools/workbox/guides/precache-files/workbox-build](https://developers.google.com/web/tools/workbox/guides/precache-files/workbox-build))

1. remove `sw-toolbox`, install `workbox` and `workbox-build`

2. modify `src/service-worker.js` (example taken from the Ionic pwa toolkit [https://github.com/ionic-team/ionic-pwa-toolkit/blob/master/src/sw.js](https://github.com/ionic-team/ionic-pwa-toolkit/blob/master/src/sw.js))

3. edit your local copy of `copy.config.js` from Ionic app-script in order to copy `workbox-sw.js` instead of `sw-toolbox.js` to the build dir

4. if you don’t use it yet, install gulp and create a `gulpfile.js`

5. edit your gulpfile and add a new task

6. edit your `package.json` and create a cmd to chain everything

7. modify index.html in order to keep the load of the page performant while loading the service-worker (see [https://developers.google.com/web/tools/workbox/guides/get-started](https://developers.google.com/web/tools/workbox/guides/get-started)) replace the default `serviceWorker` load code in index.html

build and enjoy with `npm run pwa`

---

_[View the full topic](https://forum.ionicframework.com/t/pwa-service-worker-app-cache-duration/125400)._