Communicating between different tabs or windows in a web browser is super important for many reasons. Imagine you have several open tabs while shopping online. You put an item in your cart in one tab, and you want all the other tabs to know about it instantly. That's one of the reasons we need this kind of communication. Also, think about logging into a website like your bank account. If we log out in one tab, we'd want to be logged out in all the other tabs, too to keep everything safe. It's like making sure you lock all the doors when leaving your house. So, it's not just convenient; it also makes the web safer and more efficient for us.

What is the Broadcast Channel API?

The Broadcast Channel API is like a special communication tool for web browsers. It allows different tabs or windows in our browser to talk to each other. It's a way for them to share information instantly. Think of it as a secret chat system just for our browser. It helps web apps work together and stay in sync, making our online experience smoother.

How Broadcast Channel API works

Here's how it works in simple terms:

1. Create a Channel: We create a channel with a specific name, like cart_channel

2. Send Messages: In one tab, we can send a message (like "I added a new item to the cart!") to the cart_channel

3. Other Tabs Listen: All the other open tabs also tuned into the cart_channel can hear this message.

4. Instant Updates: So, when we add something to our cart in one tab, all the other tabs can instantly update to show the same thing. It's like magic!

Step-by-Step Guide: Using Broadcast Channel API

Now that we know how this API works, In this section we'll walk through the process of using the Broadcast Channel API step by step. In this article, we will use the Cart Example.

Step 1: Create a Broadcast Channel

To get started, create a javascript file broadcast.js and create a new instance of Broadcast Channel API. This channel serves as the communication medium. We can give it a specific name, like 'chat_channel'.

const cartChannel = new BroadcastChannel('cart_channel');

Here we created a new Broadcast Channel named cart_channel using new BroadcastChannel('cart_channel'). This sets up the communication channel.

Step 2: Send Cart Updates to Tabs

We can send cart updates through the Broadcast Channel, ensuring that all tabs or windows are synchronized. For instance, when a user adds an item to their cart, we can broadcast the update.

function addToCart(itemName) {
    // do actions when adding items to cart
    const updateMessage = `Added "${itemName}" to the cart.`;
    updateCartUI(updateMessage);
    cartChannel.postMessage(updateMessage);
}

In this step:

• We define a function addToCart takes the itemName as a parameter.

• Inside the function, we update our active tab UI by calling updateCartUI(updateMessage) and send a message to other tabs connected to the cart_channel using cartChannel.postMessage(updateMessage) and tell them to update themselves with a new cart item.

Step 3: Receive Cart Updates

To receive cart updates in other tabs or windows, set up an event listener for the Broadcast Channel. When a cart update is broadcasted, this listener will capture it.

cartChannel.addEventListener('message', (event) => {
    const receivedUpdate = event.data;
    updateCartUI(receivedUpdate);
});

In this step:

• We added an event listener to the cart_channel using cartChannel.addEventListener('message', (event) => { ... }).

• When a cart update is received, the event handler function is called with the received data event.data, which contains the update message.

• We can then call a function like updateCartUI to update the cart UI with the received update.

Now our broadcast.js file should look like this

// Step 1: Create a Broadcast Channel
const cartChannel = new BroadcastChannel("cart_channel");

// Step 2: Send Cart Updates
function addToCart(itemName) {
  const updateMessage = `Added "${itemName}" to the cart.`;
  updateCartUI(updateMessage);
  cartChannel.postMessage(updateMessage);
}

// Step 3: Receive Cart Updates
cartChannel.addEventListener("message", (event) => {
  const receivedUpdate = event.data;
  updateCartUI(receivedUpdate);
});

// Function to update the cart UI
function updateCartUI(updateMessage) {
  const cartElement = document.getElementById("cart");
  const newItemElement = document.createElement("p");
  newItemElement.textContent = updateMessage;
  cartElement.appendChild(newItemElement);
}

Live Example and Testing

To test this real-time cart updating application follow these steps:

1. Open this URL in two or three tabs on your browser.

2. Click on any button (for example Add Product A to Cart) to add an item to the cart

3. Go to another tab, you should see the cart is added on UI here as well in real-time. You can check this on another browser window as well.

