Implementing Progressive Web Apps in 2022

A progressive web application (PWA) is a software application that's delivered through the web. It uses common web technologies such as CSS, HTML JavaScript and WebAssembly, so it can typically be used by any standards-compliant browser for both desktop and mobile devices with varying degrees of support. A PWA is a type of webpage or website that doesn't require separate distribution, meaning developers can simply publish it online provided it meets basic installation requirements. Users can then add the application to their browser. However, some PWAs are also published on digital distribution systems such as Apple App Store or Google play.

A progressive application is a cross-platform solution, so third-party developers such as Apple can often build them more easily than they can with native apps that are only designed for one platform. They also use a progressive enhancement web development strategy in most cases, but some PWAs use the App Shell Model (ASM) architectural approach. This design methodology allows service workers to store the basic user interface, or shell, of the PWA in the browser's online cache.

Service workers are one of the most important components of a progressive app, as they allow a website to feel more like a native app. For example, they enable websites to download content from the website and cache it on the user’s mobile device. This feature improves load time since it provides PWAs with an initial static frame, allowing them to load content progressively and dynamically.

History

The origin of PWAs dates to 2007, with the launch of the iPhone. Apple developed web apps for its line of mobile phones by using HTML5 and an Asynchronous JavaScript and XML (AJAX) architecture, which would remain the standard for iPhone apps. These apps didn't require a software development kit (SDK), and could be fully integrated into the Safari browser engine. Apple later ported this distribution model to its App Store to discourage jailbreaking and support other developers. Apple also announced its intention to launch an SDK for each web apps in the following year. As a result, Apple still supports web apps, but has shifted the great majority of its IOS applications to the App Store.

Dynamic webpages were allowing web technologies to create interactive web applications by the early 2010s. New methodologies like responsive web design (RWD) provided greater respect flexibility with respect to screen size, which also made PWAs more accessible. Additional enhancements during this period included changes to the languages used to develop PWAs more interactive, providing a user experience (UX) more similar to that of native apps.

Mozilla introduced its open-source Firefox operating system (OS) in 2013, which was intended to run web apps on mobile devices as native apps. It included a user interface called Gaia based on the Gecko rendering engine and was written in HTML5. Mozilla completely discontinued the Firefox OS project in 2017, although it did form the basis of KaiOS. This feature phone platform added social media apps from platforms such as Facebook, Google and Twitter.

Google engineer Alex Russell and designer Frances Berriman coined the term "progressive web apps" in 2015 to describe apps that took advantage of the new features offered by modern browsers. These features included web app manifests and service workers, which allowed users to upgrade native web apps to PWAs. Google also made a significant effort to promote PWA development for its android OS for mobile devices. Mozilla added support for service workers to Firefox in 2016 with Apple and Microsoft adding this feature to their browsers over the next two years. As a result, all major browsers have supported service workers to varying degrees since 2018.

PWAs were available on Windows desktops via Microsoft Edge by 2019. Google Chrome also supported PWAs for most of the major desktop OSs at this time, but Mozilla abandoned its implementation of PWAs in Firefox for desktops by the end of 2020. Specifically, Mozilla removed its prototype for a "site-specific browser" configuration that it had included as an experimental feature in Firefox. This decision clearly indicates that Firefox won’t be supporting PWA for desktops anytime soon.

Support

As of 2021, Chromium-based browsers support PWA for macOS, Linux, Windows and Android, but not IOS. In addition to Google Chrome, these browsers also include Microsoft Edge, Opera, Brave and Vivaldi. Firefox doesn't support PWA for any operating system except partial support in Android. Safari only supports PWA for macOS and iOS as of version 11.3.

Websites must meet certain criteria to qualify as PWAs, including originating from a secure origin. These websites are served over TLS via HTTPS to ensure content authenticity, privacy and security. They also have a green padlock in the browser area preceding the URL, indicating the site doesn’t have active mixed content.

Regular HTTP web caches store content after their first use and use heuristic algorithms to guess when the user no longer needs that content. However, PWAs must create programmable content caches by registering a service worker with a fetch handler. These caches fetch content before it's used for the first time and then discards it when no longer needed. This type of cache helps users access pages that are offline or hosted on low-quality networks.

