Offline mode for browser application services

Abstract

A computing device can execute a browser application to enable a user of the computing device to interact with a current user interface (UI) design file. The computing device can automatically preload a set of UI design files of the user from a backend network computer system into a browser storage of the computing device. The computing device can detect an offline trigger on the computing device, and in response, initiate an offline mode on the browser application, where the offline mode enables the user to continue to interact with the current UI design file.

Description

[0001] Cross-reference to related applications This application claims priority to the following: (i) U.S. Patent Application No. 18 / 955,597, filed November 21, 2024; (ii) U.S. Patent Application No. 18 / 955,386, filed November 21, 2024; (iii) U.S. Provisional Patent Application No. 63 / 607,765, filed December 8, 2023; (iv) U.S. Provisional Patent Application No. 63 / 602,190, filed November 22, 2023; and (v) U.S. Provisional Patent Application No. 63 / 601,976, filed November 22, 2023; the aforementioned priority applications are incorporated herein by reference in their entirety. Technical Field

[0002] The examples described in this article involve mitigation methods for offline user experience and insufficient storage for collaborative web services. Background Technology

[0003] Software design tools come in many forms and applications. For example, in the field of application user interfaces, software design tools enable designers to combine the functional aspects of a program with aesthetics, thereby producing a set of pages that form the user interface of the application. Attached Figure Description

[0004] Figure 1A This is a block diagram illustrating a user computing device communicating with a networked computer system according to one or more embodiments.

[0005] Figure 1B The illustration depicts a network computer system implementing collaborative web services according to one or more embodiments.

[0006] Figure 2A The illustration shows an example collaborative interface for creating a user interface (UI) design document, according to one or more embodiments.

[0007] Figure 2B The illustration shows an example collaborative interface during a collaborative session of a multi-user collaborative UI design, according to one or more embodiments.

[0008] Figure 2C The illustration shows an example collaborative interface for editing a UI design, including a UI design page, among multiple UI frames according to one or more embodiments.

[0009] Figure 2D The illustration depicts an example memory threshold intervention according to one or more embodiments, which enables users to reduce browser memory usage.

[0010] Figure 2E The illustration shows an example user interface that has been activated in recovery mode according to one or more embodiments.

[0011] Figure 3A The illustration shows an example process for implementing an offline mode for a user, according to one or more embodiments.

[0012] Figure 3B The illustration shows an example process by which a network system, according to one or more embodiments, provides instructions to a user computing device to enable the user computing device to implement an offline mode.

[0013] Figure 4 It is a block diagram illustrating a computer system on which one or more embodiments can be implemented.

[0014] Figure 5 This is a block diagram illustrating a user computing device used in conjunction with one or more examples described herein. Detailed Implementation

[0015] The examples described herein relate to providing collaborative web services where users can collaborate with other remote users to design user interfaces and overall user experiences (e.g., for applications). In various examples, users may execute browser applications on computing devices to interact with current user interface (UI) design files. Each user's UI design file may be stored in a backend computing system and may include designs in progress for a specific UI or graphical user interface (GUI). As provided herein, each UI design in progress may include a set of UI pages that the user can edit to configure the user experience. As provided herein, "design in progress" and "design in action" are used interchangeably and may refer to a current UI design that can be configured and edited by the user and / or a group of remote user collaborators. According to the embodiments described herein, a user and one or more remote users may each provide input to edit and configure the set of UI pages with interactive features such as selectable buttons or icons, text boxes, search boxes, embedded links, links to other pages in the set of UI pages, dropdown menus, etc.

[0016] In various examples, when a browser application is executed, the user's computing device can automatically preload a set of UI design files from a backend network computer system to the local browser storage device via the computing device's network communication interface, without user input from the user, to alleviate offline conditions on the user's computing device or at the backend computer system. Specifically, when an offline trigger is detected on the user's computing device or at the backend computer system, the user can still interact with and edit the current UI design files in offline mode. According to the examples described herein, the user can also open each UI design file that has been preloaded into the browser storage device in offline mode, interact with each UI design file that has been preloaded into the browser storage device in offline mode, and edit each UI design file that has been preloaded into the browser storage device in offline mode.

[0017] Therefore, in response to detecting an offline trigger, the browser application running on the computing device initiates an offline mode. This offline mode allows the user to continue interacting with the current UI design file and also allows the user to open and interact with each UI design file that has been automatically preloaded into the browser's storage device. In some examples, the browser application automatically preloads the user's set of UI design files into the browser's storage device based on the relevance of the user's interaction with each of those files. For example, the browser storage device may have the capability to preload any number of the user's UI design files from a backend computing system. In this example, the browser application may preload UI design files that the user has recently opened and / or edited.

[0018] In a further implementation, the backend computer system can implement one or more machine learning techniques to predict which UI design files a user is likely to open, and enable the browser application to automatically preload these predicted UI design files. One of the factors in these machine learning techniques may include relevance. Additional factors may include user-specific information or one or more aspects specific to the user, such as any user routines (e.g., the user typically opens a particular design file on a specific day of the week and / or at a specific time of day), whether the UI design file includes comments mentioning the user or tags linked to the user, and so on. Other machine learning predictions are also conceivable, such as the backend computer system linking to one or more third-party services for the user (e.g., email, social media, browser history, calendar, and other application services) and generating a real-time user profile that can be processed to predict which UI design files the user will want to edit in a given session.

[0019] In offline mode, the user's computing device can process changed data corresponding to user input, which is achieved through user interaction with the current UI design file or any pre-loaded UI design file stored on the browser's storage device. When the user's computing device's network communication interface reconnects to the backend network computer system, the browser application can synchronize the changed data with the current UI design file or any pre-loaded UI design file stored on the backend computer system. Therefore, when the network connection between the computing device and the network computer system is restored, each change made by the user to a UI design file managed by the browser application and browser storage device in offline mode can be propagated to the corresponding UI design file stored on the backend.

[0020] In some implementations, the user's computing device can receive user input to create new UI design files in offline mode. Based on the user input, the computing device can generate an interactive UI for its display components, allowing the user to configure and edit the new design locally for the new UI design file. In this implementation, when the network communication interface reconnects to the backend network computer system, the user's computing device can upload the new UI design file to the backend computer system to enable remote collaboration with the new UI design file.

[0021] As described herein, when a browser application operates in offline or online mode, where in online mode the browser application has a network connection to a backend network computer system, the browser application can periodically and automatically save changed data to the browser's storage device based on the user's interaction with the current UI design file of the browser application. In online mode, the computing device can also periodically and automatically propagate changed data to the current UI design file stored on the backend computer system. Thus, if the browser application enters offline mode and the user closes the current UI design file without saving, the user can access the most recently saved version from either the backend network computer system or the browser's storage device.

