Skip to main content

Web Core Utilities

Web Source code Package

Web core utilities are browser-specific functions designed for client-side walkerOS implementations. These utilities handle DOM interactions, browser information, storage, sessions, and web-based communication.

Installation​

Import web utilities from the @walkeros/web-core package:

Loading...

DOM utilities​

getAttribute​

getAttribute(element: Element, name: string): string retrieves attribute values from DOM elements with enhanced handling.

Loading...

Attribute Parsing​

splitAttribute​

splitAttribute(str: string, separator?: string): string[] splits attribute strings using specified separators.

Loading...

splitKeyVal​

splitKeyVal(str: string): [string, string] splits key-value pairs from attribute strings.

Loading...

parseInlineConfig​

parseInlineConfig(str: string): Record<string, unknown> parses inline configuration strings from HTML attributes.

Loading...

Browser information​

getLanguage​

getLanguage(navigatorRef: Navigator): string | undefined extracts the user's preferred language.

Loading...

getTimezone​

getTimezone(): string | undefined gets the user's timezone from the Intl API.

Loading...

getScreenSize​

getScreenSize(windowRef: Window): string returns the window's screen dimensions.

Loading...

Element visibility​

isVisible​

isVisible(element: HTMLElement): boolean checks if an element is visible to the user.

Loading...

This function considers:

  • Element display and visibility styles
  • Element position within viewport
  • Parent element visibility
  • Intersection with the visible area

Storage management​

Storage Operations​

storageRead​

storageRead(key: string, storage?: StorageType, env?: StorageEnv): WalkerOS.PropertyType reads data from browser storage with automatic type conversion.

Loading...

storageWrite​

storageWrite(key: string, value: WalkerOS.PropertyType, maxAgeInMinutes?: number, storage?: StorageType, domain?: string, env?: StorageEnv): WalkerOS.PropertyType writes data to storage with expiration and domain options.

Loading...

storageDelete​

storageDelete(key: string, storage?: StorageType, env?: StorageEnv) removes data from storage.

Loading...

Session management​

sessionStart​

sessionStart(config?: SessionConfig): WalkerOS.SessionData | void initializes and manages user sessions with automatic renewal and tracking.

Loading...

Session data includes:

  • id - Unique session identifier
  • start - Session start timestamp
  • isNew - Whether this is a new session
  • count - Number of events in session
  • device - Device identifier
  • storage - Whether storage is available

Advanced Session Functions​

  • sessionStorage - Session-specific storage operations
  • sessionWindow - Window/tab session management

Web communication​

sendWeb​

sendWeb<T>(url: string, data?: SendDataValue, options?: SendWebOptionsDynamic<T>): SendWebReturn<T> sends data using various web transport methods.

Loading...

Transport-Specific Functions​

sendWebAsFetch​

sendWebAsFetch(url: string, data?: SendDataValue, options?: SendWebOptionsFetch): Promise<SendResponse> uses the modern Fetch API with advanced options.

Loading...

sendWebAsBeacon​

sendWebAsBeacon(url: string, data?: SendDataValue): SendResponse uses the Beacon API for reliable data transmission, especially during page unload.

Loading...

sendWebAsXhr​

sendWebAsXhr(url: string, data?: SendDataValue, options?: SendWebOptions): SendResponse uses XMLHttpRequest for synchronous communication.

Loading...

Web hashing​

getHashWeb​

getHashWeb(str: string, length?: number): Promise<string> generates SHA-256 hashes using the Web Crypto API.

Loading...

Configuration types​

SendWebOptions​

Loading...

SessionConfig​

Loading...

StorageEnv​

Loading...

The optional env parameter on storage functions allows injecting window and document for testing and simulation. When omitted, the global window and document are used.

StorageType​

Loading...

Usage notes​

  • Consent Required: Browser information functions may require user consent depending on privacy regulations
  • Storage Fallbacks: Storage functions gracefully handle unavailable storage with fallbacks
  • Transport Selection: Choose transport based on use case:
    • fetch - Modern, flexible, supports responses
    • beacon - Reliable during page unload, small payloads
    • xhr - Synchronous when needed, broader browser support
  • Performance: Session and storage operations are optimized for minimal performance impact

For platform-agnostic utilities, see Core Utilities.

💡 Need implementation support?
elbwalker offers hands-on support: setup review, measurement planning, destination mapping, and live troubleshooting. Book a 2-hour session (€399)