Micro-Frontend State Sharing Across Browser Tabs With Account Isolation
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing mechanisms fail to efficiently share state information across multiple browser tabs in a web browser, particularly in CRM systems, leading to inefficiencies and the need for complex custom code handling.
Innovation Solution
Implementing a common state-sharing application within parent and child browser tabs to manage and synchronize state information, using individual state stores for each tab, with the state-sharing application ensuring consistent and synchronized state updates across parent-child tab pairs.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Reliability
If separate state stores are used for each browser tab, then state information isolation between tabs is improved, but state synchronization complexity increases
Solution Approach 1:
A state sharing application acts as an intermediary between separate state stores in different browser tabs. This mediator receives state update messages from one tab's state store and propagates them to other tabs' state stores, enabling synchronization without direct complex interactions between tabs while maintaining isolation through the intermediary layer.
2Reliability
If manual data entry is required for each tab, then data isolation is maintained, but productivity decreases
Solution Approach 1:
The state sharing application enables tabs to automatically share and synchronize state information without requiring manual data entry in each tab. When state data is entered or updated in one tab, the sharing application automatically propagates this information to other tabs, making the system self-serving and eliminating redundant manual entry while maintaining data isolation through controlled sharing.
3Ease of operation
If custom code handling is implemented for state sharing, then state synchronization is achieved, but device complexity increases
Solution Approach 1:
The state sharing application provides a universal mechanism that works across different browser tabs and micro-frontend applications without requiring tab-specific custom code. This multi-functional application handles state sharing, synchronization, and propagation in a standardized way, eliminating the need for separate custom implementation code in each tab or application.
4Ease of operation
If state information is shared across all tabs, then user experience is improved, but security isolation between customer accounts deteriorates
Solution Approach 1:
The state sharing application implements local quality by allowing state information to be shared selectively based on the specific customer account context. Each tab maintains its own state store with account-specific data, and the sharing application propagates only relevant state information to tabs that need it, ensuring that state synchronization occurs locally within the context of each customer account while maintaining security isolation between different accounts.
Data Source
Figure 1
Figure 2
Figure 3
AI summary
A method implemented in a retail service system to provide customer services. The method includes loading, by an application on a mobile communication device, a first browser tab comprising a first web application, a first state-sharing application, and a first state store for storage of state information associated with a specific customer account, wherein the loading comprises transmitting, by the application to the first browser tab, customer information associated with the specific customer account; and translating, by the first state-sharing application of the first browser tab, the customer information into the state information; loading, by the first browser tab, a second browser tab comprising a second web application, a second state-sharing application, and a second state store for storage of the state information associated with the specific customer account; and exchanging, by the first state-sharing application and the second state-sharing application, updated state information associated with the specific customer account.