Need to bind strategies handle method

[lucasecdb]

Library Affected:
workbox-strategies

Browser & Platform:
Not applicable.

Issue or Feature Request Description:
I've noticed while developing using the v5.0.0-alpha.2 that you need to manually call .bind() on the strategies handle method, since they are normal JavaScript classes methods, making the service worker code a little more bloated than it should be.

Here is an example of what I'm trying to say:

import { StaleWhileRevalidate } from 'workbox-strategies'
import { registerRoute } from 'workbox-routing'

const assetsHandler = new StaleWhileRevalidate({
  cacheName: 'static-resources',
})

registerRoute(JS_CSS_REGEX, assetsHandler.handle.bind(assetsHandler))

You can see that the assetsHandler.handle.bind(assetsHandler) could become a little annoying to write when you have several registerRoute callbacks combined with multiple configurations for different routes (since you'll have to extract the instance of the strategy to a variable and call .bind on the handle method).

I'm proposing to change the handle method on the strategies classes to use an arrow function or to manually bind them in the constructor of the class so the DX could be a little better.

[philipwalton]

Yeah, we can definitely do this.

Just to confirm though, are you saying you didn't need to bind in v4? Looking at the v4 code it doesn't look like we ever bound the handle() or the makeRequest() methods.

[lucasecdb]

I was using the GenerateSW from webpack-workbox-plugin in v4, so I don't know :-/

I only started using the v5 alpha because I wanted to add some extra logic in my service worker (using the InjectManifest) and wanted the file to be in TypeScript.

[philipwalton]

Hmmm, after thinking about this a bit more, it occurred to me that I've never had this problem and I import the strategy classes exactly the same way you do.

Did you try passing the strategy class instance directly to registerRoute()? It should accept both a function or an object with a handle method.

E.g. did you try this:

registerRoute(JS_CSS_REGEX, assetsHandler)

Instead of this:

registerRoute(JS_CSS_REGEX, assetsHandler.handle)

Or this?

registerRoute(JS_CSS_REGEX, assetsHandler.handle.bind(assetsHandler))

[lucasecdb]

yeah, I did try that, but I think the typings for the registerRoute changed in v5 to only accept the function, right?

I'm getting this TypeScript error:

src/serviceWorker.ts:79:29 - error TS2345: Argument of type 'StaleWhileRevalidate' is not assignable to parameter of type 'RouteHandlerCallback'.
  Type 'StaleWhileRevalidate' is not assignable to type 'RouteHandlerCallback'.
    Type 'StaleWhileRevalidate' provides no match for the signature '({ url, request, event, params }: RouteHandlerCallbackOptions): Promise<Response>'.

79 registerRoute(JS_CSS_REGEX, assetsHandler)
                               ~~~~~~~~~~~~~