[0022] The one or more embodiments described herein provide methods, techniques, and actions performed by a computing device in a programmatic manner, or as a computer-implemented method. As used herein, programmatic means using code or computer-executable instructions. These instructions may be stored in one or more memory resources of the computing device. The steps performed in a programmatic manner may or may not be automatic.

[0023] One or more embodiments described herein may be implemented using a programming module, engine, or component. A programming module, engine, or component may include a program, subroutine, part of a program, or a software or hardware component capable of performing one or more of the described tasks or functions. As used herein, a module or component may exist independently of other modules or components on a hardware component. Alternatively, a module or component may be a shared element or process of other modules, programs, or machines.

[0024] Some of the embodiments described herein typically require the use of computing devices, including processing and memory resources. For example, one or more embodiments described herein may be implemented wholly or partially on computing devices such as servers, desktop computers, cellular or smartphones, tablet computers, wearable electronic devices, laptop computers, printers, digital photo frames, network devices (e.g., routers), and tablet devices. Memory, processing, and network resources can all be used in conjunction with the creation, use, or execution of any of the embodiments described herein (including the execution of any method or the implementation of any system).

[0025] Furthermore, one or more embodiments described herein can be implemented using instructions executable by one or more processors. These instructions may be carried on a computer-readable medium. The machines shown or described in the following figures provide examples of processing resources and computer-readable media on which instructions for implementing embodiments of the invention may be carried and / or executed. In particular, various machines illustrated using embodiments of the invention include processors and various forms of memory for storing data and instructions. Examples of computer-readable media include permanent storage devices, such as hard disk drives on personal computers or servers. Other examples of computer storage media include portable storage units, such as CD or DVD units, flash memory (such as that carried on smartphones, multifunction devices, and / or tablet computers), and magnetic storage. Computers, terminals, and network-enabled devices (e.g., mobile devices, such as mobile phones) are examples of machines and devices utilizing processors, memory, and instructions stored on computer-readable media. Additionally, embodiments may be implemented in the form of a computer program or a computer-usable carrier medium capable of carrying such a program.

[0026] System Description Figure 1AThis is a block diagram illustrating a user computing device 100 communicating with a networked computer system according to one or more examples. In various implementations, the user computing device 100 may include a communication interface 105 communicating with a networked computer system 155 via a network 150 (e.g., Wi-Fi, cellular, satellite, etc.). As provided herein, the networked computer system 155 may implement collaborative web services that enable remote users to collaborate on user interface (UI) designs, which are then combined to provide a user experience (UX) for users of an application.

[0027] In various examples, user computing device 100 may include any personal computer, such as a tablet computer, desktop computer, laptop device, smartphone device, augmented reality (AR) or virtual reality (VR) headset device, etc. User computing device 100 may include an input interface 120, which may include a keyboard and mouse, a touch interface such as a trackpad or touch-sensitive display, an interactive virtual display, etc. User computing device 100 may also include a display component 140 for displaying content to the user.

[0028] In various examples, user computing device 100 can operate browser application 110, which can launch to provide access to collaborative services implemented by network computer system 155. Browser application 110 can be executed to establish a network connection with network computer system 155, enabling multiple remote users to collaborate on one or more designs corresponding to specific UI design files. For example, a user can include an account and / or profile of network computer system 155, which includes a set of UI design files that the user can edit and configure until finalization.

[0029] In various implementations, when browser application 110 is launched, it can automatically load a set of user UI design files to local browser storage device 115 to mitigate offline triggering, such as when the user's network connection or the network computer system's network connection fails. This failure may occur due to network or power outages at the front-end or back-end (e.g., due to storms, natural disasters, network infrastructure maintenance and upgrades, etc.). Such outages may last for hours or even days, potentially causing delays in meeting user deadlines or specific UI design files.

[0030] In previous methods, when an offline trigger occurs, even if a user wishes to access and input multiple UI design files, they can only interact with the currently loaded UI design file. In contrast, the embodiments described herein provide the option to preload multiple UI design files into the local browser storage device 115, allowing the user to still access and interact with any preloaded UI design file during an offline trigger. For example, a user's UI design files may be stored in a backend network computer system 155 and accessible by executing a browser application 110. During a normal session, a user can open a specific UI design file, which may contain any number of interactive UI pages under editing.

[0031] As a background operation, browser application 110 can preload the user's additional UI design files to local browser storage device 115 (e.g., based on recency or machine learning predictions). When the user interacts with a specific UI design file, input data is received via input interface 120, which may include keyboard / mouse input, stylus input, touch input, etc. Based on user input, the UI design in progress corresponding to the UI design file can be presented, edited, and configured by the user on collaborative canvas 145. The user's edits to the UI design file can then be propagated to collaborative canvases presented on the computing devices of any number of other users during a collaborative session.

[0032] Following this approach, contributions from other users to the UI design under editing can be propagated as collaborative data from the network computer system 155 to the design being edited and presented on the canvas 145. Therefore, users and remote users can participate in real-time during a collaborative session to provide input and edits to the design. For example, input data from users can be processed by the rendering engine 135 of the browser application 110, which can generate content data to be displayed on the canvas 145, and this content data is transmitted via network 150 to the network computer system 155 for propagation to the computing devices of other users in the collaborative session. As described, the browser application 110 will also propagate input provided by other participants to the collaborative canvas 145 presented on the display component 140 of the user's computing device 100. In some examples, the browser application 110 may execute scripts, code, and / or other logic (“programming components”) to implement the functionality of the rendering engine 135 described herein.

[0033] In some examples, browser application 110 may be implemented as web code, which may include (but is not limited to) Hypertext Markup Language (HTML), JavaScript, Cascading Style Sheets (CSS), other scripts, and / or other embedded code received by browser application 110 from a website. For example, browser application 110 may execute web code embedded in a web page. Web code may also enable browser application 110 to execute and / or retrieve other scripts and programming resources (e.g., libraries) from a website and / or other local or remote locations. For instance, browser application 110 may include JavaScript embedded in HTML resources executed by browser application 110 (e.g., web pages constructed according to HTML 5.0 or other versions provided by standards published by the W3C or WHATWG consortium). In some examples, the browser application's content rendering engine 135 may utilize graphics processing unit (GPU) acceleration logic, such as WebGL (Web Graphics Library) programs that execute Graphics Library Shader Language (GLSL) programs on the GPU.

