Browser Window Communication Channel via PostMessage API

Resolve Bottlenecks,
Find Innovative SolutionsGenerate Solutions

Solution Overview

Problem

Conventional methods for data communication between multiple browser windows, such as localStorage, face limitations including storage capacity constraints and the inability to communicate across browser windows of different origins, degrading user experience by reducing data exchange speed.

Innovation Solution

A method and system for real-time communication between browser windows by creating a communication channel using APIs between a parent and child browser window, enabling live data transfer without storage limits and allowing cross-origin communication through PostMessage API.

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Quantity of substance

If localStorage is used for data communication between multiple browser windows, then data storage is enabled, but storage capacity limits the number of browser windows that can communicate at any time

Engineering Contradiction:

Improvenumber of browser windowsVSAvoidstorage capacity

Core Design Contradiction:

Quantity of substanceVSReliability

Solution Approach 1:

The patent introduces a communication channel as an intermediary mechanism between browser windows, replacing localStorage's direct storage-based communication. This channel enables real-time data exchange without being constrained by storage capacity limits, allowing unlimited numbers of browser windows to communicate simultaneously.

Inventive Principle:

Principle #24Intermediary (Mediator)

Solution Approach 2:

The patent replaces the mechanical storage-based communication system (localStorage) with a communication channel system that operates on different principles. Instead of storing data and retrieving it later, the channel enables direct real-time transmission of data between windows, eliminating storage capacity constraints.

Inventive Principle:

Principle #28Mechanics substitution (Replace mechanical system)

2Productivity

If localStorage is used for data communication, then data exchange is enabled, but data exchange speed is reduced due to storage retrieval operations

Engineering Contradiction:

Improvedata exchange speedVSAvoidtime for retrieving and presenting information

Core Design Contradiction:

ProductivityVSLoss of time

Solution Approach 1:

The communication channel is established in advance between browser windows, preparing a direct transmission path before data needs to be exchanged. This preliminary setup eliminates the need for subsequent storage retrieval operations, enabling immediate data transfer when needed.

Inventive Principle:

Principle #10Preliminary action

Solution Approach 2:

The patent replaces the storage-retrieve mechanism with a direct communication channel mechanism. Data is transmitted directly through the channel rather than being stored and retrieved, significantly reducing the time required for data exchange and improving overall productivity.

Inventive Principle:

Principle #28Mechanics substitution (Replace mechanical system)

3Adaptability or versatility

If localStorage is used for data communication, then same-origin browser windows can communicate, but cross-tab communication between browser windows of different origins is not possible

Engineering Contradiction:

Improvecross-origin communication capabilityVSAvoidcommunication restriction

Core Design Contradiction:

Adaptability or versatilityVSReliability

Solution Approach 1:

The communication channel system is designed to be universal, enabling communication between browser windows of different origins. Unlike localStorage which is restricted to same-origin windows, the channel can establish connections between any windows, providing multi-functional communication capability across different contexts.

Inventive Principle:

Principle #6Universality (Multi-functionality)

Solution Approach 2:

The communication channel acts as a universal intermediary that facilitates communication between browser windows regardless of their origin. This intermediary mechanism overrides the same-origin restriction inherent in localStorage, enabling cross-origin data exchange while maintaining security through the channel's controlled communication protocol.

Inventive Principle:

Principle #24Intermediary (Mediator)

Data Source

PatentUS20240220343A1Method and system for real-time communication between multiple browser windows

Publication Date: 2024.07.04 RAKUTEN MOBILE INC

AI summary

Embodiment herein provides a method for real-time communication between multiple browser windows by a system (100). The method includes opening, by the processor (180), a parent browser window and determining, by the processor (180), child browser window needs to be opened by the parent browser window. The method also includes receiving, by the processor (180), an input for creating a communication channel between the parent browser window and the child browser window and opening, by the processor (180), the child browser window from the parent browser window. Further, the method includes creating, by the processor (180), the communication channel between the parent browser window and the child browser window based on the received input; and receiving, by the processor (180), data by the child browser window from the parent browser window through the created communication channel.