Importing! service_worker breaks my app

[MikeMitterer]

Hi, I'm playing with your service_worker (Thanks for the lib) but unfortunately just importing service_worker/window.dart breaks my app. Very strange! I made a video to demonstrate the problem - see below (I had to ZIP it because GH does not accept MP4s anymore)

Here is the GH-Repo: https://github.com/MikeMitterer/dart-sunshine Master works but the test_cast_error branch fails: https://github.com/MikeMitterer/dart-sunshine/tree/test_cast_error

If you click on "Settings" it replaces the the "Content-Area" (https://goo.gl/HIegNL) with another view. (it replaces this area in DOM) (https://goo.gl/o6S9Ww)

dart_bug-service_worker.mp4.zip

[filiph]

Any chance you or any of your dependencies are using the dart:js interop? These don't mix well with package:js (which is what service_worker uses).

On Apr 29, 2017 01:19, "Mike Mitterer" [email protected] wrote:

Hi, I'm playing with your service_worker (Thanks for the lib) but unfortunately just importing service_worker/window.dart breaks my app. Very strange! I made a video to demonstrate the problem - see below (I had to ZIP it because GH does not accept MP4s anymore)

Here is the GH-Repo: https://github.com/MikeMitterer/dart-sunshine Master works but the test_cast_error branch fails: https://github.com/ MikeMitterer/dart-sunshine/tree/test_cast_error

If you click on "Settings" it replaces the the "Content-Area" ( https://goo.gl/HIegNL) with another view. (it replaces this area in DOM) ( https://goo.gl/o6S9Ww)

dart_bug-service_worker.mp4.zip https://github.com/isoos/service_worker/files/965993/dart_bug-service_worker.mp4.zip

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/isoos/service_worker/issues/3, or mute the thread https://github.com/notifications/unsubscribe-auth/AA4IpfVCJjAwJ6zm3sin5uPVmDgqnyCVks5r0vKkgaJpZM4NMMDG .

[isoos]

Mike: In the video, it seems that in one of your browsers it is working ok, while it is breaking in the other. Am I right with that? What is the difference between two?

Also, @filiph could be pointing to the root cause here, because it seems that your dart-material-design-lite library is using dart:js, and the error message in the console talks about MdlComponent's cast error.

[MikeMitterer]

@filiph Yup - you are right. I'm using dart:js in MDL/Dart - maybe that causes the problem. @isoos Sorry didn't mention that it works in Chromium/Dartium but fails in Chrome. To bad - I thought that I could provide an Android-Sunshine-Clone with Dart/MDL/Service_worker

[MikeMitterer]

I'm a bit lost now - I'cant switch to package:js because it doesn't provide JsObject.fromBrowserObject - any hints?

[isoos]

fromBrowserObject is now done a bit differently, and while the new way may require a bit more manual coding, the end result is faster to run.

You can access a JS value from the global scope like this:

@JS('window.navigator.serviceWorker')
external dynamic get navigatorContainer;

If you treat it untyped, you can use js_util's getProperty and callMethed functions to access it.

You can also treat them as typed with the @JS() annotation, similar to https://github.com/isoos/service_worker/blob/master/lib/src/js_facade/service_worker_api.dart

Unfortunately, in the service worker's case, these types collided with types in dart:html, and I needed to treat them untyped, but it should generally work for cases that are plain JS libraries.

Does this help you to get started?

[MikeMitterer]

Thanks, but this is done dynamically at runtime. I'm not using a JS-lib - I'm upgrading standard HTML-Elements. E.g. a

is upgraded to a MDLMaterialButton. This is done by adding an extra property to fromBrowserObject[query..div][MDL_PROP] = new MaterialButton() (pseudo-code)

The more I think about the problem the more I come to the conclusion that this is a bug in package:js. Casting form DartObjection to MdlComponent - what the heck??? I file a bug report.

[isoos]

@MikeMitterer: what is your plan on upgrading your lib to package:js?