service_worker
service_worker copied to clipboard
TypeError: null: type 'JSNull' is not a subtype of type 'Object' (simple repro using stock example project)
I am getting a TypeError
exception when I use postMessage.
Steps to reproduce the issue:
- Import the
service_worker
repo in VS Code - 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');
}
...
- Start a debug session (I use Chrome, Flutter 3.19.3, VS Code 1.87.2, Dart tools 3.84.0 on Windows 11)
- A web page will be open and display
Your Dart app is running. Open your Developer console to see details
- Open the Chrome DevTools console
- 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.
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');
});