What Are Progressive Web Apps?

Progressive web apps (PWAs) and native apps can provide users with a similar experience. PWAs features allow users to install the website on a home screen by pressing the ‘Add to Home’ button from the PWA page. After installing the PWA, it’s no longer necessary for users to enter the URL in the browser to access the PWA website. Instead, they only need to click the PWA website icon on their device’s home screen.

Storing data on a user’s device enables the PWAs to become faster in subsequent executions. They can deploy the push notification, GPS, camera, and microphone with user permission. The user can still use a PWA when the connection is disconnected. As the PWA displays data previously stored on the local user’s device, they can still use the PWA.

Progressive Web Apps Primary Objectives

1. Discoverable
   The apps are searchable with Google or other search engines
2. Installable
   Install applications on devices with a small size of the installer file
3. Linkable
   Share URL links
4. Network independent
   Quickly retrievable with a slow connection or offline
5. Progressively improved
   It can be accessed with older browsers
6. Re-engageable
   The server sends push notifications
7. Responsively designed
   Accessible on any device with a screen and browser
8. Secure
   Uses HTTPS for communication connections between the client and server

Progressive Web Apps vs Native Apps

1. No need to learn several programming languages for development and maintenance on each platform. A PWA has one code base that can run on different platforms (desktop, IOS, and Android.) Therefore, we can implement the PWA configuration on the existing website
2. Increases SEO rankings through the Google search engine while native apps can be found on the Google Play Store and IOS App Store
3. It is easier to secure data transactions between the client and server using HTTPS. In developing native applications, it is necessary to implement several security measures such as a multi-authenticator
4. Installation is fast and needs less memory

Benefits of Using Progressive Web Apps

Many companies implement PWA on their websites to improve the user experience.

PWA Benefits:

1. The responsive interface on different screen sizes
2. Built using standard technology such as HTML, CSS, and JS
3. Fast website access due to data already stored on local storage
4. It can work with offline mode or slow connectionCan send push notifications to re-engage customers
5. Quick installation and small file size
6. Easy to maintain due to a single code base

Companies like Starbucks have experienced success after implementing PWA. They have increased their daily active users and orders on desktops by nearly as much as their mobile app. Trivago users who added the PWA to the home screen increased by 150%. Also, Tinder’s loading time decreased from 11.91 seconds to 4.68 seconds, with a PWA installation file 90% smaller than the Android app. In addition, Lyft users with old devices take more than 11% of rides in Lyft and install 40% more than the native app.

How to Implement Progressive Web Apps

Developing PWA requires:

1. HTTPS: secure client and server communication on the internet network
2. Application shell: HTML, CSS, and JS stored on the local-storage client when first accessing the PWA, useful for instant access when the user reaccesses the PWA
3. Service workers manage existing services on the client serves to handle client server data transactions
4. Manifest.json: JSON file contains information about a website PWA and developers can specify the name, icon, color, and other PWA features
5. Google Lighthouse includes auditing websites developed to comply with Google standards.

Example of Progressive Web Apps

Resources

Firefox 2021, Introduction to progressive web apps, accessed 07 Dec 2021, https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Introduction
Microsoft 2021, Overview of Progressive Web Apps (PWAs), accessed 07 Dec 2021, https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium
Alex R 2015, The Chrome Dev Summit site installing as a Progressive App, graphics interchange format, accessed 07 Dec 2021, https://medium.com/@slightlylate/progressive-apps-escaping-tabs-without-losing-our-soul-3b93a8561955

Author: Aji Prasetyo, Software Engineer