Cordova + Service Workers - I this possible?

cordova
1

I’m trying get a remote hybrid cordova app to work with service workers.
My service worker (and bulk of ionic app) is being loaded from a server on the web, and it seems to work OK (caching of the js/css/html etc), apart from when I try to access the cordova.js which is being served from localhost.

I’ve read lots on this and have tried many things, but whenever I run up the app a second time the call to load https://localhost/cordova.js fails with TypeError: Failed to fetch.

Has anyone managed to get a sw working with this type of setup?
Ta, Todd

2

Posting the twitter thread regarding this…

TL;DR: In hybrid apps, the service worker will silently fail, as the resources are not loaded over an HTTPS connection. This is part of the service worker spec.

I will note, that it does not cause any runtime errors in the app. I’ve shipped a few apps that have a service worker logic in them and while it does not do anything on the native platforms, it doesn’t hurt it either.

3

I couldn’t take “no” for an answer so went on a hunt to see if I could code my way out of this.
I had initial luck with manually fetching and adding items (https://localhost/cordova.js and the plugin files) to the cache the Service Worker uses. I did this on first run up and the 2nd run up (even if offline) worked… so some good progress. Weirdly on subsequent run ups some (most) of the manually cached items were removed and so startups did not complete successfully.

I then looked into if I could bypass the SW completely for calls to localhost, and what do you know, it seems to work. Essentially in the SW’s fetch handler I have a conditional clause to do nothing if it spots localhost in the url. This has the affect that SW can’t find a fetch handler that takes care of the request and then the browser makes the call to fetch the asset just as if there were no SW at all.

I have tested this for both online/offline starts, and made sure I can access cordova and some of the plugins, and all seems to run just fine. Note, all testing so far is on Android.

An example of the code I used is as followa (left an explicit “do nothing” comment in for clarity);

 self.addEventListener('fetch', event => {
        console.log('Fetch event for ', event.request.url);
        if (event.request.url.includes("localhost")) {
            // Do Nothing
        } else {
        event.respondWith(
          caches.match(event.request, {
           // ... do the rest of the SW handling

I’d be interested to hear if other folk had tried this and then had any issues with it.