Helpful Links

Live URL 👉 https://real-time-cart-update.naimur.repl.co/

Full code on Github 👉 https://github.com/nsourov/broadcast-api

BroadcastChannel API MDN documentation 👉 https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API

Sometimes, our internet connection isn't reliable or completely absent. In those moments, we still want to use websites and apps. This is where offline web pages come in handy. They allow us to access content even when we're not online.

Introducing Service Workers and Cache Storage

Service Workers are like web helpers. It work behind the scenes to make offline web pages possible. It can save website stuff (like pictures, fonts and other assets) on our device so we can see them even without the internet. It also control what our web page does when it's online.

Cache Storage is like a storage room for web things. It keeps all the website stuff we might need, organised neatly. Service Workers can go there and grab what's needed for page to load offline. So, when we're not online, we still get to see and use web pages.

Let's explore how to make a webpage available offline by doing some simple coding. We'll save an HTML file and an image so that users can still see them, even when they are not connected to the internet.

Step 1: Getting Started First, Let's create a folder for our project and put main HTML file index.html and the image we want to use cat.jpeg inside it.

Step 2: Registering the Service Worker Now, let's register the Service Worker in index.html file. Place the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Hi There!</h1>

    <img src="./cat.jpeg" width="300" height="300" />

    <script>
      async function registerServiceWorker() {
        if ("serviceWorker" in navigator) {
          try {
            const registration = await navigator.serviceWorker.register(
              "sw.js"
            );
            console.log(
              "Service Worker registered with scope:",
              registration.scope
            );
          } catch (error) {
            console.error("Service Worker registration failed:", error);
          }
        }
      }

      registerServiceWorker();
    </script>
  </body>
</html>

In this code we check if the browser supports Service Workers.

Step 3: Writing the Service Worker Code Now, let's create a JavaScript file called sw.js in project folder. This file will contain the code for Service Worker.

const cacheName = "offline-cache-v1";
const cacheUrls = ["index.html", "cat.jpeg"];

// Installing the Service Worker
self.addEventListener("install", async (event) => {
  try {
    const cache = await caches.open(cacheName);
    await cache.addAll(cacheUrls);
  } catch (error) {
    console.error("Service Worker installation failed:", error);
  }
});

// Fetching resources
self.addEventListener("fetch", (event) => {
  event.respondWith(
    (async () => {
      const cache = await caches.open(cacheName);

      try {
        const cachedResponse = await cache.match(event.request);
        if (cachedResponse) {
          console.log("cachedResponse: ", event.request.url);
          return cachedResponse;
        }

        const fetchResponse = await fetch(event.request);
        if (fetchResponse) {
          console.log("fetchResponse: ", event.request.url);
          await cache.put(event.request, fetchResponse.clone());
          return fetchResponse;
        }
      } catch (error) {
        console.log("Fetch failed: ", error);
        const cachedResponse = await cache.match("index.html");
        return cachedResponse;
      }
    })()
  );
});

THere's what's happening in the code:

• We give a name to our cache (cacheName) and list the URLs (cacheUrls) we want to store for offline use.

• In the "install" part, we prepare our cache and add the URLs to it.

• We open the cache and attempt to match the request with the cached responses.

• If a cached response is found, it's returned. If not, we fetch the resource from the network, cache it for future use, and return the network response.

• In case of any errors during the fetch process, we handle it by returning a cached version of "index.html" to ensure the user still sees something.

Step 4: Testing our Offline-Friendly webpage To check if the page works offline:

• Open the page while the device is online to make sure it loads correctly, including the image.

• Disconnect from the internet (turn off Wi-Fi or unplug network cable).

• Reload the page. We should still see the page, including the image, even though there's no internet.

We can also test from the chrome browser, here's the steps:

• Open the page while the device is online

• Open devtools in chrome browser and go to the Application tab

• Click on Service Workers from the sidebar and check the Offline option

• Reload the page and we can see the contents loading offline

We've now created a webpage that can work offline using Service Workers. This technique can be expanded to store more things and make websites robust even when there's no internet.

Full Code 👉 https://github.com/nsourov/offline-web-page