[0034] In some implementations, rendering engine 135 may use programming resources (e.g., an HTML 5.0 canvas) associated with a browser application to generate a collaborative canvas 145. As an additional or variant, rendering engine 135 may use programming resources and datasets (e.g., canvas parameters) retrieved from local (e.g., memory) or remote sources (e.g., from a network computer system 155) to trigger or otherwise cause the generation of the collaborative canvas 145.

[0035] The browser application 110 can also retrieve programming resources that include an application framework for use with the collaborative canvas 145. The application framework may include a dataset defining or configuring a set of interactive graphical tools integrated with the collaborative canvas 145. For example, interactive graphical tools can enable users to provide input for creating and / or editing design interfaces.

[0036] Furthermore, the rendering engine 135 can interpret user input actions based on the location of detected input (e.g., whether the location of the input indicates a selection of a tool, an object rendered on the collaborative canvas 145, or an area of ​​the canvas 145), the frequency of input detected within a given time period (e.g., tap and hold), and / or the start and end positions of the input or a series of inputs (e.g., the start and end positions of a drag input), as well as various other input types that the user may specify through one or more input devices (e.g., pinch, zoom, scroll, etc.). In this way, the rendering engine 135 can interpret, for example, a series of inputs as a selection of design tools (e.g., a shape selection based on the location of the input), and inputs that define the attributes of the selected shape (e.g., dimensions).

[0037] In various examples, rendering engine 135 operates to generate a user interface presented on display component 140, which may include the design in progress. The user interface may include graphical elements and their respective properties to enable a user to edit the design using input interface 120. Alternatively or additionally, rendering engine 135 may generate a blank page for collaborative canvas 145, and the user may interact with various display tools to initiate the design in progress. As rendered, the design in progress may include graphical elements such as a background and / or a set of objects (e.g., shapes, text, images, programming elements), and properties of the individual graphical elements.

[0038] Each attribute of a graphic element can include an attribute type and an attribute value. For objects, attribute types include shape, dimension (or size), layer, type, color, line weight, font color, font family, font size, font style, and / or other visual characteristics. Depending on the implementation details, attributes reflect the properties of a two-dimensional or three-dimensional design. In this way, the attribute values ​​of individual objects can define visual characteristics such as size, color, positioning, layering, and content for elements rendered as part of an ongoing design.

[0039] Individual design elements can also be defined based on desired runtime behavior. For example, some objects can be defined to have static or dynamic runtime behavior. The properties of dynamic objects can change in response to predefined runtime events generated by the underlying application used in conjunction with the design in progress. Additionally, some objects can be associated with logic that defines that object as a trigger for rendering or changing other objects, such as through the implementation of sequences or workflows. Furthermore, other objects can be associated with logic that conditioned design elements on when they are rendered and / or their appearance when configured or rendered. Furthermore, objects can also be defined as interactive, where one or more properties of an object can change based on user input during application runtime.

[0040] Rendering engine 135 can process input data corresponding to user input, wherein the input data indicates: (i) the type of input action (e.g., shape selection, object selection, resizing input, color selection), (ii) one or more objects affected by the input action (e.g., objects being resized), (iii) the desired attributes that will be changed by the input action, and / or (iv) the desired values ​​of the attributes being changed. Rendering engine 135 can implement changes indicated by the input data to locally update the active workspace data rendered on display component 140. Rendering engine 135 can update collaborative canvas 145 to reflect changes to affected objects in the design being edited.

[0041] In various implementations, browser application 110 may include a mode triggering module 130, which can detect memory triggers (e.g., initial memory triggers and critical memory triggers) and offline triggers indicating that user computing device 100 or network computer system 155 has lost network connectivity. When an offline trigger is detected, the collaboration session is terminated, and contributions from the user and remote users in the collaboration session are no longer propagated in real time.

[0042] According to the embodiments described herein, when the mode triggering module 130 detects an offline trigger, the browser application 110 can initiate an offline mode in which the user can still participate in opening and displaying the current UI design file on the canvas 145, as well as the set of UI design files automatically preloaded by the browser application 110 upon startup. For example, the design in editing a particular UI design file may include a set of functions that allow the user to edit and configure the individual UI pages retained in the offline mode. Furthermore, the user can open one of the UI design files preloaded to the local browser storage device 115 and edit and configure the individual UI pages of that UI design file accordingly. Change data corresponding to the user's edits and configurations can be automatically saved by the browser application 110 in the local browser storage device 115.

[0043] In one embodiment, offline mode triggering can also cause rendering engine 135 to stop transmitting content data to network computer system 155, and instead store the changed data corresponding to user input on the UI design being edited in local browser storage device 115. According to an example, when the network connection is restored, mode triggering module 130 can detect online triggering and cause browser application 110 to operate in normal online mode and / or resume the collaboration session. The changed data corresponding to user input during offline mode can be propagated to the corresponding UI design(s) stored at network computer system 155, and thus to the UI designs(s) being edited and presented on the remote user's computing device in the collaboration session.

[0044] In a further implementation, browser application 110 can assist users in creating new UI design files in offline mode. For example, browser application 110 may include local functionality for creating, editing, and configuring new UI design files with any number of UI pages featuring functionality designed by the user. The new UI design may include an initial template rendered on canvas 145, or a pre-saved template including any shapes and interactive features (e.g., optional buttons, text boxes, search boxes, icons, etc.). Users can make changes and functional edits to each UI feature of the new design, and browser application 110 can cache or save these changes and functional edits in local browser storage device 115 (e.g., automatically or in response to user input) as a new UI design file.

[0045] When the mode triggering module 130 detects a network connection, the browser application 110 can automatically upload the new UI design file to the network computer system 155 and allow any remote collaborators associated with the new UI design file to access it (e.g., a list of collaborators entered by the user, or a pre-selected list based on contracts or employment). In online mode, synchronization of change data provided by user collaborators on the design under editing presented on the public canvas 145 can occur in real time. For any user operating in offline mode, change data provided by that user can be synchronized via the network computer system 155 with the design under editing presented on other collaborators' devices.

[0046] In some examples, to prevent conflicting changes in an edited design, the network computer system 155 can implement a "last write wins" rule for each UI design file. For instance, a collaborative session among five users might involve each of the five users providing input and editing to the design in the UI design file. One of the collaborators might lose connection, enter offline mode, and, as described herein, continue to provide change data to the design in the edit. In offline mode, this change data is not propagated to the other collaborators in the current collaborative session. When the offline user is reconnected, the change data provided by the user in offline mode can be automatically propagated and / or synchronized to the design in the edit presented on the canvases of the other collaborators, which could result in the rewriting of some changes made by those collaborators.

