Examples of Progressive Web Apps
Published 1 year ago
Progressive web apps are relatively new to the web development space and even in 2017, this technology is in continuous development. But some companies already dropped their native mobile applications in favor of a PWA. In this article, we will show some examples of companies like Financial Times, Forbes, Twitter, Instagram, Trivago and other adopting PWA. Not all of them dropped native mobile app development, but they provide PWA as alternatives for those who don't necessarily want to install the full application from the store. Also, not all of them developed PWA at the same level of complexity, since PWA is in continuous development, improvement, and standardization. But definitively all of them see the future of this technology and how it solves the native mobile apps inefficiencies. So let's take a look at some examples:
Let's take a look at a first example which is https://www.trivago.com/ in this case because I didn't use it yet. And since I enter for the first time on their website I get the prompt to "ADD TO HOME SCREEN". Here I can decide to accept it and on the second screen, you can see if I accept how an icon with display name appear on my home screen like any other native mobile app. If you decline and want to play around you can still add it to the home screen from google chrome settings menu. I will show you in the next example how to do this. Now I can tap on my home screen icon and the PWA will load as a usual mobile app without a browser tab or URL bar. The loading screen is on screenshot nr.3 and actual application is in screenshot nr.4. And this is an example of implementation of a PWA.
Of course, there are more possibilities with PWA but I am sure you can already spot a few key advantages already like:
Easy to install
No need to download app from app store, no extra steps, no additional local storage allocation
Taking advantage of native mobile app features like home screen icon and full-screen display
Build once deploy everywhere
Easy and fast deployments and bug fixes, because no need for play store validation
Next example is another popular application from Financial Times. You can access their PWA here https://app.ft.com. In the image below you can see that even if you didn't "ADD TO HOME SCREEN" when accessing for the first time, you can do it later by going to settings in Chrome and add to the home screen at any time. In fact, you can do this with any web URLs from the web, but if it's not a PWA it will be added to the home screen but will load after as standard chrome tab.
Next example is the same Financial Times app for desktop. You can see how it works on Ubuntu Linux and the good news is that it works better on Windows OS and even better on Chromebooks since it runs a web OS. In this example, there is the prompt to add it to the shelf and the process is similar to the previous examples. The app icon is added to the desktop and you can start it later. The point here is that you can build a progressive web app and the OS which your mobile phone, computer or any other device is running on will take care to integrate it seamlessly. All the major mobile and desktop OSes are continuously working on improving integration with PWA.
Conclusion: In future articles, we plan to show more examples of real world PWA. The technology is relatively new but early movers can already take advantage if it.