Challenges of Managing Urban Lighting Systems
Managing urban lighting systems involves handling work orders and infrastructure objects. Originally, work orders were processed as reports, printed, and manually filled in the field before being re-entered into the system. This cumbersome process led to inefficiencies and unnecessary efforts for service providers and operators.
The need for a more efficient solution prompted the development of a mobile application. In 2015, the decision was made to create a native iOS app using Swift. This app allowed users to search for and interact with infrastructure objects via a map interface, enabling actions such as taking photos and reporting issues.
However, the iOS app faced several issues. With no further development planned and Swift constantly evolving, maintaining the app became a challenge. The app also communicated with the system as an intranet application, leading to frequent issues when system changes occurred outside of our control.
The Shift to a Progressive Web App
To overcome these challenges, a transition to a Progressive Web App (PWA) was proposed. Experience with single-page applications using React and Leaflet, along with various topic maps developed previously, provided a strong foundation for this transition.
The new PWA retained the core functionalities of the iOS app but improved usability by utilizing the city's mapping services instead of Apple Maps. The design was based on the existing app, with enhancements such as a consistent information display and a local street directory for positioning searches.
Implementing an Offline-First Strategy
The offline-first strategy became a cornerstone of the new PWA, implemented across four dimensions: the PWA itself, offline maps, app data, and synchronization instead of direct posting. This approach ensured the app could function effectively even with limited internet connectivity.
Creating a service worker allowed the PWA to launch under poor connectivity conditions. For offline maps, the MapLibreGL app protocol was used to store vector tiles locally, enabling map access without an internet connection. A GitHub project was prepared to demonstrate this functionality.
Application data was also stored locally, ensuring that all necessary information could be accessed offline. Users could manually update this cache before fieldwork, allowing for seamless offline operation.
Handling Data Synchronization and Conflicts
In the iOS app, actions were directly tied to the user interface, which posed a challenge for offline functionality. The PWA addressed this by storing actions and their payloads locally, synchronizing them with the server when connectivity was restored.
To manage potential conflicts, requests were executed in their original order, maintaining consistency between offline changes and the live system. Visual indicators provided users with feedback on data status, enhancing the user experience.
Enhancing App Reliability and User Satisfaction
The offline-first approach significantly improved app reliability, making it resilient to connectivity issues and system downtimes. This was achieved through the combination of RxDB and Hasura PostgreSQL for the offline core, ensuring stable data synchronization processes.
Despite new challenges like managing intermediate states and providing detailed status feedback, the system's stability and reliability were evident. Users reported high satisfaction with the improvements, underscoring the value of the offline-first strategy.
Conclusion
The journey from a native iOS app to a robust Progressive Web App highlights the transformative power of the offline-first approach. By addressing initial development challenges and leveraging existing expertise, a more efficient and resilient system was created.
This case study demonstrates the importance of flexibility and adaptability in software development. The ability to pivot and embrace new technologies can lead to significant improvements in user experience and operational efficiency.
Comments