PWAs must also reference a web app manifest that contains a name or short_name, start_url, display and icons. The display may have a value of “standalone,” “fullscreen” or “minimal-ui,” while the icons must have 192 and 512 pixel (px) versions. Manifests allow a URL to share PWAs, making them easy to install and discoverable by search engines. They also allow third-party app stores to list PWAs. In addition, PWAs support the interactions and navigation of native apps, including the ability to add them to home screens and display splash screens.

Comparison with Native Apps

Retailers typically prefer native apps for their mobile websites, even when they have the option of using PWAs. Native apps generally provide a better UX for mobile apps, primarily due to their superior performance that makes them more responsive. The time that mobile users spend on mobile apps is much higher than what they spend on mobile websites, largely because mobile apps reside on the users’ home screens. A 2017 survey by comScore shows that mobile users spend 87 percent of their time on apps and only 13 percent on mobile websites.

Figure 1: Mobile Websites vs Mobile Apps

Mobile apps also drive the time spent on mobile devices in virtually all markets, as shown in the following charts from a 2019 comScore survey:

Figure 2: Mobile apps vs. Mobile websites by country

Note the similar disparity in usage for all countries in the chart above.

In addition to time spent, mobile users are also spending more money on mobile apps. The following graphs show that in-app purchases are generally greater for younger users.

Figure 3: In-app purchases by age segment

The tendency for older users to use fewer apps is particularly evident in users over the age of 55.

Native apps are certainly useful for many merchants, but they require a large investment of time and money to create and maintain. The primary issues with using native apps for this purpose include the need for users to download and update them, which takes up storage space on their phone. Merchants must also build and manage a version of the app for each mobile OS they wish to support. This requirement further increases the investment that companies must make to support mobile apps. Furthermore, merchants must upload their apps to app stores, which must approve them.

Despite these costs, merchants may not want to replace native apps that are currently serving their purpose. However, underperforming apps and unresponsive websites may be good reasons to begin using PWAs instead. Furthermore, desktop users still generate more revenue for businesses than mobile users, even though mobile users account for a larger percentage of time spent on the internet. The following graph based on a 2019 Medium survey illustrates this revenue gap:

Figure 4: Mobile revenue gap

The potential of mobile users to generate revenue for businesses clearly hasn’t been fully realized, according to the above chart.

Comparison with Web Apps

PWAs have several advantages over mobile web applications, primarily because the browser’s capabilities strictly limit web apps. For example, web apps don't offer the ease of installation that makes PWAs so popular, although they do offer other benefits of PWAs such as the responsive, lightweight design of many single-page applications (SPAs). However, the key difference between a PWA and mobile web app is that PWAs use a standardized approach to simulating a native UX.

PWAs also have similarities to application frameworks like Electron and Flutter. Electron is strictly a framework, so it has a larger application size and weaker security than is suitable for PWAs. However, Flutter is more similar to PWAs, in that both approaches emphasize development in a single codebase, which provides the cross-platform functionality of native apps. The main drawback with Flutter is that it only uses Dart, which is a newer web language. Developers can use any web language to develop a PDA, including older languages that offer greater support for native features.

Best Practices

Improving UX has always been the driving factor for PWAs, so they should use the same principles as any other RWD mobile app. For example, the best PWA should use optimized thumb reach and minimum time to interaction (TTI), which are critical factors for mobile users. Russell and Berriman describe the following best practices to look for when selecting PWAs:

1. Connectivity independence. A large portion of the PWA remains functional, even when it’s offline or the user has a poor internet connection.

2. Discoverable. Search engines and browsers can find the PWA by using a manifest

3. Linkable. Users can share and access the PWA without downloading it.

4. Fresh. The PWA remains current with regular updates that are transparent to the user.

5. Installable. Users can add the PWA as an app to their home screen.

6. Native feel. The PWA is cached in an app shell, giving it a fast, fluid response.

7. Responsive. The PWA remains responsive, regardless of the user’s device or its display size.

8. Re-engage-able. The PWA is supported by push notifications and alerts.

9. Safe. All the PWAs traffic is encrypted.