[0047] In a variant, when an offline user reconnects, the changes made by the offline user do not overwrite any changes made by the online collaborator. For example, if an offline user has made significant changes to a particular UI design file, and an online collaborator also makes significant changes that deviate from the offline user's changes, the network computer system 155 can automatically save the online collaborator's changes while placing the offline user's changes in different versions of the UI design file (e.g., versions requiring approval from one or more other collaborators). As another example, the network computer system 155 can provide each online collaborator with a preview of the changes made by the offline user, which can be fully accepted, partially accepted, or rejected by other collaborators. In a further variant, the changes made by the offline user can be presented in a newly created UI page automatically generated by the network computer system 155, which can be added to the UI design file for consideration by a group of collaborators.

[0048] In various implementations, the auto-save function can be implemented in offline mode, where browser application 110 automatically caches changed data to local browser storage device 115. When the network connection between user computing device 100 and network computer system 155 is restored, the changed data is automatically synchronized with and / or propagated to the UI design file at network computer system 155 and displayed on the canvas of other collaborating users for editing. In a further implementation, local browser storage device 115 can also automatically save stored changes in offline mode, even if the UI design file is accidentally closed (e.g., if the user closes the file without saving, the browser crashes, etc.). For example, browser application 110 can periodically take snapshots of the UI design file and save them to local browser storage device 115, which can be used to restore the last state of the UI design file.

[0049] As described herein, a network computer system 155 implementing collaborative services can select UI design files for each user to be automatically preloaded to local browser storage device 115. In one example, the network computer system 155 selects UI design files based on their recentity of use. In this example, if the local browser storage device 115 has the capacity to store multiple UI design files, the network computer system 155 can select the most recent UI design files that the user has interacted with.

[0050] Other methods for selecting UI design files for preloading can be considered, such as machine learning approaches that take into account individual behavior, preferences, and / or routines. In one example, a user could create a preferred set of UI design files for preloading. In this example, the user provides input (e.g., in a preferences menu) that can rank or select UI design files according to their importance to the user. These could be preloaded when the user launches the browser application 110.

[0051] In a further example, network computer system 155 can perform machine learning techniques to predict which UI design files a user might need in any given collaborative session. Factors such as learned activity data, routines or behaviors (e.g., a user routinely accessing UI design files at a specific time of day and / or on a specific day of the week), whether a user is tagged or checked in a particular UI design file, when a user's name is included in the comments of a particular UI design file, etc., can be used. In other aspects, network computer system 155 can access information from other applications and data on the user's computing device 100, which can indicate which UI design files the user might access. This information may include calendar data indicating collaborative sessions and / or meetings that the user will attend that require access to specific UI design files. As provided herein, network computer system 155 can perform machine learning predictions based on individual characteristics or information associated with the user to select UI design files to preload to local browser storage device 115 when browser application 110 is launched.

[0052] According to the embodiments described herein, the execution of browser application 110 provides the user with a threshold amount of available browser memory (e.g., a browser limit or a limit enforced by network computer system 155, such as a maximum of 3 GB). Network computer system 155 may enforce a browser memory limit lower than the actual available memory limit of the user's browser (e.g., for the purpose of low memory warnings and events).

[0053] The embodiments described herein recognize that saving and / or preloading a single UI design file or multiple UI design files to the local browser storage device 115 can be memory-intensive. For example, as users and / or collaborators add and configure UI design files to include several UI pages with various functionalities, the UI design files increasingly consume browser memory. When a critical memory threshold (e.g., browser limit) is exceeded, the user is typically locked out of the browser, whether participating in browser application 110 or performing any other browser functions.

[0054] According to the examples provided herein, browser application 110 and / or network computer system 155 may operate to monitor memory data from a user's browser memory, wherein the memory data indicates current browser memory usage. When browser memory usage reaches a first memory threshold (e.g., a forced browser memory limit of 65%), network computer system 155 may perform a first intervention to attempt to induce the user to use less browser memory. According to the examples provided herein, the first intervention may involve a menu (e.g., a pop-up menu or sidebar menu) overlaid on a user interface presented on display component 140.

[0055] In various examples, the menu may include a warning about memory usage for the user, as well as a list of UI elements (e.g., UI pages of the current UI design file), with a memory usage indicator associated with each element. In some examples, the user is prevented from continuing until one or more pages are deleted, copied to a different file, or archived. In variations, the user may choose to ignore the warning and continue working on the current UI design file. According to the embodiments provided herein, users can reduce browser memory usage by interacting with menus of UI elements, deleting one or more elements, or archiving one or more elements.

[0056] Therefore, in response to a first memory trigger, the mode trigger module 130 can send a mode trigger to the rendering engine 135 to present the menu and temporarily suspend user interaction with the design being edited. The user can archive one or more UI pages by selecting each UI page and choosing the "Archive" feature. In doing so, the network computer system 155 can store data corresponding to the functionality and editability of a particular UI page and associate that data with a preview or screenshot of the UI page, which can still be displayed on the display component 140. Thus, memory-intensive data associated with UI pages is transferred from browser memory to the network computer system 155, and browser memory usage for archived pages is significantly reduced.

[0057] The browser storage usage indicator on the menu can reflect user actions such as saving, deleting, and / or copying UI pages, and can be updated in real time. In such an example, when a user successfully saves one or more UI pages, the UI pages remain accessible and can be de-saved based on the user's judgment. This removes the first intervention and menu until the first storage threshold is exceeded again.

[0058] In some implementations, the user can ignore the initial intervention and continue interacting with the design in the editor corresponding to a specific UI design file. If browser memory usage exceeds a critical memory threshold (e.g., forcing the browser to use 100% of its storage limit), the mode triggering module 130 can trigger a recovery mode on the browser application 110. Recovery mode prevents the user from engaging with the browser application 110 and any UI design file; the only available functionality is the ability to archive, delete, or copy UI pages or elements to reduce memory usage.

[0059] Based on these examples, when recovery mode is triggered, network computer system 155 may temporarily increase the permissible browser memory 115 (e.g., increase it to 105% of the forced memory) to restore browser memory usage to limited functionality below a critical memory threshold. In some embodiments, recovery mode may prompt the user to archive, delete, and / or copy UI pages or elements of UI design files until browser memory usage falls below a first memory threshold. In either case, the user is locked out of the UI design and collaboration features of browser application 110 until the corresponding threshold is met.

