title: PWA app retruns No matching service worker detected
body: <p>i have this error when i try to host pwa on github the pea works fine locally but not on github why??</p>
  <p>Failure reason</p>
  <blockquote>
  <p>No matching service worker detected. You may need to reload the page, or check that the scope of the service worker for the current page encloses the scope and start URL from the manifest.</p>
  </blockquote>
  <p>and this error in the console:</p>
  <blockquote>
  <p>A bad HTTP response code (404) was received when fetching the script.</p>
  </blockquote>
  <p>My repo name: PWAPP</p>
  <p>My project structure</p>
  <pre><code>+- index.html
  +- PWA *folder
  |  +- sw.js
  |  +- manifest.json
  +- icon *folder has png image
  </code></pre>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// service-worker.js 
  //////////////////////////////////////////////////
  
  var APP_PREFIX = 'ApplicationName_' // Identifier for this app (this needs to be consistent across every cache update)
  var VERSION = 'version_01' // Version of the off-line cache (change this value everytime you want to update cache)
  var CACHE_NAME = APP_PREFIX + VERSION
  var URLS = [ // Add URL you want to cache in this list.
    '/PWAPP/', // If you have separate JS/CSS files,
    '/PWAPP/index.html' // add path to those files here
  ]
  
  // Respond with cached resources
  self.addEventListener('fetch', function(e) {
    console.log('fetch request : ' + e.request.url)
    e.respondWith(
      caches.match(e.request).then(function(request) {
        if (request) { // if cache is available, respond with cache
          console.log('responding with cache : ' + e.request.url)
          return request
        } else { // if there are no cache, try fetching request
          console.log('file is not cached, fetching : ' + e.request.url)
          return fetch(e.request)
        }
  
        // You can omit if/else for console.log &amp; put one line below like this too.
        // return request || fetch(e.request)
      })
    )
  })
  
  // Cache resources
  self.addEventListener('install', function(e) {
    e.waitUntil(
      caches.open(CACHE_NAME).then(function(cache) {
        console.log('installing cache : ' + CACHE_NAME)
        return cache.addAll(URLS)
      })
    )
  })
  
  // Delete outdated caches
  self.addEventListener('activate', function(e) {
    e.waitUntil(
      caches.keys().then(function(keyList) {
        // `keyList` contains all cache names under your username.github.io
        // filter out ones that has this app prefix to create white list
        var cacheWhitelist = keyList.filter(function(key) {
          return key.indexOf(APP_PREFIX)
        })
        // add current cache name to white list
        cacheWhitelist.push(CACHE_NAME)
  
        return Promise.all(keyList.map(function(key, i) {
          if (cacheWhitelist.indexOf(key) === -1) {
            console.log('deleting cache : ' + keyList[i])
            return caches.delete(keyList[i])
          }
        }))
      })
    )
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* manifest.json */
  /* ---------------------------------------------- */
  
  {
      "name": "App Name",
      "short_name": "App",
      "start_url": "../",
      "icons": [
        {
          "src": "../icons/manifest-icon-192.png",
          "sizes": "192x192",
          "type": "image/png",
          "purpose": "maskable any"
        },
        {
          "src": "../icons/manifest-icon-512.png",
          "sizes": "512x512",
          "type": "image/png",
          "purpose": "maskable any"
        }
      ],
      "theme_color": "#3367D6",
      "background_color": "#3367D6",
      "display": "fullscreen",
      "orientation": "portrait"
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="ar" dir="rtl"&gt;
  
  &lt;head&gt;
    &lt;!-- META --&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;!-- Prograssive Web App --&gt;
    &lt;link rel="manifest" href="PWA/manifest.json"&gt;
    &lt;link rel="canonical" href="https://hasanqari.github.io/PWAPP/"&gt;
    &lt;!-- BS Style --&gt;
    &lt;link rel="stylesheet" href="asset/css/BScss/bootstrap.min.css"&gt;
    &lt;link rel="stylesheet" href="asset/css/BScss/bootstrap.css"&gt;
    &lt;!-- Main Style --&gt;
    &lt;link rel="stylesheet" href="asset/css/app.css"&gt;
    &lt;!-- App Icon --&gt;
    &lt;link rel="shortcut icon" href="res/img/icon.svg" type="image/x-icon"&gt;
    &lt;!-- Title --&gt;
    &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;main&gt;
      &lt;div id="content-area-start-page" class="container mb-5"&gt;
        &lt;div id="frame-start-page" class="text-center align-content-center flex-column mt-5 py-3 px-4" style="border: 3px solid #ccc; border-radius: 50%;"&gt;
          &lt;img id="logo-start-page" src="res/img/icon.svg" alt="logo" class="img-fluid" width="70%"&gt;
          &lt;h5 id="app-name-start-page" class="mb-3"&gt;App Name&lt;/h6&gt;
            &lt;p id="app-description-start-page"&gt;مرحبا بكم في [اسم التطبيق] سهل وسريع&lt;/p&gt;
            &lt;a id="btn-next-start-page" class="btn btn-primary" href=""&gt;التالي&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/main&gt;
  
    &lt;!-- BS Js --&gt;
    &lt;script src="asset/js/BSjs/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script src="asset/js/BSjs/bootstrap.js"&gt;&lt;/script&gt;
  
    &lt;!-- Main Js --&gt;
    &lt;script src="asset/js/app.js"&gt;&lt;/script&gt;
  
    &lt;!-- Extra Js --&gt;
    &lt;script&gt;
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('PWAPP/service-worker.js', {
            scope: '/PWAPP/'
          })
          // ('/service-worker.js')
          .then(function(registration) {
            console.log("success load");
            console.log(registration);
          })
          .catch(function(err) {
            console.log(err);
          });
      }
    &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>anybody can help me?</p>
  <p>thank you so mush</p>