The design approach was centered on user experience and responsiveness. The following key principles guided the development:
Simplicity: The interface is straightforward, allowing users to perform tasks with minimal steps. Responsiveness: The app is designed to work seamlessly on mobile, tablet, and desktop devices. Modular Code: JavaScript functions are modular, making it easier to maintain and extend functionality. Offline Capability: Leveraging service workers allows users to access the app and its functionalities even without an internet connection.
The following technologies were used in developing the PWA:
HTML5: For structure and content. CSS3: For styling, utilizing Bootstrap for responsive design. JavaScript: For interactive functionalities. Service Workers: To cache resources and enable offline capabilities. Web App Manifest: For PWA features such as installation and icon management.
The user interface consists of:
Toolbar: A set of action buttons (Add, Move Up, Move Down, Delete, Refresh, Save) that allow users to interact with the chemical data table. Data Table: Displays chemical supplies with editable fields, providing a clear layout for viewing and modifying data. Responsive Design: CSS media queries and Bootstrap classes are used to ensure the app adapts to different screen sizes. Toolbar The toolbar is implemented using Bootstrap’s button group layout to maintain consistency and responsiveness across devices. Icons are utilized for intuitive action representation.
Table Layout The chemical data is organized in a table with editable cells, making it easy for users to enter and modify data directly. The table includes sorting capabilities on various columns.
Key functionalities implemented in the app include:
Add Row: Users can add new chemical entries dynamically. Edit Cells: All data cells are editable, allowing quick modifications. Delete Row: Users can remove selected entries. Move Rows: Users can rearrange entries within the table. Refresh Data: Clears existing unsaved data and loads saved data from local storage. Save Data: Data is saved to local storage for persistence. Local Storage Management Data is managed using the browser’s local storage to ensure that user inputs are retained across sessions. This includes saving the current state and loading it upon app initialization.
The code is organized into separate files for better readability and maintainability:
index.html: The main HTML structure of the app. css/style.css: Custom styles for the app. js/main.js: JavaScript functions managing app logic and interactivity. js/sw.js: Service worker file for caching and offline capabilities. manifest.json: Configuration file for the PWA.
To ensure accessibility:
Semantic HTML: Appropriate HTML elements are used for better screen reader support. Keyboard Navigation: Buttons are accessible via keyboard shortcuts, and focus states are visible. Alternative Text: Images have alt attributes for better understanding by screen readers.
To optimize performance:
Lazy Loading: Resources are loaded only when needed. Efficient Caching: The service worker is configured to cache essential files for offline access, minimizing load times.