[0060] For archived pages, users can still view a preview of the archived page on the collaborative canvas 145 or on the user interface presented on the display component 140. According to the examples provided herein, users can unarchive or repair an archived page by selecting a preview or a menu associated with the preview. Selecting a preview or the menu can trigger a "unarchive" feature, which, when selected, causes the browser application 110 to retrieve functional data stored at the network computer system 155 and restore the UI page to its functionality configured before archiving.

[0061] The examples described in this article provide mitigation for network errors and outages, as well as low memory events. Any combination of the methods described in this article can be used for such mitigation, which may include offline mode features (e.g., when a critical memory threshold is exceeded and recovery mode is initiated), memory usage warnings and interventions, UI page archiving features, and UI page repair features. These methods represent technical improvements in the general UI design field and are not limited to remote collaboration with other users.

[0062] Collaborative Network Platform Figure 1B A network computer system implementing collaborative web services is illustrated based on one or more examples. Figure 1B In the example, the collaborative network platform is implemented by a network computer system 50, which communicates with multiple user computing devices 11-12 via one or more networks (e.g., the World Wide Web) to present a shared collaborative design interface on the user computing devices 11-12. Although Figure 1B An example of two users utilizing a collaborative network platform is shown, but the described example allows network computer system 50 to collaborate on a design interface among users with a large number of user computing devices. Among other advantages, the collaborative network platform allows users to access the design interface more concurrently and to conveniently manipulate objects while network computer system 50 manages synchronization and access issues.

[0063] refer to Figure 1B User computing devices 11-12 can be operated by users associated with a public account or with an account associated with a specific design 25 in progress. Each user computing device 11-12 presents the design 25 in progress on a collaborative canvas 71-72 presented on each device during its respective session. In this way, each of the user computing devices 11-12 can simultaneously access a set of active workspace data 90 using its respective program interface 41-42 on each of the user computing devices 11-12.

[0064] In the example, service interface 60 can load active workspace data 90 corresponding to the design in progress 25 from workspace data storage device 64 and transmit a copy of the active workspace data 90 to each user computing device 11-12, so that the corresponding rendering engines 31-32 simultaneously render the design in progress 25 corresponding to the active workspace data 90, such as during an overlapped session.

[0065] In some examples, the network computing system 50 can continuously synchronize the active workspace data 90 corresponding to the design 25 in progress presented on user computing devices 11-12. Therefore, changes made by a user to the design 25 in progress on one user computing device 11 can be reflected in real time on the design 25 rendered on another user computing device 12. For example, when a change is made to the design 25 in progress at one user computing device 11, the corresponding rendering engine 31 locally updates the corresponding canvas 71 and transmits the change data 94 corresponding to that change to the service interface 60 of the network computing system 50 (e.g., via the web content rendering engine 135).

[0066] Service interface 60 processes change data 94 from user computing device 11 and uses change data 94 to make corresponding changes to active workspace data 90. Service interface 60 can also transmit remotely generated change data 95 (in the provided example, corresponding to or reflecting change data 94 received from user computing device 11) to another user computing device 12 that has loaded the same ongoing design 25, thereby causing the corresponding rendering engine 32 to generate changes to the ongoing design 25 accordingly, such as by causing program interface 42 and rendering engine 32 to update the corresponding collaborative canvas 72. In this way, active workspace data 90 can be synchronized between any number of user computing devices 11-12 using the corresponding workspace data 90.

[0067] In some examples, to facilitate the synchronization of active workspace data 90 at user computing devices 11-12 and network computer system 50, network computer system 50 may implement a flow connector to merge data streams between network computer system 50 and user computing devices 11-12 that have already loaded the same ongoing design 25. For example, the flow connector can merge a first data stream between user computing device 11 and network computer system 50 with a second data stream between user computing device 12 and network computer system 50. In some implementations, the flow connector may be implemented to enable each computing device 11-12 to make changes to the server-side active workspace data 90 without additional data replication, which would otherwise require data replication to process the streams from each user computing device 11-12 separately.

[0068] In some implementations, the network computer system 50 may include a UI file selector 68, which can determine which UI design files to preload onto the user computing devices of individual users of the collaborative service. As provided herein, the UI file selector 68 may refer to user profiles or other historical user data to determine which UI design files a particular user has recently accessed and / or edited. As further provided herein, the UI file selector 68 may implement other selection criteria and / or machine learning techniques to predict which specific UI design files a user is likely to open.

[0069] When determining or predicting which UI design files a user might open, the UI file selector 68 can preload those UI design files 91-92 into the browser memory of the browser running on the user's computing device 11-12. For example, when the user's computing device 11 launches a browser application for presenting and editing an ongoing design 25 on a collaborative canvas 71, the UI file selector 68 can predict which UI design files the user is most likely to want to access and preload those UI design files 91-92 into the browser memory on the user's computing device 11. Subsequently, if an offline situation occurs in the foreground (e.g., the user's network connection) or the backend (e.g., an interruption in the network computer system 50), the user will still be able to access and edit the currently open UI design files and each preloaded design file in the browser memory.

[0070] In such an example, the changed data 94 is stored or cached locally until the network link between the user computing device 11 and the network computer system 50 is restored. When the network link is restored, the user computing device can transmit synchronization data 97 to the network computer system 50 based on the changed input provided by the user during the offline period, so that the active workspace data 90 is updated accordingly to each UI design file with which the user has interacted.

[0071] According to the examples provided herein, a browser application running on each user computing device 11-12 may include a memory monitor 93 that monitors and indicates the memory data used by the browser application's browser memory. As described above, the memory monitor 93 may provide intervention to the user computing device when a first memory threshold is met, and / or may initiate a recovery mode on the browser application running on the user computing device when a critical memory threshold is exceeded.

[0072] Specifically, when a first memory threshold is exceeded on the browser of the user computing device 11, the browser application can provide an intervention menu that lists the UI pages of the currently open UI design file and provides a memory indicator (e.g., a percentage of browser memory to force a limit) indicating how much browser memory each UI page is consuming. The user can interact with the menu to select and archive individual UI pages, delete UI pages or UI frames of UI pages, and / or copy UI pages to different UI design files stored in the network computer system 50. When the critical memory threshold is exceeded, the memory monitor 93 can trigger a recovery mode on the user computing device 11, which can provide a temporary increase in browser memory to allow the user to reduce browser memory usage below the critical memory threshold or the first memory threshold.

[0073] Example User Interface Figure 2A The illustration shows a sample collaborative interface for creating a user interface (UI) design file based on one or more examples. In various implementations, the user interface 200 can be presented on the user computing device 100, such as in combination with... Figure 1A Shown and described, or presented on any number of collaborators' user computing devices 11-12 participating in a collaborative session, as in combination Figure 1B As shown and described.

