Banana's Journey to the App: From Self-Service to PWA Masterpiece

In order to explore in more detail how we use Progressive Web Apps to build a self-service as described in my previous article “When Websites Become Apps”, I have chosen to start with a fictional company. Companies with fruit names have generally been very successful, so that's why our company is of course called “Banana”.

Introduction to Banana

Banana is a fictional online based company that specializes in delivering fresh and delicious bananas directly to consumers' front doors. With a user-friendly website and an efficient self-service, Banana has achieved great success in online fruit delivery.

Banana is now facing an exciting challenge; launching their new product. A subscription-based service that ensures regular deliveries of bananas - “Banana as a Service (BaaS)”. So that customers can manage their banana delivery (BaaS), a self-service is required and customers expect this self-service to also be available as an app. To meet that requirement, Banana has looked to PWAs. It's a simple and effective way to create a cross-platform app without having to start from scratch.

Why is Banana expanding their self-service with a PWA?

Banana has chosen to expand their self-service offering with a PWA for several strategic reasons, all of which are aimed at improving the user experience and increasing accessibility. Here are some of the main reasons why Banana has made this decision:

1. Increased availability:
   A PWA allows Banana to reach their customers across different devices and platforms. This makes Banana's services more accessible, allowing users to easily access them from any device with a browser.
   
   

2. Cost-effectiveness:
   Compared to the development of separate native apps for different platforms, developing a PWA is much more cost-effective, especially because Banana already has a responsive and efficient online self-service. This allows Banana to invest in technological improvements without having to deal with the complexity of multiple app versions.
   
   

3. User engagement:
   PWAs offer options for increased user engagement by allowing push notifications and installation of the app on the home screen. This keeps users informed and creates a cohesive experience.
   
   

4. Fast time-to-market:
   The development of a PWA for Banana’s self-service allows for a faster implementation and release compared to the development of native apps for different platforms. This reduces time-to-market, which is crucial in a competitive industry like online fruit delivery. By choosing a PWA, Banana can introduce new features, fix bugs, and adapt to user needs faster without the lengthy approval processes often associated with traditional app stores.

How does Banana do it — the technical part?

Banana wants to get out onto the market quickly with its PWA, which is why they are looking to develop an MVP (minimum viable product ). The MVP at Banana only has to meet the minimum requirements in order to be released as a PWA. So, the first thing Banana does is go through the official requirements for a PWA.

• A web application's manifest with the correct fields filled in - that part needs to be developed.

• The website must be served from a secure (HTTPS) domain - of course, that requirement has already been met.

• An icon to represent the app on the device - Banana, of course, already has a logo that can be quickly customized into an icon.

• A JavaScript service worker to allow the app to work offline - that part needs to be developed.

So they really only need to develop two things. A manifest file that has to provide the browser with information about the app that it needs to install a PWA and a JavaScript service worker, which is a file of JavaScript code so that it can run on its own.

To get off to a quick start, Banana chooses to use a PWABuilder - https://www.pwabuilder.com/. It is an open source tool that can analyse a website and help with the building blocks for a PWA.

Initially, Banana builds a manifest file:

Then Banana only needs a JavaScript service worker which, at a minimum, can manage if the PWA does not have an internet connection. It is developed with the following code:

With the two files put into production, Banana meets the minimum requirements and is ready to launch the first MVP of their PWA. Banana, however, has several plans with their app.

The future of Banana’s PWA

Banana has a list of wishes for their new app, and the first ones are very straightforward.

1. Release of the app in the Google Play Store
   Right now, the MVP can only be downloaded by going to Banana’s website and selecting “Install App”. Therefore, getting the app out into various App Stores is a top priority. Banana chooses the Google Play Store as the first choice, as it can just about be uploaded 1 to 1.
   
   

2. Release of the app in the iOS App Store
   A large part of Banana's customers are iOS users, so therefore the app must also be released in the iOS App Store. However, you have to put in a bit more work here , as it requires building a standard iOS App shell around the PWA. PWABuilder can generate the code, but it still requires a Mac and an Apple Developer account to release the app in the iOS App Store.
   
   

3. Implementation of push notifications
   After its release in the two largest App Stores, the app should be expanded with push notifications to be able to inform users about offers, new products, deliveries and other important information.
   
   

4. Biometric login
   Integrating biometric login, such as fingerprint or facial recognition for a more secure and convenient login experience.

Final thoughts

Banana's decision to develop their self-service business as a PWA demonstrates their commitment to improving the user experience and making their services more accessible to everyone. By implementing technologies such as push notifications and biometric login, Banana is poised to take the next step into the future of online fruit delivery.

With these technological advances, Banana can continue to deliver delicious bananas, which are now supported by a premium digital experience for their customers who subscribe to Banana-as-a-Service. Much of it created efficiently, quickly and economically through the use of Progressive Web Apps.

The future is ripe for the picking and Banana is ready to lead the way!