A browser tab can now contain a photo editor, a video meeting or a multiplayer game. What makes the experience feel so familiar, however, is the fact that the address bar looks very much like it always has. Yet, the functionality occurring below the surface of the URL field represents a significant departure from how users interacted with static web pages in the past.
This transition was made possible by the combination of three key technology advancements:
- Locally running code
- Real-time connectivity
- Device-side storage of applicable data
Understanding all three aspects explains both the possibilities and the limitations of browser applications.
Pages Became Places Where Code Could Work
HTML gives web content structure, CSS controls presentation, and JavaScript adds behavior in response to user input. Collectively, these technologies enable developers to create interfaces that are capable of reacting to user interactions (such as clicks), updating displays and processing information.
A good illustration of this concept is an online photo editor. With an editor, changing an object within the photo or adjusting the image itself changes the active workspace of the editor — even though the entire document does not need to be loaded for each individual action.
Photopea is a specific example of this. According to Photopea’s documentation, Photopea is an image editor running on the user’s device. Therefore, all of the actual computation necessary to resize images, generate illustrations and complete other image manipulation functions occurs on the user’s personal computer. When opening an image editor via a website, there is no requirement that each editing operation be sent to a remote server.
Other applications utilize a hybrid approach dividing responsibility for certain actions between the client (the user’s device) and a server. For example, the browser might be responsible for providing real-time controls and immediate visual feedback to users; meanwhile, the server would be responsible for managing shared records or handling account authentication. Ultimately, there is no single paradigm that all web applications follow.
Live Connections Made Shared Activity Possible
For an application used by multiple individuals, the existence of information (i.e., messages, edits from others, etc.) that did not exist prior to initial load requires that some mechanism exists for communicating this information to the user’s interface. Updates need to reach the interface while the shared session continues.
One common method of facilitating this type of communication is via WebSocket. WebSocket establishes a persistent bi-directional connection between a browser and a server. This allows for both sides of the connection to communicate with each other simultaneously without requiring polling.
WebRTC (Web Real-Time Communication) provides additional APIs for establishing peer-to-peer audio/video/data channels for applications such as browser-based video conferencing and chat systems. These APIs allow developers to create real-time communication applications that do not require a separate plug-in or browser extension.
Browser-based gaming further highlights the distinction between viewing a webpage and participating in an ongoing activity/session. GipsyTeam’s guide to Bovada describes mobile poker played through a browser, a form of access also confirmed by the operator’s own documentation. The relevant point is the delivery method: the browser contains an interactive game session rather than just information about a game.
These technologies explain what the web platform can support. They do not establish which internal protocol a particular game uses, or guarantee that every connection will remain fast and reliable.
Local Storage Changed What a Tab Could Remember
An effective application generally needs to keep track of more than the items visible in its window. Often this includes storing configuration, or information such as drafts or resources that would otherwise need to be downloaded again.
Web browsers provide several storage options. Web Storage stores simple key/value pairs, while IndexedDB provides support for more advanced, structured records. MDN explains how client-side storage can work alongside server-based storage.
Another part comes from service workers. As they are able to intercept requests, they allow you to work with cached resources and enable an appropriately designed application to perform some functionality without needing a connection. Developers implement these types of features, so not all websites have them automatically.
An example might be an application preserving a draft locally until sending it to a server. In doing so the application would be capable of keeping the display operational while collaboration or submitting is disabled due to lack of connectivity.
There are limits to using local storage. Browsers enforce storage limits for sites and users can delete site data. Creating a copy of a draft on one device doesn’t automatically replicate it onto another. Therefore saving, syncing and backup are additional responsibilities that an application should clearly indicate.
More Capability Still Comes with Boundaries
Access to the device is not unrestricted simply because an application is running in a web browser. Permission and a secure context are required to capture video and audio via getUserMedia. Thus an interface used for video calls needs to handle denied permission or unavailable hardware, as well as successful access.
Computational resources remain finite too. Photopea’s documentation notes that it runs locally on the device. Launching a photo editor within a tab does not eliminate the computational work required to edit an image. Connectivity is another boundary. Locally accessible editing functions may continue during an outage but sessions involving multiple parties or service interactions depend upon having connectivity. The ability to run both behaviors within the same application exists.
Practical questions for users include what runs locally, what requires connectivity and where their work is saved. Practical challenges for developers are making those answers visible through clear status messages and consistent behavior.