CODEWITHSUNDEEP
javascriptweb-servicescachingservice-worker
Austin
Austin

Reputation: 1627

JS Service Worker running on pages I don't want it to run on

I just started trying to use service workers to cache files from my web server. I'm using the exact code that google suggests HERE. I uploaded the service worker script to my sites root folder and have included a link to it in the pages I want the service worker to cache files on.

I was under the impression that the service worker only caches files that are in the urlsToCache variable, and the service worker would only work on pages where the service worker script is called (linked to).

I have several pages on my site that I don't want the service worker to do anything on. However, it seems that it's still being referenced somehow. The pages in question do not contain a link to my service worker script at all. I've noticed that each time I run an AJAX command using the POST method I receive the following error in my console:

Uncaught (in promise) TypeError: Request method 'POST' is unsupported

at service-worker.js:40

at anonymous

line 40 is this snippet of code: cache.put(event.request, responseToCache);

The url my AJAX call is pointing to does not contain a link to my service worker script either.

So my question is a two parter.

1.) Does anyone understand the error message I'm receiving and know how to fix it?

2.) Why is my service worker script running on pages that don't even link to the script in the first place?

Here is the full service worker script I'm using:

var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = [
    'assets/scripts/script1.js',
    'assets/scripts/script2.js',
    'assets/scripts/script3.js'
];

self.addEventListener('install', function(event) {
   // Perform install steps
     event.waitUntil(
         caches.open(CACHE_NAME)
         .then(function(cache) {
              console.log('Opened cache');
              return cache.addAll(urlsToCache);
         })
     );
});


self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request)
        .then(function(response) {
            if (response) {
                return response;
            }
        var fetchRequest = event.request.clone();

        return fetch(fetchRequest).then(
            function(response) {
            // Check if we received a valid response
                if(!response || response.status !== 200 || response.type !== 'basic') {
                     return response;
                }

                var responseToCache = response.clone();

                caches.open(CACHE_NAME)
                .then(function(cache) {
                     cache.put(event.request, responseToCache);
                });

                return response;
           }
       );
       })
   );
});

Upvotes: 1

Views: 1473

Answers (1)

Stef Chäser
Stef Chäser

Reputation: 2058

Once a service worker is installed it runs independently of your website, means all requests will go through the fetch-eventhandler, your service worker controls also the other pages.

Not only the urlsToCache are cached, the service worker also caches responses on the fly as soon as they were fetched in the fetch-eventhandler (line 38-41) This also leads to the answer for your first question. Your code caches all responses independent of the http method, but as the error message says http POST response cannot be cached.

Upvotes: 2

Related Questions