[0074] In some examples, user interface 200 may present a collaborative canvas 205 that provides initial templates for creating UI designs. Users can open a browser application corresponding to the collaborative web service, which allows the collaborative canvas 205 to be presented, along with authoring toolbars 210 and editing toolbars 215 that provide users with authoring and editing tools for designing the user interface. As provided herein, users can initiate or join collaborative sessions with any number of collaborators to comment on, react to, or provide emojis to the contributions of other collaborators. Figure 2A As shown, the user interface 200 includes a welcome message 220 and may also provide "how-to" features or tutorials to begin creating a UI design.

[0075] In various examples, users can interact with the authoring toolbar features and editing toolbar features to create UI designs, which can then be saved as UI design files. This allows users to create a variety of interface panels, including custom shapes and functionalities configured by the user and any collaborators who join the user in a collaborative session. As presented herein, UI design files can include any number of UI pages, each of which can include a UI framework and design that can be edited by the user and their collaborators to create a specific user experience.

[0076] Figure 2B The illustration shows a sample collaboration interface 240 during a collaboration session based on one or more examples of a multi-user collaborative UI design. (Example:) Figure 2B As shown, a cursor indicator 230 can be provided to each user collaborator, which enables the user collaborator to provide creative input, make edits and configurations, and provide comments based on the currently presented UI design in progress.

[0077] like Figure 2BAs further illustrated, the UI design in progress may include UI page 225 (e.g., for an application under design), which may include any number of configurable features (e.g., dropdown menu features, icons, browsing features, product or service lists, checkout and purchase features, etc.). In some examples, users are able to provide comments and messages to other collaborating users in a comment panel 235 covering the collaborative canvas 205. Figure 2B In the example shown, collaborators can complete the design for a specific user interface and provide comments to initiate the prototyping of the UI design.

[0078] Figure 2C The illustration depicts a sample collaborative interface 250 of a UI design in editing, based on one or more examples, comprising multiple UI frames 260 of a UI design page 255 rendered on a canvas 205. In various examples, the UI design page 255 may be labeled (e.g., "Updated Checkout Process") to indicate the functionality of the UI frames 260 within the UI design page 255. Each UI frame may correspond to a user interface screen to be presented when a user interacts with the application and / or website. In some examples, the user may interact with authoring and editing tools to update the design and / or reconfigure certain functionalities of a particular UI frame 260.

[0079] Figure 2D Example memory threshold intervention 265, based on one or more examples, is shown, which enables users to reduce browser memory usage. Figure 2D In the example shown, memory threshold intervention 265 may include a UI page menu that lists the currently active UI design page 275 in the presented editable design, and a set of corresponding browser memory usage indicators 270 that show the amount or percentage of browser memory usage for each UI design page 275.

[0080] As provided in this document, a memory threshold intervention may include an initial warning after browser memory usage has exceeded a first threshold (e.g., forcing a browser memory limit of 65%). Regarding the initial memory usage warning, in some respects, the user can ignore or “turn off” intervention 265, and / or may choose to delete or archive certain UI pages 275 within intervention 265. Figure 2D As shown, the user has archived the "Messaging" UI page. This removes the functionality of the UI page from the browser's storage and leaves a preview or screenshot of the UI page in the UI design file loaded into the user's browser storage, thus significantly reducing the storage usage of the "Messaging" UI page.

[0081] Figure 2EThe illustrations depict example user interfaces based on one or more examples, where recovery mode has been initiated. In various examples, critical memory intervention 280 can be presented to override the current user interface and can include a final intervention when a critical memory threshold is exceeded (e.g., forcing the browser to use 100% of its memory). Critical memory intervention 280 can be presented in conjunction with a recovery mode that locks the user from interacting with the UI design file.

[0082] As described in this article, recovery mode can temporarily increase browser memory limits through a networked computer system, allowing users to restore browser memory usage to below a critical memory threshold or a first memory threshold (e.g., by archiving one or more UI pages). Figure 2E As shown, the user can interact with critical memory intervention 280 to select from a list of UI pages and choose archiving feature 295, which archives the selected UI page in the manner described herein. When the user meets the requirements to exit recovery mode, they can exit critical memory intervention 280 and continue interacting with the UI design file.

[0083] Methodology Figure 3A and Figure 3B The illustration depicts an example process for implementing an offline mode on a user's computing device according to an embodiment. Figure 3A and Figure 3B In the following description, for the purpose of describing the functionality used to perform the described steps or sub-steps, please refer to... Figures 1A to 2E Reference characters shown and described to represent various features. Figure 3A The described operations can be performed by an example user computing device 100 that executes browser application 110, as shown in the reference. Figure 1A Shown and described. References Figure 3B The described operation can be performed by a network computer system 155 ( Figure 1A ), 50 ( Figure 1B To execute. Furthermore, although Figure 3A and Figure 3B The processes shown are presented in a specific order, but any step of the described process can be... Figure 3A and Figure 3B Before any other step in the corresponding processes 300 and 350, and with Figure 3A and Figure 3B Any other step in the corresponding processes 300, 350, or in combination with or Figure 3A and Figure 3B It is executed after any other step in the corresponding processes 300 and 350.

[0084] refer to Figure 3AIn process 300, in various examples, at box 302, the user computing device 100 executes a browser application 110 to enable the user of the computing device to interact with a current user interface (UI) design file, which includes designs under editing for a specific UI. At box 304, the user computing device 100 can also automatically preload a set of UI design files from a backend network computer system into the computing device's browser memory via a network communication interface and without user input from the user. As provided herein, the network computer system 155 can select which UI design files to preload into browser memory 115 based on recency or a set of user-specific machine learning factors.

[0085] In various examples, at box 306, user computing device 100 can detect an offline trigger on the computing device. In response to the offline trigger, at box 308, user computing device 100 can initiate an offline mode on browser application 110, whereby the offline mode allows the user to continue interacting with the current UI design file and any pre-loaded UI design files. As provided herein, offline mode can correspond to a disrupted network connection between user computing device 100 and network computer system 155, and can occur at either end (e.g., a network interruption or a power outage).

[0086] Furthermore, users may experience offline situations during collaborative sessions with one or more other users. While these connections may be terminated, users can still make changes and interact with the current UI design file and pre-loaded design files in offline mode. In box 310, the user computing device 100 utilizes the current UI design file and / or any pre-loaded UI design file to process change data corresponding to user input. In some examples, in box 312, while the browser application 110 is in offline mode, the browser application 110 can receive input to create a new UI design file. In this scenario, the user can interact with authoring tools to configure the new design in offline mode.

