← Back To Insights

How we built a suite of Web Apps to maintain sustainable fishing levels with offline PWA technology.

By Spencer Toyama

In early 2021, our team at Sudokrew released a suite of applications in collaboration with the Western Pacific Fisheries that are managing the sustainability of the seafood industry. Our team produced a suite of applications to monitor fishing activity, sales, and administer the data.  This suite presented quite a few technical and budgetary challenges that are worth sharing for other engineers or clients looking to produce a variety of applications with native capabilities witha limited budget. 

In this project, we considered developing an application suite with a mobile native technology such as React Native, or leveraging Progressive Web App Technology. There are several advantages and disadvantages to each approach, depending on the business life-cycle of an organization, as well as certain technological constraints which we will cover in this post.

Comparing Progressive Web App and Native App Development

Progressive Web App development and Native App development have their own advantages and disadvantages, however, requirements often determine technology choices.

This project had some unique challenges that shaped requirements:

  • Application suite needed to serve a variety of stakeholders: Fishers, Fish Vendors, and Fishery Administrators
  • Fisher Data needed to be entered offline
  • Collected data needed to sync with cloud databases when the device entered back into an online state
  • Application needed to be functionally identical on iOS and Android
  • Development needed to be done with a limited budget that would allow for 3 engineers over 6 months

Of all of these challenges, the one we prioritized was how to handle offline capabilities. Here is the breakdown on how each technology can handle this:


Having the entire application live in a single code base, rather than separate code bases per environment (web and mobile), provided the capability to more seamlessly integrate different roles and functionality into the application with less overhead. In our case, we were able to build the admin dashboard directly into the source codebase, rather than needing to maintain an entirely separate repository for each project (one for the admin application and another for the native app).


Taking the requirements into consideration, our team aligned with the Western Pacific Fisheries on high level flows to commission users and how the apps would handle data within the suite. We illustrated high level flows in the following diagram:


Offline capabilities with a limited budget

One of the main drivers to employ a PWA is the allotted budget. With a PWA, we would be able to use the same engineering team for mobile and web applications, while still being able to leverage the offline capabilities of mobile devices. This saved our team at least 3X the amount of work when comparing the costs of running several teams in parallel for each operating system the application would need to function on.



In sharing a code base, we could have a single team develop for Android and iOS, as well as leverage shared components for other applications such as the Admin and Vendor applications. Progressive Web App technology provided similar benefits to native applications, parity of functionality, and significant cost savings. 


How to initialize a PWA:



With a PWA, the application is accessible for download through a web browser instead of an app store.


Once the application is downloaded to a device, it can then function in offline mode.

Conclusion


Building the application with a PWA foundation allowed our team to meet a challenging set of requirements with a limited budget. We are now seeing adoption of the application across a range of devices in the Western Pacific Region. This data set informs catch limits affecting the sustainability of our ocean’s fish supply, which we wrote about in a recent case study.


One can see the adoption and usage of the application suite in the regional dashboards of each region, which provides transparent reporting to all parties using the application suite: