Register Service Worker example with Bidirectional communication between App UI and SW 24.12.24

```js
window.onload = async function () {
  var registration = await register_sw();
  const button = document.querySelector("#btn_contact_send");
  if (button) {
    button.addEventListener("click", (event) => {
      console.log("...button clicked");
      registration.active.postMessage("Hello from App");
    });
  }

navigator.serviceWorker.addEventListener("message", (event) => {
    console.log("...got message from SW: ");
    console.log(event.data.msg);
  });
};

const refresh_btn = document.querySelector(".refresh");
        refresh_btn.addEventListener("click", () => {
          log.info("update service worker registered");
          registration.unregister().then((boolean) => {
            window.location.reload(true);
          });
        });

window.addEventListener("beforeinstallprompt", (event) => {
          log.info("...PWA can be installed");
          event.preventDefault();
          install_prompt = event;
          install_button.classList.remove("is-hidden");
          install_button.addEventListener("click", () => {
            console.log("...install app btn click");
            install_prompt.prompt();

install_prompt.userChoice.then((choice_result) => {
              if (choice_result.outcome === "accepted") {
                console.log("User accepted the A2HS install app prompt");
              } else {
                console.log("User dismissed the A2HS install app prompt");
              }
              install_prompt = null;
            });
          });
        });

return registration;
      }
    } catch (error) {
      console.error(`Registration failed with ${error}`);
    }
  }
};
```

## My sw.js file
```js
const app_name = "psi_store";

const assets = [
  "./",
  "./index.html",
  "./offline.html",
  "./exchange.html",
  "./how_it_works.html",
  "./about.html",
  "./impressum.html",
  "./contact.html",
  "./exchange_frame.html",
  "./favicon.png",
  "./js/app.js",
  "./js/exchange.js",
  "./css/psi.css",
  "./img/spelltrainer_icon.png",
  "./img/spelltrainer_landing.png",
  "./img/spelltrainer_logo.png",
  "./img/screenshot.png",
  "./node_modules/bulma/css/bulma.min.css",
  "./node_modules/log2textarea/dist/log2textarea.js",
  "./node_modules/hc-offcanvas-nav/dist/hc-offcanvas-nav.js",
  "./node_modules/hc-offcanvas-nav/dist/hc-offcanvas-nav.css",
];

self.addEventListener("install", (installEvent) => {
  self.skipWaiting();
  installEvent.waitUntil(
    caches.open(app_name).then((cache) => {
      return Promise.all(
        assets.map((file) =>
          cache
            .add(file)
            .catch((err) => console.error(`..failed to cache ${file}:`, err)),
        ),
      );
    }),
  );
});

self.addEventListener("activate", function (event) {
  //console.log('[Service Worker] Activating Service Worker ....', event);
  event.waitUntil(
    caches.keys().then(function (keyList) {
      return Promise.all(
        keyList.map(function (key) {
          //console.log('key: '+ key);
          if (key !== app_name && key !== app_name) {
            return caches.delete(key);
          }
        }),
      );
    }),
  );
  return self.clients.claim();
});

/*
self.addEventListener('fetch', function(event) {
    console.log("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx");
    console.log(event.request.url);    
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        if (response) {
          return response;
        } else {
          return fetch(event.request)
            .then(function(res) {
              return caches.open(app_name)
                .then(function(cache) {
                  cache.put(event.request.url, res.clone());
                  return res;
                })
            })
            .catch(function(err) {

});
        }
      })
  );
});

*/
self.addEventListener("fetch", (e) => {
  //console.log("..intercept fetch from the sw");
  //console.log(e.request.destination);
  //console.log(e.request.method);
  //console.log(e.request.mode);
  self.console.log(e.request.url);

if (
    e.request.url.endsWith("exchange_frame.html") &&
    e.request.mode === "navigate"
  ) {
    //console.log(e.request.url);
    e.respondWith(
      (async function () {
        let d = await aget_api("https://www.floatrates.com/daily/usd.json");

let html = '<div class="table-container">';
        html += '<table class="table">';
        html += "<thead>";
        html += "<tr>";
        html += '<th><abbr title="Code">Code</abbr></th>';
        html += '<th><abbr title="name">Name</abbr></th>';
        html += '<th><abbr title="Rate">Rate</abbr></th>';
        html += "</tr>";
        html += "</thead>";

html += "<tfoot>";
        html += "<tr>";
        html += '<th><abbr title="Code">Code</abbr></th>';
        html += '<th><abbr title="name">Name</abbr></th>';
        html += '<th><abbr title="Rate">Rate</abbr></th>';
        html += "</tr>";
        html += "</tfoot>";

html += "<tbody>";
        for (const i in d) {
          if (d.hasOwnProperty(i)) {
            html += "<tr>";
            html += "<td>" + d[i]["code"] + "</td>";
            html += "<td>" + d[i]["name"] + "</td>";
            html += "<td>" + d[i]["rate"] + "</td>";
            html += "</tr>";
          }
        }
        html += "</body>";
        html += "</table>";
        html += "</div>";

async function aget_api(url) {
  //console.log("...try to get data");
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`Response status: ${response.status}`);
    }
    const json = await response.json();
    //console.log("...got data");
    return json;
  } catch (error) {
    //console.error(error.message);
    return error;
  }
}

self.addEventListener("sync", (e) => {
  if (e.tag === "sync-posts") {
    e.waitUntil(
      // Code to send queued posts to the server
      send_contact(),
    );
  }
});

function send_contact() {
  console.log("...send_contact");
  // Implementation for sending queued posts to the server
  /*
  return fetch('/api/send-queued-posts', {
    method: 'POST',
    body: JSON.stringify({ posts: queuedPosts }),
    headers: {
      'Content-Type': 'application/json',
    },
    });
    */
}

self.addEventListener("push", (event) => {
  const data = event.data.json();

const options = {
    body: data.body,
    icon: "/images/icon.png",
    badge: "/images/badge.png",
  };

event.waitUntil(self.registration.showNotification(data.title, options));
});

self.addEventListener("notificationclick", (event) => {
  event.notification.close();
  event.waitUntil(clients.openWindow(event.notification.data.url));
});

addEventListener("message", (event) => {
  message(event);
});

async function message(event) {
  console.log("...got message from App ");
  console.log(event.data);
  const client = await self.clients.get(event.source.id);

client.postMessage({ msg: "Hello from SW!" });
}

```

https://developer.mozilla.org/en-US/docs/Web/API/Client/postMessage

Anonymous

Register Service Worker example with Bidirectional communication between App UI and SW 24.12.24

Information Epoch 1766502309