Progressive Web Applications - still relevant

Are you a developer who wants to build web applications that leverage the latest technology, providing an exceptional experience for users across devices? If so, then progressive web applications (PWAs) are your ideal choice – and with dcupl they become even more powerful.

Not only that, but by using dcupl your development time when building and maintaining PWAs can be drastically reduced without compromising performance or scalability. With our comprehensive framework powering your PWA development process, you’ll enjoy reduced total cost of ownership, accelerated time-to-market launch schedules and improved user engagement with today's leading technologies.

Crossover

Progressive web applications (PWAs) are a type of web application that combines the capabilities of a traditional web pages with the functionality of a native mobile app respectively desktop-app - the best of those worlds. They are designed to provide users with a seamless, app-like experience when accessing web-based content on their devices, and can be installed on the home screen of a device just like a native app. PWAs offer many benefits for both users and developers, including offline functionality, push notifications, and fast performance. Therefore PWAs offer the same capabilities as platform-specific apps plus the reach of web applications.

Technically spoken the requirements for progressive web applications have been reduced to the following features and standards:

• Service Worker
  Service workers are threads based on Javascript technology which link the web application in the browser and the server, more or less as a proxy. They primarily take on tasks in the area of data synchronization and thus offline capability of web applications or when it comes to providing push notifications.
• Web manifest
  The web app manifest is an integral part of the Progressive Web App experience, defining how it will behave once installed on a user's device. In this powerful file lie the details needed to ensure your application runs smoothly from launch - ranging from its name and accompanying icons to its entry point URL.
• TLS (Transport Layer Security)
  TLS, formerly known as SSL (Secure Socket Layer), is an encryption protocol for secure data transmission and is mandatory, for example, when using the Cache Storage API. In general, modern web applications should only communicate via TLS, PWA or not.

Based on Google's checklist, we have derived the following requirements that a good Progressive Web Application should fulfill - and how dcupl can help:

• Performance
  The app must start quickly, stay fast, and work in all browsers with all screen resolutions. dcupl Console offers you the tool to analyze and optimize your application’s performance. Using the dcupl SDK you get a high performance client side search and filter engine. Paired with dcupl’s API your flexibility is endless.
• beforeinstallprompt
  The PWA must be intallable and guide the user accordingly during installation; in general, the user guidance must be adequately designed in both scenarios - installed vs. non-installed. With dcupl you can easily configure different loading scenarios respectively strategies. Tag your models and resources with “installed” and “non-installed” and load the data you really need.
• Offline experience
  At best, the app functions almost identically offline and online; in any case, the offline scenario is well thought-out and offers the user appropriate added value. Once synchronized your data is available on the client and your users are still happy despite being offline. Using a Service Worker a dcupl instance manages the synchronization process and observes the connection status.
• Accessibility
  The function and handling of the app complies with WCAG 2.0 guidelines. Sorry, that’s no dcupl topic.
• SEO
  All screens/pages of the PWA have a separate URL and can be indexed by search engines. Technical SEO is a dcupl topic… because one of the most important things for perfect search engine optimization is performance. Google does not like slow applications.
• Context for permission requests
  The use of APIs, e.g. for push notifications or geo-localization, should always take place in the appropriate context and be explained to the user accordingly. Not a technical issue, but an issue of testing the user experience. And that’s again a dcupl topic - being able to develop “front-end first” and testing with the whole set of necessary data in an early project stage, helps to ensure the right behavior of your app in the right situation.
• And a no-brainer "follow best practices for healthy code"
  Of course you should consider guidelines like the OWASP Top Ten, use only well maintained libraries and include appropriate security measures in your deployment pipelines. dcupl cannot ensure that you consider OWASP or any other rules while implementing your application, but dcupl is a standard for specific functionalities in your application and therefore well tested and more secure than an individual implementation might be - in addition to the fact, that it does not make sense to implement the same functionality again and again.

Advantages & Drawbacks

But what are the main advantages of a progressive web application compared to responsive web apps and platform-specific native applications? Is it possible to use the hardware of the mobile devices? We try to sum up the advantages and also the drawbacks, which still have to be considered before you decide on a specific approach.

Pros

