Improving Mobile Web Applications with Ionic and PWA

    Oct 20, 2023 / S24S2

    Improving Mobile Web Applications with Ionic Platform and Progressive Web Application (PWA) Technology is the theme of our first workshop. Within our company, Starlight2, we consistently promote the exchange of knowledge and experiences among our valuable developers.

    workshop1 starlight2

    How to enhance the user experience on mobile devices with the Ionic workshop. In this article, we explore how to adapt the existing OPGDirect system for mobile web browsers. The OPGDirect system currently has a web frontend built in Angular and mobile applications developed using the Ionic platform. The goal of this workshop is to transform the existing web frontend to better suit mobile devices.

    Ionic for Mobile Applications

    First and foremost, it is important to understand what Ionic brings to the table. Ionic is a powerful tool for creating mobile applications using web technologies such as HTML, CSS, and JavaScript. However, the OPGDirect system also had an Angular web frontend, which presents challenges in adapting to mobile devices. Adapting for mobile devices takes time and often requires a complete design overhaul on some pages.

    Solution for Improving Mobile Web Applications with Ionic for Mobile Web Browsers

    Our workshop offers an elegant solution to this problem – to use existing Ionic mobile applications for display on mobile web browsers. This innovation has advantages because it does not require writing new code for applications on mobile web browsers. Instead, we leverage existing mobile applications that use web technologies and only change how the application is distributed.

    Slika 1 Slika 2

    How Does It Work?

    Step 1: Deploy Ionic Applications on Nginx
    The first step is to deploy the Ionic application on an Nginx server, similar to how it is done with the Angular web frontend for computers. The key component is configuring the Nginx server to track User-Agent headers. Depending on these headers, the server will redirect users to either the mobile frontend or the computer frontend.

    Step 2: Set Up a Progressive Web Application (PWA)
    Next, we set up a Progressive Web Application (PWA) from the existing Ionic mobile application. PWA brings many advantages:

    • Web Manifest: PWA uses a JSON file, the web manifest, which defines application information, including the name, icons, and more.
    • Service Worker: PWA employs a web worker, known as a service worker, for all outgoing application requests. The service worker can cache these requests, enabling offline mode and allowing push notifications.
    • Benefits of PWA:
      • Can be installed from a web browser.
      • Works when the user is not connected to the internet.
      • Operates in the background, for example, receiving push notifications.

    This means that PWA has all the benefits of native Ionic applications without the need for users to download it through Apple or Google Play stores.
    This Ionic workshop provides a simple and efficient solution to enhance the user experience on mobile devices. With minimal adaptation, your OPGDirect system will be ready for action on mobile web browsers. Harness the power of the Ionic platform and PWA technology for the modernization of your application.

    At the end of the workshop, the S24S2 team breathed a sigh of relief and celebrated their achievements at an evening that provided an opportunity for relaxation, sharing experiences, and further discussions about future projects. The workshop brought us closer to modernizing our mobile web applications and opened the doors to new innovations. Together, we are building a better digital future! 🚀🎉

    Fotografija