#cra3

[jonathanflower]

How to Handle Upgrades with Service Workers with CRA3 and Typescript

I am using Create React App v3 and Typescript.  I have enabled offline support with the service worker and configured the manifest.json.  Chrome supports installing this progressive web application as a Desktop app.  It is very neat.  

The biggest challenge has been gracefully handling updates to the app.  The default behavior for the Service Worker is to wait until all the tabs of the web application have been closed before updating to a new version of the web app. What I found is that user’s got into the habit of logging out and logging back in. This ruined the offline support and we had user’s complaining about not being able to work well in a poor internet environment since they waited to login until they entered the poor internet environment.  

Looking through a plethora of resources and examples, I really struggled to find a solid example that included Typescript.  The examples did not work well because Typescript does not include typings for the service worker skipWaiting() function.  

 serviceWorker.register({    onUpdate: registration => {          toastr.warning('Installing Update', 'Please wait...', {      ...constants.toastrWarning,      timeOut: 6000    });    setTimeout(() => {      window.location.reload();    }, 6000);   

 if (registration && registration.waiting) {        registration.waiting.postMessage({ type: 'SKIP_WAITING' });      }      console.log('New content is available; refreshing.');    }  });