• No breakpoint between native and web - cost savings on development and marketing for re-engaging clients. PWAs shorten the process between the discovery of an app and its installation, thereby eliminating friction in getting an app installed.
• In general, higher user engagement rates, seamless user onboarding and therefore better cross-platform conversion rates - while still using an established SEO position to acquire new users.
• More available dev resources for web (especially Javascript) than for native mobile development.
• In any case, there is no need to cede commissions up to 30% to the app store.
• You only need to develop one web application and not maintain source code for multiple platforms. Using existing web ecosystems is more cost-effective to develop and offer wider compatibility across devices than native apps. Developing once for multiple platforms decreases costs, simple as that.
• Small size of the application. Usually installed PWAs use just 1 MB of storage. One of the top reasons for uninstalling an app is limited storage.
• Fast startup / short loading times and high performance.
• No installation required, but possible.

Drawbacks

• No access to app stores.
• You will lose app store traffic.
• Internet dependence - but yeah, you need internet connection to install a native app. And in most cases to load content afterwards. So not really a drawback.
• Still limited use of device functionality. So in some specific use cases and environments you still need native functionality. Because the mobile vendors do not earn money with PWAs they still limit the access to device capabilities and their app stores. But it should be noted that more and more functionality is becoming available due to new web standards, and thus the exclusion criteria for PWAs are becoming fewer and fewer. See our comparison table below.

Conclusion

Numbers and statistics speak for the development of Progressive Web Applications:

The numbers don't lie! Companies that have launched Progressive Web Apps have seen impressive results. For example, Twitter saw a 65% increase in pages per session, 75% more Tweets, and a 20% decrease in bounce rate, all while reducing the size of their app by over 97%. After switching to a PWA, Nikkei saw 2.3 times more organic traffic, 58% more subscriptions, and 49% more daily active users.

https://web.dev/what-are-pwas/

With small and medium sized enterprises increasingly relying on progressive web apps (PWAs), the global PWA market is projected to grow exponentially from USD 1.13 Billion in 2019, to an estimated USD 10.44 Bllion by 2027 — a tremendous CAGR of 31.9%. Benefitting greatly from their ability to work offline as well as deliver native app engagement with mobile reach, companies can now use PWAs for various applications like e-commerce stores or corporate websites at cost-effective prices.

Read the success story about the adidas Sell-In project, a sales platform which was implemented by our partner Netural as a progressive web application providing thousands of products and related media, even videos and 3D data, offline. With dcupl, the data was synchronized and was searchable or filterable - with the highest performance. Product IDs were recognized via Bluetooth and RFID, transferred as input for the product search. The respective product appeared with a variety of additional information on the touch table and on the second screen.

If you want to know more about it, contact us. We would be happy to share our experiences and discuss how dcupl can help you. In one of our next blog posts, we will cover the technical implementation of a progressive web application using dcupl with a short example.

Other successful PWA examples

The Washington Post

As one of the United States' most popular news outlets, The Washington Post helps to keep its 61 million unique visitors updated with breaking stories. To ensure that their mobile readers get content as quickly and efficiently as possible, they utilize a Progressive Web App (PWA). Leveraging the Accelerated Mobile Pages framework for blazing-fast page loading times - when an article is opened all related links on display are automatically loaded in advance! Since launching this PWA back in 2016 there have been remarkable improvements:

• including 90% faster page load speeds
• 88% quicker AMP content delivery compared to traditional responsive website
• return rates by up to 23% (within 7 days)

https://www.washingtonpost.com/pwa/

Starbucks

Starbucks has introduced a progressive web application for ordering on the web, which offers an experience similar to that of its app. This advanced technology not only allows customers to view menus, add items to shopping carts and customize orders even when disconnected; it also shows location-specific pricing. The PWA is 99.84% smaller than Starbucks’ existing iOS app. As a result Starbucks has seen double the amount of daily online orders since PWA's launch and equal engagement between desktop and mobile users alike – making convenience easier than ever before.
https://app.starbucks.com/

Uber

With Uber's PWA, it's possible to book a car on even the most limited of internet connections. The web experience has been designed with low-end devices in mind and offers riders an app-like interface accessible on all modern browsers. With its incredibly lightweight core size – just 50 KB - users can make their request within 3 seconds, perfect for those times when fast service matters.
https://m.uber.com/

Spotify

The growing rift between Spotify and Apple because of Apple’s 30% app store commission has granted the music streaming platform a unique opportunity. The result? A faster, more efficient Progressive Web App (PWA) version of their app with its own unique and adaptive UI that changes along with the user’s journey through it. The users are prompted to add the Spotify PWA to their home screen for easy access - making Spotify PWA on-par with Spotify’s other versions.
https://open.spotify.com/