title: How to call a function of a react class from a service worker object?
body: <p>I am trying to do unintrusive updates in a react web with my own service worker. I want to display a notification when there are new updates to teh website. I am using a component to handle service worker logic. The problem is I don't know how to call a function of my class in an event listener of the service worker, where this references the service worker itself. Any tips? Here is the class that deals with the service worker:</p>
  
  <pre><code>import * as React from 'react';
  import { RouteComponentProps } from 'react-router';
  
  export class ServiceWorker extends React.Component&lt;RouteComponentProps&lt;{}&gt;&gt; {
      constructor() {
          super();
      }
  
      registerServiceWorker() {
          if ('serviceWorker' in navigator) {
              window.addEventListener('load', () =&gt; {
                  navigator.serviceWorker.register('/ServiceWorker.js').then(reg =&gt; {
                      console.log('SW registered: ', reg);
                      if (!navigator.serviceWorker.controller) {
                          return;
                      }
                      if (reg.waiting) {
                          console.log("update ready1");
                          //Can call updateAlert() here, because still using the same object
                          this.updateAlert();
                          return;
                      }
  
                      if (reg.installing) {
                          reg.installing.addEventListener('statechange', () =&gt; {
                              if (reg.installing.state == 'installed') {
                                  console.log("update ready2");
                                  //Can't call here
                                  //this.updateAlert();
                              }
                          });
                          return;
                      }
  
                      reg.addEventListener('updatefound', function () {
                          reg.installing.addEventListener('statechange', () =&gt; {
                              if (reg.installing) {
                                  if (reg.installing.state == 'installed') {
                                      console.log("update ready3");
                                      //or here
                                      //this.updateAlert();
                                  }
                              }
                              if (reg.waiting) {
                                  if (reg.waiting.state == 'installed') {
                                      console.log("update ready4");
                                      //or here
                                      //this.updateAlert();
                                  }
                              }
                          });
                      })
                  }).catch(registrationError =&gt; {
                      console.log('SW registration failed: ', registrationError);
                  });
              });
          }
      }
  
      updateAlert() {
          console.log("success");
      }
  
      public render() {
          this.registerServiceWorker();
          return null;
      }
  }
  </code></pre>