Allow runtimeCaching option without ejecting #3137

Activity

1. stereobooster commented on Sep 18, 2017

   

   stereobooster

   on Sep 18, 2017

   Last edited by stereobooster

   Contributor

   More actions

   One way to solve is in the same manner as c-r-a deals with sass, e.g. does not create built-in solution, but creates easy-to-integrate outside solution

   yarn build && yarn regenerate-sw
   

   where yarn regenerate-sw will read contents of manifest.json, add more resources (what ever you need) and generate new service-worker.js
2. jliebrand commented on Sep 18, 2017

   

   jliebrand

   on Sep 18, 2017

   Author

   More actions

   ah great; i'll look in to that (although slightly unclear right now how i'd "add more resources" or indeed change the runtimeCaching option for specific domains)
3. stereobooster commented on Sep 18, 2017

   

   stereobooster

   on Sep 18, 2017

   Last edited by stereobooster

   Contributor

   More actions

   I'm looking into this too (have similar issue). Custom SW is just a tip of the iceberg. There are also UI problems, and need to choose proper strategy.

   This can be a starting point https://github.com/codebusking/next-hnpwa-guide-kit/blob/master/generate-sw.js

   UPD:

   package.json

   "build": "react-scripts build && yarn run generate-sw",
   "generate-sw": "sw-precache --root=build --config scripts/sw-precache-config.js && uglifyjs build/service-worker.js -o build/service-worker.js"

   scripts/sw-precache-config.js

   module.exports = {
     staticFileGlobs: [
       'build/static/css/*.css',
       'build/static/js/*.js',
       'build/index.html',
       // add more here
     ],
     stripPrefix: 'build',
     runtimeCaching: [{
       urlPattern: /images/,
       handler: 'cacheFirst'
     }]
   };
4. stereobooster commented on Sep 18, 2017

   

   stereobooster

   on Sep 18, 2017

   Last edited by stereobooster

   Contributor

   More actions

   @Swizec you might be interested in this issue too.

   Also important bits:

   • forbid http caching of service-worker.js with http headers Conflict between service worker and CloudFront? #3082
   • it is important to show user notifications about new content (those that are logged to console). I find material instructions very useful for UX https://material.io/guidelines/components/snackbars-toasts.html#. Toast for Service Worker #2426

   I'm using events to pass infor about service worker to UI

   console.log('New content is available; please refresh.');
   let event = new CustomEvent("serviceNotification", {
     detail: {
       state: 'newContent'
     }
   });
   window.document.dispatchEvent(event);

   Other interesting thought: if you use redux you can refresh UI without user action (theoretically, like HMR #2304).
5. Timer

   added

   issue: proposal

   on Sep 29, 2017
6. Timer commented on Sep 26, 2018

   

   Timer

   on Sep 26, 2018

   Contributor

   More actions

   Dupe of #4169
7. Timer

   closed this as completedon Sep 26, 2018
8. lock

   locked and limited conversation to collaborators on Jan 18, 2019