[0087] In box 314, user computing device 100 can detect the restoration of network connectivity between computing device 100 and network computer system 155. Based on the restoration of network connectivity, in box 316, browser application 110 can communicate with network computer system 155 to synchronize or propagate changed data (corresponding to any changes, edits, and / or configurations made by the user in offline mode) with the relevant UI design files stored at the backend network computer system 155. In an example where the user has already created a new UI design file in offline mode, in box 318, browser application 110 can create the new UI design file and / or upload the new UI design file to the backend network computer system 155.

[0088] When changes are synchronized to the backend UI design file, any remote collaborator currently interacting with the UI design file can view the changes automatically propagated to the UI design file in real time. In a further example, if a collaboration session is already in progress when a user's network connection is restored, the user can receive a prompt to join a collaboration session with other remote collaborators.

[0089] refer to Figure 3B In process 350, in various examples, at box 352, the network computer system 155 can operate to provide instructions to the user computing device 110. In the example, the user computing device 100 executes the browser application 110 to receive instructions provided by the network computer system 155. The instructions enable the user computing device 100 to perform a set of operations, such as Figure 3A As described. In the example, the provided instructions may include instructions (e.g., scripts, etc.) that are transmitted to the browser application 110 of the user computing device 100 while the browser application 110 is running. As an addition or variation, the provided instructions may include instructions embedded in, for example, web resources that are accessed by the user computing device 100 and executed by their respective browser applications 110.

[0090] In box 354, the provided instructions are executed by the user computing device in conjunction with the collaborative services provided by the network computer system 155. Once executed by the user computing device 100, these instructions cause the computing device to perform operations according to, for example, process 300.

[0091] Network computer system Figure 4 A computer system on which one or more embodiments can be implemented is illustrated. Computer system 400 can be implemented, for example, on a server or a combination of servers. For example, computer system 400 can be implemented as... Figure 1A and Figure 1B Network computer systems 155 and 50.

[0092] In one implementation, computer system 400 includes processing resources 410, memory resources 420 (e.g., read-only memory (ROM) or random access memory (RAM)), one or more instruction memory resources 440, and a communication interface 450. Computer system 400 includes at least one processor 410 for processing information stored in memory resource 420, such as information provided by random access memory (RAM) or other dynamic storage devices, for storing information and instructions executable by processor 410. Memory resource 420 can also be used to store temporary variables or other intermediate information during the execution of instructions to be executed by processor 410.

[0093] Communication interface 450 enables computer system 400 to communicate with one or more user computing devices over one or more networks (e.g., cellular networks) via network link 480 (wireless or wired). Using network link 480, computer system 400 can communicate with one or more computing devices, dedicated devices and modules, and / or one or more servers.

[0094] In the example, memory resource 420 can store multiple instruction sets, including browser instruction set 422 and server instruction set 424. Processor 410 can execute the server instruction set 424 stored with memory resource 420 to enable the network computing system to implement a collaborative platform, and in situations such as... Figure 1A and Figure 1B The described example operates as network computer systems 155 and 50. Computer system 400 may also include additional memory resources (“instruction memory 440”) for storing executable instruction sets (“browser instructions 422”), such as those that can be embedded in a webpage or transmitted to browser application 110 to enable user computing devices to implement, for example, the functionality described throughout this disclosure. Browser instructions 422 can be transmitted to the computing devices of users on a collaborative platform to enable each computing device to implement example methods such as those described in Figure 3.

[0095] Thus, the examples described herein relate to the use of a computer system 400 for implementing the techniques described herein. According to one aspect, the techniques are implemented by the computer system 400 in response to processor 410 executing one or more sequences of instructions contained in memory resource 420. Such instructions may be read into memory resource 420 from another machine-readable medium. Execution of the sequence of instructions contained in memory 420 causes processor 410 to perform the process steps described herein. In alternative implementations, hardwired circuitry may be used in place of or in combination with software instructions to implement the examples described herein. Therefore, the described examples are not limited to any particular combination of hardware circuitry and software.

[0096] User computing devices Figure 5 A user computing device is illustrated in combination with one or more examples as described. In the examples, user computing device 500 may be used with, for example, reference... Figure 1A and Figure 1B Corresponding to the user computing device 100 shown and described, it may include a smartphone, tablet computer, AR or VR headset, or other touchscreen-based personal computer with graphics processing capabilities suitable for rendering design interfaces and graphic design work.

[0097] In the example, computing device 500 includes a central or main processor 510, a graphics processing unit (GPU) 512, memory resources 520, and one or more communication ports 530. Computing device 500 can use the main processor 510 and memory resources 520 to store and launch collaborative applications. In some examples, a user can use communication port 530 to operate the application to access a web site of the collaborative platform, where one or more web pages or other web resources 505 of the collaborative platform can be downloaded. In some examples, web resources 505 may be stored in active memory 524 (cache).

[0098] As described in the various examples, processor 510 can detect and execute scripts and other logic embedded in web resource 505 to enable a collaborative canvas. In some examples, some scripts 515 embedded in web resource 505 may include GPU-accelerated logic executed directly by GPU 512.

[0099] The main processor 510 and GPU can be combined to render the design in progress on the display component 540 (e.g., a touch-sensitive display device). The rendered design interface may include web content from the web aspects of the hybrid application, as well as design interface content and functional elements generated by scripts and other logic embedded in web resources 505.

[0100] in conclusion Although examples have been described in detail herein with reference to the accompanying drawings, it should be understood that these concepts are not limited to those precise examples. Therefore, the scope of the concepts is intended to be defined by the following claims and their equivalents. Furthermore, it is conceivable that a particular feature described separately or as part of an example may be combined with other separately described features or as part of another example, even if the other features and examples do not mention that particular feature. Therefore, the absence of a description of a combination should not exclude rights to such a combination.

Claims

1. A computer system, comprising: Display components; Network communication interface; One or more processors; as well as A memory storing browser application instructions, which, when executed by the one or more processors, cause the computer system to perform operations, including: This enables users of the computer system to interact with a current user interface (UI) design file using a browser application running on the computer system, the current UI design file including designs under editing for a specific UI; A set of UI design files from the user in the backend network computer system is automatically preloaded into the browser memory of the computer system via the network communication interface without any user input from the user. Detecting offline triggering on the computer system; and In response to the detection of the offline trigger, an offline mode is initiated on the browser application, which enables the user to continue interacting with the current UI design file.

