Debugging serviceworker.js

WEB TMS WEB Core
1

I'm getting somewhat different results with my PWA from different browsers when I use "Add to home screen" and I don't know how to add logging to serviceworker.js to figure out what's happening since the mobile browsers have no developer console. Is there some method to pass messages from serviceworker.js to a log or file for inspection?

2

When you create a new PWA application from Delphi, it creates the application project with the default serviceworker.js file. You can do your further modifications or extensions on this file in your project.

3

I understand how to modify the file, but I don't know how to make it log information to other than the developer's console, which is not accessible in a mobile browser. Is that possible?

4

You could use a service like Sentry or StellarDS.io for logging

5

I'm sorry for being unclear. My app has a log:

procedure Log(const s: string);
begin
  CWRmainFrm.WebMemo2.Lines.Add(DateTimeToStr(now) + '--' + s);
  console.log(DateTimeToStr(now) + '--' + s);
end;

I would like to send messages from serviceworker.js to this log. I presume that this is possible, but (as a JS newbie) I don't know how to do that. How would I call my TCWRmainFrm.Log() method from serviceworker.js?

6

service workers run in a separate context and cannot directly access the DOM or the main thread’s functions.
You could try to send a message from the service worker and have the main app JS handle this message event.

Example Setup

1. Service Worker (e.g., sw.js):

// Send message to client(s)
self.addEventListener('push', function(event) {
  event.waitUntil(
    self.clients.matchAll().then(function(clients) {
      clients.forEach(function(client) {
        client.postMessage({
          type: 'CALL_FUNCTION',
          payload: { someData: 'Hello from SW!' }
        });
      });
    })
  );
});

2. Main JS (on the webpage)

// Register the service worker
navigator.serviceWorker.register('/sw.js').then(function(registration) {
  console.log('Service Worker registered:', registration);
});

// Listen for messages from the service worker
navigator.serviceWorker.addEventListener('message', function(event) {
  if (event.data.type === 'CALL_FUNCTION') {
    myFunctionFromMainJS(event.data.payload);
  }
});

function myFunctionFromMainJS(data) {
  console.log('Function called from Service Worker:', data);
  // Do something with the data...
}
7

IIUC, your example is designed to post a message to the developer console. The PWA Wizard's code already shows how to do that with, e.g., console.log("serviceworker installed"); I need a method for adding a line to the app's TWebMemo object as in my Log function above, which can be read on the mobile browser where the developer console is not available.

8

My example showed how you can use a message to notify from the service worker the main web HTML/JS. You define at this main HTML/JS level how you want to log. The use of console.log() in the main HTML/JS is just an example. Replace it by your own when need, like adding it to a memo.