PWA: Serviceworker unable to cache main .js script using Gradle's browserDevelopmentRun

JavaScript
1

Dear reader,

I have recently been tinkering with a simple PWA and wanted to try out using a ServiceWorker in order for it to run offline.
First, I created a main project and a seperate ServiceWorker project.
Both compile to .js Files. I copy the ServiceWorker’s generated .js file to the resources directory of the main project.
In order to start the application, I usually use browserDevelopmentRun.
The main project registers the ServiceWorker on startup.
The ServiceWorker sets up the cache and attempts to store already available files into it. This is done through Google’s workbox.

While running the compiled sources through other webservers or Gradle’s “browserProductionRun” worked out fine, running Gradle’s “browserDevelopmentRun” for the same project causes the ServiceWorker to fail storing the compiled main.js:
DOMException: Cache.addAll() encountered a network error

Used tools:

  • IntelliJ
  • Google’s workbox for the service worker
  • Basic Kotlin/React application
  • Gradle

Main project:

Main file:

import react.dom.render
import kotlinx.browser.document
import kotlinx.browser.window

fun main() {
window.navigator.serviceWorker
.register(“/ServiceWorker.js”)
.then { console.log(“Service worker registered!”) }
.catch { console.error(“Service worker registration failed: $it”) }

window.onload = {
    render(document.getElementById("root")) {
        child(Welcome::class) {
            attrs {
                name = "Kotlin/JS"
            }
        }
    }
}

}

build.gradle.kts:

plugins {
kotlin(“js”) version “1.5.10”
}

group = “me.user”
version = “1.0-SNAPSHOT”

repositories {
jcenter()
mavenCentral()
maven { url = uri(“https://maven.pkg.jetbrains.space/kotlin/p/kotlin/kotlin-js-wrappers”) }
}

dependencies {
testImplementation(kotlin(“test”))
implementation(“org.jetbrains:kotlin-react:17.0.1-pre.148-kotlin-1.4.30”)
implementation(“org.jetbrains:kotlin-react-dom:17.0.1-pre.148-kotlin-1.4.30”)
}

kotlin {
js(LEGACY) {
binaries.executable()
browser {
commonWebpackConfig {
cssSupport.enabled = true
}
}
}
}

The ServiceWorker:
Main file:

package serviceWorker

import org.w3c.dom.DedicatedWorkerGlobalScope
import org.w3c.workers.*

external val self: DedicatedWorkerGlobalScope

fun main() {
installServiceWorker()
}

val offlineContent = arrayOf(
“/”,
“/prototyp.js”
)

fun installServiceWorker() {
console.log(“installiere Serviceworker”)

precacheAndRoute(
    offlineContent
);

}

precacheAndRoute.kt:

@file:Suppress(
“INTERFACE_WITH_SUPERCLASS”,
“OVERRIDING_FINAL_MEMBER”,
“RETURN_TYPE_MISMATCH_ON_OVERRIDE”,
“CONFLICTING_OVERLOADS”
)
@file:JsModule(“workbox-precaching”)
@file:JsNonModule

package serviceWorker

import kotlin.js.*

external fun precacheAndRoute(entries: Array<String /* PrecacheEntry | String */>)

ServiceWorker’s gradle build file:

plugins {
kotlin(“js”)
}

group = “me.user”
version = “1.0-SNAPSHOT”

repositories {
jcenter()
mavenCentral()
}

dependencies {
testImplementation(kotlin(“test”))
// Workbox - Chrome Developers
//implementation(npm(“org.webjars.npm:workbox-precaching”,“5.1.3”,true))
implementation(npm(“workbox-precaching”,“6.1.5”,false))
implementation(npm(“workbox-runtime-caching”,“2.0.3”,false))
}

kotlin {
js(LEGACY) {
binaries.executable()
browser {
commonWebpackConfig {
cssSupport.enabled = true
}
}
}
}

For future debugging purposes, it is important to be able to run this through Gradle’s browserDevelopmentRun

Thanks in advance,
Me

2 Likes