10. Progressive enhancement. The PWA can improve the UX on more capable devices, even though it has a baseline UX for all platforms and devices.

Challenges

PWAs also have their own challenges to weigh against their benefits when deciding whether to replace native apps with PWAs.

Initial Response Time

Mobile customers who pin a PWA to their home screen are desirable from a business perspective, and the PWA standard even provides a default method for accomplishing this task. Native apps are installed separately, so they take longer to install. However, the user’s first visit provides a smooth UX. On the other hand, installing a PWA is much faster than installing a native app, but a PWA is slower to respond on the first visit to its website.

Storage

PWAs must be stored on the user's mobile device, but OSs limit the amount of storage they can occupy. For example, iOS only allows PWAs to store 50 MB of data for off-line access. Furthermore, the cache files are deleted if the user doesn't launch the PWA for a few weeks. In this case, the next launch of that PWA will require a complete download.

Users usually don't see the typical installation for PWAs, as they typically just click on a dedicated button in the browser or webpage to create a shortcut to the team PWA on the home screen. All content for the PWA must be stored on the mobile device when the PWA is first installed, so it can still require significant storage space even though the PWA itself is much lighter than a mobile website.

Installation Model

PWAs use an open installation model as opposed to a marketplace model, which makes installing PWAs much easier. However, it also makes the user completely responsible for the PWA's safety when installing it. Furthermore, the lower entry point of PWAs makes it more likely that a user could download one from a suspicious source. This possibility means that PWA users must have a greater security awareness to ensure they only download PWAs from trusted sources. Google supports this requirement by encouraging website owners to use HTTPS, although users are still ultimately responsible for the security of their PWAs.

Feature Access

PWAs are also more limited in the features they can access than mobile websites. For example, Siri can't find an installed PWA even if it has an icon and the name Tinder. Furthermore, iOS doesn't currently support push notifications for PWAs, although this feature may be added soon. In addition, PWAs have limited access at best to hardware features such as Bluetooth, Face ID and Touch.

Trends

The number of PWAs will continue to grow for the near future. Once their limitations are fully addressed, that growth should increase exponentially. The cultural and societal changes resulting from the COVID-19 pandemic have also dramatically impacted the development of websites with a number of new trends in design in addition to Google's Page Experience update. For example, a 2021 article in Mobcoder discusses nine web development trends for 2022, with the growth of PWAs being the most significant.

Developers are currently playing close attention to any web technology that improves UX, especially PWAs. A 2021 survey from Statista shows that PWAs have a 36 percent higher conversion rate than native apps. They also have a 50 percent higher engagement rate and a 33 percent lower maintenance cost.

Conclusion

PWAs preferable to mobile websites and web applications in many cases, but they aren’t yet ready to replace every such website. Organizations must consider a variety of factors to determine the best approach to supporting their mobile users. PWAs provide the greatest benefit for website owners who want to improve the UX of mobile visitors and those who are struggling with performance problems like low conversion rates and long load times. The more standardized approach of PWA development make them more likely to incorporate the best practices in modern web design. Organizations designing a new website from scratch should also consider PWAs over mobile websites.

In addition, websites that are designed to generate revenue are likely to benefit from PWAs. However, they don’t necessarily need to implement every feature of a PWA, as their basic features may suffice to increase revenue. In particular, businesses that want to make the transition to PWAs should carefully select the features of PWAs that are likely to increase financial factors such as user engagement, conversions and sales.

PWAs are clearly the way websites will be implemented for mobile users in the future. Companies should therefore begin their move to PWAs now to achieve and maintain their competitive edge.

About Baytech

Baytech is passionate about the technology we use to build custom business applications, especially enterprise solutions that optimize business processes. We’ve been delivering software solutions in a variety of technologies since 1997. Our success is due to the skill and efficiency of our senior staff, which includes software engineers, project managers, and DevOps experts. All of our engineers are onshore, salaried staff members.

We focus on the quality, usability, and scalability of our software and don’t believe in mitigating cost at the risk of quality. We manage project costs by implementing an efficient development process that’s completely transparent and uses the latest standards and practices to build software right the first time. Contact us today to learn more about how we can help your business. Find us online at https://www.baytechconsulting.com/contact.