title: Unable to register the service worker. Failed to register a ServiceWorker: The URL protocol of the current origin ('null') is not supported
body: <p>I am creating a Progressive Web App for a university project, but when I checked the console I have this error:
  Unable to register the service worker.  TypeError: Failed to register a ServiceWorker</p>
  <p>The HTML and CSS are showing on as expected, but when I do a PWA audit from the Chrome Dev Tools, it's showing :
  canvas_image_editor_to_pwa .js:363 Unable to register the service worker.  TypeError: Failed to register a ServiceWorker: The URL protocol of the current origin ('null') is not supported.
  at window.onload
  I am new to javascript and html. What should I do?</p>
  <p>I have all my files in the same folder and I am working fron a windows 10.</p>
  <p>Update: I tested it on a live server and now I get the following errorr:
  Uncaught (in promise) TypeError: Failed to execute 'Cache' on 'addAll': Request failed in serviceworker.js file</p>
  <p>HTML:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Image Editor&lt;/title&gt;
          &lt;meta charset=&quot;UTF-8&quot;&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
          &lt;link rel=&quot;manifest&quot; href=&quot;/manifest.json&quot;&gt;
      &lt;/head&gt;
      &lt;body
          style=&quot;text-align: center;&quot;&gt;
          &lt;div&gt;
              &lt;input 
                  id=&quot;fileBrowser&quot;
                  type=&quot;file&quot;
                  accept=&quot;image/*&quot;&gt;
          &lt;/div&gt;
  
          &lt;canvas 
              id=&quot;visibleCanvas&quot;
              style=&quot;max-width: 100%;&quot;&gt;
              Your browser...
          &lt;/canvas&gt;
  
          &lt;div&gt;
              &lt;button data-effect=&quot;normal&quot;&gt;Normal&lt;/button&gt;
              &lt;button data-effect=&quot;grayscale&quot;&gt;Grayscale&lt;/button&gt;
              &lt;button data-effect=&quot;threshold&quot;&gt;Threshold&lt;/button&gt;
              &lt;button data-effect=&quot;sephia&quot;&gt;Sephia&lt;/button&gt;
              &lt;button data-effect=&quot;invert&quot;&gt;Invert Colors&lt;/button&gt;
              &lt;button data-effect=&quot;pixelate&quot;&gt;Pixelate&lt;/button&gt;
              &lt;button data-effect=&quot;2channels&quot;&gt;2 Channels&lt;/button&gt;
              &lt;button data-effect=&quot;red&quot;&gt;Red&lt;/button&gt;
              &lt;button data-effect=&quot;green&quot;&gt;Green&lt;/button&gt;
              &lt;button data-effect=&quot;blue&quot;&gt;Blue&lt;/button&gt;
              &lt;button data-effect=&quot;darker&quot;&gt;Darker&lt;/button&gt;
              &lt;button data-effect=&quot;lighter&quot;&gt;Lighter&lt;/button&gt;
          &lt;/div&gt;
  
          &lt;div&gt;
              &lt;button id=&quot;btnDownload&quot;&gt;Download&lt;/button&gt;
              &lt;!--&lt;a id=&quot;btnDownload&quot; href=&quot;#&quot; download=&quot;imagine&quot;&gt;Download&lt;/a&gt;--&gt;
          &lt;/div&gt;
          &lt;script src=&quot;C:\Users\andra\Desktop\Multimedia\Tema 3\canvas_image_editor_to_pwa .js&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;C:\Users\andra\Desktop\Multimedia\Tema 3\serviceworker.js&quot;&gt;&lt;/script&gt;
          &lt;script&gt;
              &quot;use strict&quot;;
              app.load();
          &lt;/script&gt;
  
          &lt;noscript&gt;Your app can work without internet&lt;/noscript&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  
  Javascript:
  
  &quot;use strict&quot;;
  
  const app = {
      offscreenCanvas:null,
      visibleCanvas:null,
      currentEffect:null
  }
  
  app.changeEffect = function(effect){
      if(effect !== app.currentEffect){
          app.currentEffect = effect;
          app.draw();
      }
  }
  
  app.draw = function(){
      //redimensionare canvas
      app.visibleCanvas.width=app.offscreenCanvas.width;
      app.visibleCanvas.height=app.offscreenCanvas.height;
  
      //desenare imagine pe visibleCanvas
      switch(app.currentEffect){
          case &quot;normal&quot;:
              const vContext = visibleCanvas.getContext(&quot;2d&quot;);
              vContext.drawImage(app.offscreenCanvas, 0, 0);
              break;
          case &quot;grayscale&quot;:
              app.grayscale();
              break;
          case &quot;threshold&quot;:
              app.threshold(100);
              break;
          case &quot;sephia&quot;:
              app.sephia();
              break;
          case &quot;invert&quot;:
              app.invert();
              break;
          case &quot;red&quot;:
              app.red();
              break;
          case &quot;green&quot;:
              app.green();
              break;
          case &quot;blue&quot;:
              app.blue();
              break;
          case &quot;2channels&quot;:
              app.twochannels();
              break;
          case &quot;darker&quot;:
              app.darker(100);
              break;
          case &quot;lighter&quot;:
              app.lighter(100);
              break; 
          case &quot;pixelate&quot;:
              app.pixelate2(10);
              break;   
      }
  }
  
  app.pixelate2 = function(dimBlock){
      const oContext = app.offscreenCanvas.getContext(&quot;2d&quot;);
      const vContext = app.visibleCanvas.getContext(&quot;2d&quot;);
  
      for(let x = 1; x &lt; app.offscreenCanvas.width; x += dimBlock)
      {
          for(let y = 1; y &lt; app.offscreenCanvas.height; y += dimBlock)
          {
              var pixel = oContext.getImageData(x, y, 1, 1);
              vContext.fillStyle = &quot;rgb(&quot; + pixel.data[0]+ &quot;,&quot; +pixel.data[1]+ &quot;,&quot; +pixel.data[2]+ &quot;)&quot;;
              vContext.fillRect(x, y, x + dimBlock - 1, y + dimBlock - 1);
          }
      }
  }
  
  app.pixelate = function (step) {
      const oContext = app.offscreenCanvas.getContext(&quot;2d&quot;);
      const imageData = oContext.getImageData(0, 0, app.offscreenCanvas.width,
           app.offscreenCanvas.height);
      const data = imageData.data;
  
      for (let i = 0; i&lt;imageData.height;i+=step){
  
          const offsetLiniiAnterioare = i*(imageData.width*4);
          
          for(let j = 0; j&lt;imageData.width; j+=step){
  
              let pij = j * 4 + offsetLiniiAnterioare;
  
              const r = data[pij]; //red 
              const g = data[pij + 1]; //green
              const b = data[pij + 2]; //blue
  
              for(let k = 0; k&lt;step; k++)
                  for (let l = 0; l&lt;step; l++){
                      const kl = (i+k)*(imageData.width*4) + (j+l)*4;
                      data[kl] = r;
                      data[kl+1] = g;
                      data[kl+2] = b;
                  }
          } 
      }
  
      const vContext = app.visibleCanvas.getContext(&quot;2d&quot;);
      vContext.putImageData(imageData, 0, 0);
  }
  
  app.lighter = function (val) {
      const oContext = app.offscreenCanvas.getContext(&quot;2d&quot;);
      const imageData = oContext.getImageData(0, 0, 
          app.offscreenCanvas.width, app.offscreenCanvas.height);
      const data = imageData.data;
  
      for (let i = 0; i &lt; data.length; i += 4) {
          data[i] += val //red
          data[i + 1] += val //green
          data[i + 2] += val //blue
      }
      const vContext = app.visibleCanvas.getContext(&quot;2d&quot;);
      vContext.putImageData(imageData, 0, 0);
  }
  
  app.darker = function (val) {
      const oContext = app.offscreenCanvas.getContext(&quot;2d&quot;);
      const imageData = oContext.getImageData(0, 0, 
          app.offscreenCanvas.width, app.offscreenCanvas.height);
      const data = imageData.data;
  
      for (let i = 0; i &lt; data.length; i += 4) {
          data[i] -= val //red
          data[i + 1] -= val //green
          data[i + 2] -= val //blue
      }
      const vContext = app.visibleCanvas.getContext(&quot;2d&quot;);
      vContext.putImageData(imageData, 0, 0);
  }
  
  app.twochannels = function () {
      const oContext = app.offscreenCanvas.getContext(&quot;2d&quot;);
      const imageData = oContext.getImageData(0, 0, 
          app.offscreenCanvas.width, app.offscreenCanvas.height);
      const data = imageData.data;
  
      for (let i = 0; i &lt; data.length; i += 4) {
          data[i + 2] = data[i + 1];
      }
  
      const vContext = app.visibleCanvas.getContext(&quot;2d&quot;);
      vContext.putImageData(imageData, 0, 0);
  }
  
  app.blue = function () {
      const oContext = app.offscreenCanvas.getContext(&quot;2d&quot;);
      const imageData = oContext.getImageData(0, 0, 
          app.offscreenCanvas.width, app.offscreenCanvas.height);
      const data = imageData.data;
  
      for (let i = 0; i &lt; data.length; i += 4) {
          data[i] = 0; //red
          data[i + 1] = 0; //green
          //data[i + 2] = 0; //blue
      }
      const vContext = app.visibleCanvas.getContext(&quot;2d&quot;);
      vContext.putImageData(imageData, 0, 0);
  }
  
  app.green = function () {
      const oContext = app.offscreenCanvas.getContext(&quot;2d&quot;);
      const imageData = oContext.getImageData(0, 0, 
          app.offscreenCanvas.width, app.offscreenCanvas.height);
      const data = imageData.data;
  
      for (let i = 0; i &lt; data.length; i += 4) {
          data[i] = 0; //red
          //data[i + 1] = 0; //green
          data[i + 2] = 0; //blue
      }
      const vContext = app.visibleCanvas.getContext(&quot;2d&quot;);
      vContext.putImageData(imageData, 0, 0);
  }
  
  app.red = function () {
      const oContext = app.offscreenCanvas.getContext(&quot;2d&quot;);
      const imageData = oContext.getImageData(0, 0, 
          app.offscreenCanvas.width, app.offscreenCanvas.height);
      const data = imageData.data;
  
      for (let i = 0; i &lt; data.length; i += 4) {
          //const r = data[i];
          //const g = data[i + 1];
          //const b = data[i + 2];
          
          //data[i] =  r;
          data[i + 1] = 0; //green
          data[i + 2] = 0; //blue
      }
      const vContext = app.visibleCanvas.getContext(&quot;2d&quot;);
      vContext.putImageData(imageData, 0, 0);
  }
  
  app.invert = function () {
      const oContext = app.offscreenCanvas.getContext(&quot;2d&quot;);
      const imageData = oContext.getImageData(0, 0, 
          app.offscreenCanvas.width, app.offscreenCanvas.height);
      const data = imageData.data;
  
      for (let i = 0; i &lt; data.length; i += 4) {
          const r = data[i];
          const g = data[i + 1];
          const b = data[i + 2];
  
          data[i] = 255 - data[i];
          data[i + 1] = 255 - data[i + 1];
          data[i + 2] = 255 - data[i + 2];
      }
      const vContext = app.visibleCanvas.getContext(&quot;2d&quot;);
      vContext.putImageData(imageData, 0, 0);
  }
  
  app.sephia=function(){
      const oContext=app.offscreenCanvas.getContext(&quot;2d&quot;);
      const imageData=oContext.getImageData(0,0,app.offscreenCanvas.width,
          app.offscreenCanvas.height);
      const data=imageData.data;
      
      for(let i=0;i&lt;data.length;i+=4){
          const R=data[i];
          const G=data[i+1];
          const B=data[i+2];
  
          //const average=Math.round((r+g+b)/3);
          const tr = 0.393*R + 0.769*G + 0.189*B
          const tg = 0.349*R + 0.686*G + 0.168*B
          const tb = 0.272*R + 0.534*G + 0.131*B
  
          //data[i] = 1000; -&gt; 255
  
          /*if (tr &gt; 255) 
              data[i] = 255 
          else */
          data[i] = tr;
          
          /*if (tg &gt; 255) 
              data[i+1] = 255 
          else*/ data[i+1] = tg;
  
          /*if (tb &gt; 255) 
              data[i+2] = 255 
          else*/ data[i+2] = tb;
      }
      const vContext=app.visibleCanvas.getContext(&quot;2d&quot;);
      vContext.putImageData(imageData,0,0);
  }
  
  app.threshold = function(threshold){
      const oContext=app.offscreenCanvas.getContext(&quot;2d&quot;);
      const imageData=oContext.getImageData(0,0,app.offscreenCanvas.width,app.offscreenCanvas.height);
      const data=imageData.data;
      for(let i=0;i&lt;data.length;i+=4){
          const r=data[i];
          const g=data[i+1];
          const b=data[i+2];
          const v = (0.2126*r + 0.7152*g + 0.0722*b &gt;= threshold) ? 255 : 0;
           
          data[i]=data[i+1]=data[i+2]=v;
      }
      const vContext=app.visibleCanvas.getContext(&quot;2d&quot;);
      vContext.putImageData(imageData,0,0);
  }
  
  app.grayscale = function(){
  
      const oContext = app.offscreenCanvas.getContext(&quot;2d&quot;);
      const imageData = oContext.getImageData(0, 0, 
          app.offscreenCanvas.width, app.offscreenCanvas.height);
      const data = imageData.data;
      for(let i=0; i&lt;data.length; i+=4){
          let r = data[i]; //red
          let g = data[i+1]; //green
          let b = data[i+2]; //blue
  
          const average = Math.round((r + g + b) / 3);
  
          data[i] = data[i+1] = data[i+2] = average;
          //r = g = b = average;
      }
  
      const vContext = app.visibleCanvas.getContext(&quot;2d&quot;);
      vContext.putImageData(imageData, 0, 0);
  }
  
  app.load = function(){
  
      app.visibleCanvas = document.getElementById(&quot;visibleCanvas&quot;);
      app.offscreenCanvas = document.createElement(&quot;canvas&quot;); //300*150
  
  
      /*document.getElementById(&quot;btnDownload&quot;).addEventListener(&quot;click&quot;, function(e)
      {
          const dataURL=app.visibleCanvas.toDataURL(&quot;image/png&quot;);
          console.log(dataURL);
          e.target.setAttribute(&quot;href&quot;, dataURL);
      });*/
      
      document.getElementById(&quot;btnDownload&quot;).addEventListener(&quot;click&quot;,()=&gt;{
          const dataUrl=app.visibleCanvas.toDataURL();
          const link=document.createElement('a');
          link.download='image.png';
          link.href=dataUrl;
          link.click();
      });
  
  
      const buttons = document.querySelectorAll(&quot;button[data-effect]&quot;);
      for(let i=0; i&lt;buttons.length; i++){
          buttons[i].addEventListener(&quot;click&quot;, function(ev){
              //ev.target
              //buttons[i]
              //this
              const effect = ev.target.dataset.effect;
              app.changeEffect(effect);
          })
      }
  
      document.getElementById(&quot;fileBrowser&quot;).addEventListener(&quot;change&quot;, function(ev){
          const files = ev.target.files;
  
          const reader = new FileReader();
          reader.addEventListener(&quot;load&quot;, function(ev){
              const dataUrl = ev.target.result;
  
              const img = document.createElement(&quot;img&quot;);
              img.addEventListener(&quot;load&quot;, function(ev){              
                  //redimensionare canvas
                  app.offscreenCanvas.width=img.naturalWidth;
                  app.offscreenCanvas.height=img.naturalHeight;
  
                  //desenare imagine pe offscreenCanvas
                  const oContext = app.offscreenCanvas.getContext(&quot;2d&quot;);
                  oContext.drawImage(ev.target, 0, 0);             
  
                  //desenare pe canvas vizibil
                  app.currentEffect = &quot;normal&quot;;
                  app.draw();
              });
              img.src = dataUrl;
          });
          reader.readAsDataURL(files[0]);
      });
  }
  
  //Testeaza daca suporta serviceWorker
  window.onload = () =&gt; {
      if('serviceWorker' in navigator){
          navigator.serviceWorker.register('C:\Users\andra\Desktop\Multimedia\Tema 3\serviceworker.js')
          .then((registration) =&gt; {
              console.log(&quot;Service worker registered&quot;);
              return registration;
          })
          .catch( (err) =&gt; {
              console.error(&quot;Unable to register the service worker. &quot;, err);
          })
      }
  }
  
  Serviceworker:
  
  const cacheName = &quot;image-editor&quot;
  //const filesToCache = ['/Tema 3/canvas_image_editor_to_pwa.html', '/Tema 3/canvas_image_editor_to_pwa.js']
  
  //Porneste serviceworker si cache-ul aplicatiei
  self.addEventListener('install', (e) =&gt; {
      e.waitUntil(
          caches.open(cacheName).then((cache) =&gt; {
              //return cache.addAll(filesToCache);
              return cache.addAll(['/Tema 3/',
              '/Tema 3/canvas_image_editor_to_pwa.html',
              '/Tema 3/canvas_image_editor_to_pwa.js']);
          })
      );
  });
  
  //Aplicatia se foloseste de aceste resurse cand e offline
  self.addEventListener('fetch', (e) =&gt; {
      e.respondWith(caches.match(e.request).then((response) =&gt; {
          return response || fetch(e.request);
      }));
  });
  
  manifest.json:
  
  {
      &quot;name&quot;: &quot;Canvas image editor&quot;,
      &quot;short_name&quot;: &quot;Image editor&quot;,
      &quot;lang&quot;: &quot;en-US&quot;,
      &quot;background_color&quot;: &quot;white&quot;,
      &quot;theme_color&quot;: &quot;white&quot;,
      &quot;display&quot;: &quot;standalone&quot;,
      &quot;start_url&quot;: &quot;/Tema 3/canvas_image_editor_to_pwa.html&quot;
  }
  </code></pre>