service_worker icon indicating copy to clipboard operation
service_worker copied to clipboard

TypeError: null: type 'JSNull' is not a subtype of type 'Object' (simple repro using stock example project)

Open andynewman10 opened this issue 11 months ago • 1 comments

I am getting a TypeError exception when I use postMessage.

Steps to reproduce the issue:

  1. Import the service_worker repo in VS Code
  2. Open the example project and modify the sw.dart code to look like:
...
onActivate.listen(ExtendableEvent event) {
  // add this line
  ServiceWorkerGlobalScope.self.clients.claim();
}
onFetch.listen(FetchEvent event) {
  ...
  console.log('Fetch request for ...');
  // add this line
  event.client.postMessage('test');
}
...
  1. Start a debug session (I use Chrome, Flutter 3.19.3, VS Code 1.87.2, Dart tools 3.84.0 on Windows 11)
  2. A web page will be open and display Your Dart app is running. Open your Developer console to see details
  3. Open the Chrome DevTools console
  4. Observe that the following exception occurred:
Uncaught TypeError: null: type 'JSNull' is not a subtype of type 'Object': core_patch.dart:278
at Object.wrapException (js_helper.dart:1196:37)
at Rti._asObject [as _as] (rti.dart:1463:3)
at main_closure1.call$1 (service_worker_api.dart:1110:39)
at _RootZone.runUnaryGuarded$1$2 (zone.dart:1594:9)
at _BroadcastSubscription._sendData$1 (stream_impl.dart:339:5)
at _BroadcastSubscription._add$1 (stream_impl.dart:271:7)
at _SyncBroadcastStreamController._sendData$1 (broadcast_stream_controller.dart:377:7)
at callbackToStream_closure.call$1 (broadcast_stream_controller.dart:244:5)
at Object.Primitives_applyFunction (js_helper.dart:921:11)
at _callDartFunctionFast (core_patch.dart:88:23)

The fetch event handler is indeed called (you will see Fetch request for ... in the console), but the postMessage line raises an exception, so it is not possible to communicate something from the SW back to the main page.

andynewman10 avatar Mar 21 '24 10:03 andynewman10

It seems 'client' is no longer a valid property, if I trust this documentation: https://developer.mozilla.org/en-US/docs/Web/API/FetchEvent/clientId

The code raises no exception if I replace

event.client.postMessage('test');

with

ServiceWorkerGlobalScope.self.clients[event.clientId!].then((client) {
  client.postMessage('test');
});

andynewman10 avatar Mar 21 '24 13:03 andynewman10