2. The computer system according to claim 1, wherein the operation includes: The browser application automatically preloads the user's set of UI design files into the browser's memory based on how recently the user has interacted with the set of UI design files.

3. The computer system according to claim 1, wherein in the offline mode, the user is able to open the current UI design file and each UI design file in the group of UI design files, and interact with the current UI design file and each UI design file in the group of UI design files.

4. The computer system of claim 3, wherein the executed instructions further cause the computer system to: In the offline mode, changed data corresponding to user input is processed, whereby the user interacts with the current UI design file; and When the network communication interface reconnects to the backend network computer system, the changed data is synchronized with the current UI design file stored in the backend computer system.

5. The computer system according to claim 3, wherein the operation further includes: Make the computer system: In the offline mode, the changed data corresponding to user input is processed, which is achieved by the user interacting with a selected UI design file in the group of UI design files; as well as When the network communication interface reconnects to the backend network computer system, the changed data is synchronized with the selected UI design file stored in the backend computer system.

6. The computer system according to claim 1, wherein the operation further comprises: Make the computing system: In the offline mode: Receive user input from the user to create a new UI design file; as well as An interactive UI is generated on the display component, enabling the user to configure a new design in the editing process for the new UI design file.

7. The computer system according to claim 6, wherein the operation further comprises: Make the computer system: When the network communication interface reconnects with the backend network computer system, the new UI design file is uploaded to the backend computer system to enable remote collaboration with the new UI design file.

8. The computer system according to claim 1, wherein the operation includes: The browser application automatically preloads the user's set of UI design files into the browser's memory based on one or more aspects specific to the user.

9. The computer system of claim 8, wherein one or more aspects correspond to the user being marked or mentioned in the UI design file of the set of UI design files.

10. The computer system of claim 8, wherein one or more aspects correspond to routines in which the user interacts with UI design files in the set of UI design files.

11. The computer system of claim 1, wherein the operation includes: The browser application automatically preloads the user's set of UI design files into the browser's memory based on one or more machine learning predictions that the user may interact with each of the UI design files in the set.

12. The computer system of claim 1, wherein the operation includes: Based on the user's interaction with the current UI design file, the browser application periodically and automatically saves the changed data in the browser's memory.

13. The computer system of claim 12, wherein the operation includes: When the network communication interface is connected to the backend computer system, the browser application periodically and automatically propagates the changed data to the current UI design file stored in the backend computer system.

14. The computer system of claim 1, wherein the current UI design facilitates collaboration between the user and a group of remote collaborators in editing the design for the particular UI.

15. A non-transitory computer-readable medium storing instructions that, when executed by one or more processors of a computing device, cause the computing device to perform operations, the operations comprising: This enables users of the computing device to interact with a current user interface (UI) design file using a browser application running on the computing device, the current UI design file including designs under editing for a specific UI; A set of UI design files from the user in the backend network computer system is automatically preloaded into the browser memory of the computing device via a network communication interface without any user input from the user. Detecting offline triggering on the computing device; as well as In response to the detection of the offline trigger, an offline mode is initiated on the browser application, which enables the user to continue interacting with the current UI design file.

16. The non-transitory computer-readable medium of claim 15, wherein the operation comprises: The browser application automatically preloads the user's set of UI design files into the browser's memory based on how recently the user has interacted with the set of UI design files.

17. The non-transitory computer-readable medium of claim 15, wherein in the offline mode, the user is able to open the current UI design file and each UI design file in the group of UI design files, and interact with the current UI design file and each UI design file in the group of UI design files.

18. The non-transitory computer-readable medium of claim 17, wherein the operation further comprises: In the offline mode, the changed data corresponding to user input is processed, which is achieved through the user interacting with the current UI design file; as well as When the network communication interface reconnects to the backend network computer system, the changed data is synchronized with the current UI design file stored in the backend computer system.

19. The non-transitory computer-readable medium of claim 17, wherein the operation further comprises: In the offline mode, the changed data corresponding to user input is processed, which is achieved by the user interacting with a selected UI design file in the group of UI design files; as well as When the network communication interface reconnects to the backend network computer system, the changed data is synchronized with the selected UI design file stored in the backend computer system.

20. A computer-implemented method for mitigating offline conditions, the method being executed by one or more processors of a computing device, and comprising: This enables users of the computing device to interact with a current user interface (UI) design file using a browser application, the current UI design file including designs under editing for a specific UI; A set of UI design files from the user in the backend network computer system is automatically preloaded into the browser memory of the computing device via a network communication interface without any user input from the user. Detecting offline triggering on the computing device; as well as In response to the detection of the offline trigger, an offline mode is initiated on the browser application, which enables the user to continue interacting with the current UI design file.

21. A networked computer system, comprising: One or more processors; The memory is used to store the first set of instructions and a set of instructions; The one or more processors execute the first set of instructions to provide the second set of instructions to the user's computing device, the second set of instructions causing the user's computing device to perform an operation, the operation including: Enables users of computing devices to interact with a current user interface (UI) design file, which includes designs under editing for a specific UI; A set of UI design files from the user in the backend network computer system is automatically preloaded into the browser memory of the computing device via a network communication interface without any user input from the user. Detecting offline triggering on the computing device; and In response to the detection of the offline trigger, an offline mode is initiated on the browser application, which enables the user to continue interacting with the current UI design file.

22. The network computer system of claim 21, wherein the second set of instructions is transmitted to a browser application executed on the computing device.

23. The network computer system of claim 21, wherein the second set of instructions causes the browser application to automatically preload the user's set of UI design files into the browser memory based on the recentity of the user's interaction with the set of UI design files.

24. The network computer system of claim 21, wherein in the offline mode, the second set of instructions enables the user to open the current UI design file and each UI design file in the set of UI design files, and to interact with the current UI design file and each UI design file in the set of UI design files.

25. The non-transitory computer-readable medium of claim 24, wherein the second set of instructions causes the computing device to perform operations, the operations including: In the offline mode, the changed data corresponding to user input is processed, which is achieved through the user interacting with the current UI design file; as well as When the network communication interface reconnects to the backend network computer system, the changed data is synchronized with the current UI design file stored in the backend computer system.

26. The non-transitory computer-readable medium of claim 24, wherein the second set of instructions causes the computing device to perform operations, the operations including: In the offline mode, the changed data corresponding to user input is processed, which is achieved by the user interacting with a selected UI design file in the group of UI design files; as well as When the network communication interface reconnects to the backend network computer system, the changed data is synchronized with the selected UI design file stored in the backend computer system.

Images