{"id":10754,"date":"2018-11-06T14:10:41","date_gmt":"2018-11-06T11:10:41","guid":{"rendered":"https:\/\/railsware.com\/blog\/?p=10754"},"modified":"2026-04-16T11:00:22","modified_gmt":"2026-04-16T08:00:22","slug":"what-is-a-progressive-web-app-and-why-should-you-consider-it","status":"publish","type":"post","link":"https:\/\/railsware.com\/blog\/what-is-a-progressive-web-app-and-why-should-you-consider-it\/","title":{"rendered":"What Is a Progressive Web App and Why Should You Consider It?"},"content":{"rendered":"\n<p class=\"intro-text\">Let\u2019s assume that your aim is to build a mobile product to implement your terrific idea. What sort of app will it be &#8211; native or cross-platform? If interested, we\u2019ve already compared these two in an earlier <a href=\"https:\/\/railsware.com\/blog\/react-native-vs-native-app-development-ios-and-android-in-one-go\/\" target=\"_blank\" rel=\"noopener noreferrer\">blog post<\/a>.<\/p>\n\n\n\n<p>Each of them has its own pros and cons. And what if we could combine the strengths of a traditional web application with the experience provided by mobile apps in a single solution? Moreover, such a combination would work on any portable gadget irrespective of the operating system it runs. That would be a game changer. But why would if we already have it under the name of a progressive web app (PWA). Let\u2019s discover more about it.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"2400\" height=\"1260\" src=\"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2018\/10\/illustration-1.jpg\" alt=\"What is a Progressive Web App?\" class=\"wp-image-11011\" srcset=\"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2018\/10\/illustration-1.jpg 2400w, https:\/\/railsware.com\/blog\/wp-content\/uploads\/2018\/10\/illustration-1-360x189.jpg 360w, https:\/\/railsware.com\/blog\/wp-content\/uploads\/2018\/10\/illustration-1-768x403.jpg 768w, https:\/\/railsware.com\/blog\/wp-content\/uploads\/2018\/10\/illustration-1-1024x538.jpg 1024w\" sizes=\"auto, (max-width: 2400px) 100vw, 2400px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\">What are progressive web apps?<\/h2>\n\n\n\n<p>Some say the term\u2019s invention belongs to Google. Definitely, this company has made many contributions to its development, but the name was a result of the collaboration of a designer and an engineer, Frances Berriman and Alex Russell. These guys floated the idea of endowing a web app with the hallmarks typical of a mobile device application like offline mode, GPS access, home screen access, and others. As a result, the app runs in a browser and has a close-to-native UX. Developers, in turn, can focus on building one product instead of diffusing effort to the creation of OS-specific apps. This was back in 2015.<\/p>\n\n\n\n<p>So, a web app which allows you to enjoy benefits akin to those provided by native apps is the answer to the question \u201cwhat is a PWA\u201d.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Key PWA features<\/h2>\n\n\n\n<p>Various sources show that the total number of websites on the Earth has exceeded one and a half billion. And it keeps growing. So, how can one identify which of them are PWAs? The following key progressive web apps features will make it clear.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Run in browser<\/strong><br>Regardless of the browser you use, feel certain that your PWA will run on it. Browser support covers the famous trio (Chrome, Safari, Firefox), as well as other options including Samsung Internet, Edge, and others (except for Opera Mini and Internet Explorer 11).<\/li>\n\n\n\n<li><strong>Access from the home screen<\/strong><br>Despite the point above, you can avoid opening the browser each time to run the PWA. It can be accessible from the home screen through the shortcut. There is no need to visit an application store to install the app.<\/li>\n\n\n\n<li><strong>Offline operation<\/strong><br>Do you feel tired of playing with the dinosaur on Chrome if no Internet connection is available? With PWAs, you can forget about idling on any browser if the web connection is lost. They support offline mode and can operate on low-speed connections.<\/li>\n\n\n\n<li><strong>Push notifications<\/strong><br>The <a href=\"https:\/\/developers.google.com\/web\/ilt\/pwa\/introduction-to-service-worker\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Service Worker<\/a> technology allows for receiving push messages in the background mode of the app. As a result, there is no need to have the PWA open in the browser to get push notifications.<\/li>\n\n\n\n<li><strong>Access to native functionalities of the device<\/strong><br>PWAs can provide access to media features like webcam, video, audio, as well as geolocation services, and other native functionalities of a device. Of course, the app requires your permission to access them.<\/li>\n<\/ul>\n\n\n\n<p>The entire list of features is not limited to the mentioned ones. Progressive websites enable smooth and responsive interaction, GPU-accelerated animations, fast page loading, and others. To understand how all these are possible, let\u2019s take a look under the PWA\u2019s hood.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Fundamental technical components<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/web-app-manifest\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">web app manifest<\/a> is the first building block to mention. This JSON file contains the app-related metadata \u2014 its full and short name, icons to leverage, the URL it should start at, etc. It allows the developers to shape the user experience in the mobile app-like style. With the manifest, you can customize the browser UI at the launch, declare a default orientation of the app, access the PWA through the shortcut, set the display mode and so on.<\/li>\n\n\n\n<li>We\u2019ve already mentioned the progressive web apps service worker as a technical component that enables push messages. This JavaScript file allows for other background tasks like synchronization and offline mode. The component is app-independent (meaning in terms of execution, while it is still a part of the app) and runs separately from the main browser thread.<\/li>\n\n\n\n<li><a href=\"https:\/\/developers.google.com\/web\/ilt\/pwa\/working-with-the-fetch-api\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Fetch API<\/a> is an interface that allows for handling responses and making web requests easier. As a result, the app requests data much faster.<\/li>\n\n\n\n<li><a href=\"https:\/\/developers.google.com\/web\/ilt\/pwa\/working-with-indexeddb\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">IndexedDB<\/a>, a large-scale, NoSQL storage system, together with <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/instant-and-offline\/web-storage\/cache-api\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Cache API<\/a>, a system that retrieves network requests\/ responses, allows you to keep the app\u2019s structured data in the browser. The component participates in ensuring the offline mode of the app.<\/li>\n\n\n\n<li>Another component that plays a significant role in making a native appearance at PWAs is the <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/architecture\/app-shell\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">app shell model<\/a>. It is a bundle of JS, HTML and CSS code elements stored in the cache and used to shape the UI. It also provides an instant app performance when offline. The app loads the necessary content only, while the shell is always static.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Progressive web app vs. native app<\/h2>\n\n\n\n<p>The latter is a deep-rooted approach with some flaws that are visible through the lense of development. On that account, some companies opt for multi-platform dev tools like React Native or even hybrid alternatives like Ionic. Those who are interested in which one is better can check our review <a href=\"https:\/\/railsware.com\/blog\/ionic-vs-react-native-building-a-mobile-app\/\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>. However, progressive web app development aspires to get a piece of the pie and is becoming a newer and more much-in-demand stream in the industry. Moreover, it\u2019s earning it. Let\u2019s discover the trump cardse PWA has against its competitor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Installation<\/h3>\n\n\n\n<p>Installation is the first thing to get an app on a smartphone or tablet. That\u2019s where PWAs takes the lead because they are much simpler and faster to get installed. Mobile apps exist in the environment of app stores, and users need to search for the app there. Another option is a Universal Link for iOS or App Link for Android &#8211; a service that handles links when shared that will take users to the app store or straight to the app if it\u2019s not installed. Engineers, in turn, face the issue of creating two (or more) different platform-specific versions of the product.<\/p>\n\n\n\n<p>PWAs let you forget about the need for differentiation of the progressive app for Android or another platform due to the progressive web apps browser support. As a result, users and developers have no concerns related to application stores.<br>The coolest thing is the freedom of choice &#8211; you can keep use it from the browser, or you can install it and have more like app experience. It&#8217;s up to you.<\/p>\n\n\n\n<p>This is what the PWA installation looks like through the example of Flipkart&#8217;s app:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1628\" height=\"900\" src=\"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2018\/10\/progressive-web-app-flipcart2-1.jpg\" alt=\"Progressive web app installation example\" class=\"wp-image-11026\" srcset=\"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2018\/10\/progressive-web-app-flipcart2-1.jpg 1628w, https:\/\/railsware.com\/blog\/wp-content\/uploads\/2018\/10\/progressive-web-app-flipcart2-1-360x199.jpg 360w, https:\/\/railsware.com\/blog\/wp-content\/uploads\/2018\/10\/progressive-web-app-flipcart2-1-768x425.jpg 768w, https:\/\/railsware.com\/blog\/wp-content\/uploads\/2018\/10\/progressive-web-app-flipcart2-1-1024x566.jpg 1024w\" sizes=\"auto, (max-width: 1628px) 100vw, 1628px\" \/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">Platform independence<\/h3>\n\n\n\n<p>You\u2019ll hardly be able to run a native iOS app on Android and vice versa. PWAs are platform-independent which makes them more attractive from a developer\u2019s perspective. However, we cannot say this is a down-the-line advantage because the progressive UI seeks to balance website responsiveness and native-like UX. Mobile products provide a more user-friendly experience due to the platform specificity. That is the either-or question for those who hesitate construct their first progressive web app.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Offline work<\/h3>\n\n\n\n<p>You already know that PWAs support autonomous work when the Internet connection is unstable or not available. And that\u2019s great because users can access their data anytime and anywhere. However, there is a deficiency &#8211; the app won\u2019t be able to show any content that has not been cached. With PWAs, you have to cache content on the first run. With native apps, you get the cached content after you download and install the app.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Size<\/h3>\n\n\n\n<p>PWAs are much lighter than native apps in terms of the package size to download. Some simple mobile apps may reach astonishing package sizes of over 25 MB. In contrast, PWAs even with all the content lazily loaded would be around 5 MB due to imagery. You get even less than one MB if the PWA lacks images in the barebones version.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">SEO<\/h3>\n\n\n\n<p>Until 2013, search engines did not index native apps. This paradigm was broken by Google which introduced the App Indexing system. It allows mobile apps appear in search results alongside regular websites. In 2015, iOS app support became available as well. With that in mind, in addition to app store optimization (ASO), you can leverage the search engine optimization (SEO) to make apps discoverable and drive traffic to them. You can that by implementing an effective SEO strategy, such as the one on <a href=\"https:\/\/indexsy.com\/guest-post-services\/\" target=\"_blank\" rel=\"noopener\">https:\/\/indexsy.com\/guest-post-services\/<\/a>.<\/p>\n\n\n\n<p>With PWAs, you can do regular SEO because search engines consider them as JavaScript websites and index them as usual. When you want to boost the popularity or search rankings of an app, a business or a site, you can employ good SEO with the aid of an SEO company, such as the <a href=\"https:\/\/marketix.info\/seo-agency-sydney\/\" target=\"_blank\" rel=\"noopener\">SEO agency in Sydney<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Push notifications<\/h3>\n\n\n\n<p>Weird though it might sound, many product owners opt for mobile apps because of push notifications (PNs). Why? Some industries including financial, food, travel and other services experience a significant rise in click-through rates thanks to PNs. Users\u2019 engagement goes up and drives more traffic as well. Another benefit is a significantly higher open rate than emails can provide. It makes PNs a desirable communication channel with end users. Mobile apps allow you to build the functionality required for PNs or integrate ready-to-use PN solutions into the app. PWAs do not lag behind and also provide a capability to use PNs. However, progressive web apps iOS support of PNs is not provided yet, and that\u2019s a huge loss of PWAs.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cost<\/h3>\n\n\n\n<p>Money can be a stumbling block to choose the app building approach. Native in the web development usually means a pricey and time-consuming method because you need two or more separate apps for different platforms. The already mentioned <a href=\"https:\/\/swovo.com\/blog\/top-react-native-companies-in-the-us\/\" target=\"_blank\" rel=\"noopener\" title=\"\">React Native<\/a> can be an option since you can create close-to-native multi-platform products. In this regard, building a PWA is cheaper and faster. Nevertheless, do not expect a free lunch.<\/p>\n\n\n\n<p>Each approach wins at some points and loses at others. The native one has a good hand, but the progressive approach has a royal flush.<\/p>\n\n\n\n<p>At the same time, distribution strategies vary across contexts. In enterprise ecosystems, applications are often delivered through platform marketplaces, such as <a href=\"https:\/\/www.synebo.io\/blog\/how-to-get-listed-on-salesforce-appexchange\/\" target=\"_blank\" rel=\"noopener\" title=\"\">launching an app on AppExchange<\/a>, allowing providers to reach existing user bases and extend platform capabilities.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">PWAs on iOS and Android<\/h2>\n\n\n\n<p>Apple has had no progressive web apps support until March 30, when Safari 13 was released in a bunch with iOS 11.3. From that time, iPhone users could enjoy the benefits provided by PWAs in full&#8230;or not in full. Let\u2019s see how it goes at Android users and compare the experience of both.<\/p>\n\n\n\n<table id=\"tablepress-6\" class=\"tablepress tablepress-id-6 tbody-has-connected-cells\">\n<thead>\n<tr class=\"row-1\">\n\t<th class=\"column-1\">Operating system<\/th><th class=\"column-2\">Android<\/th><th class=\"column-3\">iOS<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr class=\"row-2\">\n\t<td class=\"column-1\">Service workers<\/td><td class=\"column-2\">Yes<\/td><td class=\"column-3\">Yes<\/td>\n<\/tr>\n<tr class=\"row-3\">\n\t<td class=\"column-1\">Push notifications<\/td><td class=\"column-2\">Yes<\/td><td class=\"column-3\">No<\/td>\n<\/tr>\n<tr class=\"row-4\">\n\t<td class=\"column-1\">Background sync<\/td><td class=\"column-2\">Yes<\/td><td class=\"column-3\">No<\/td>\n<\/tr>\n<tr class=\"row-5\">\n\t<td class=\"column-1\">Offline data storage<\/td><td class=\"column-2\">More than 50 Mb<\/td><td class=\"column-3\">Up to 50 Mb<\/td>\n<\/tr>\n<tr class=\"row-6\">\n\t<td class=\"column-1\">Speech recognition<\/td><td class=\"column-2\">Yes<\/td><td class=\"column-3\">No<\/td>\n<\/tr>\n<tr class=\"row-7\">\n\t<td class=\"column-1\">Web App Banner<\/td><td class=\"column-2\">Yes<\/td><td class=\"column-3\">No<\/td>\n<\/tr>\n<tr class=\"row-8\">\n\t<td class=\"column-1\">Access to:<\/td><td colspan=\"2\" class=\"column-2\"><\/td>\n<\/tr>\n<tr class=\"row-9\">\n\t<td class=\"column-1\">- bluetooth <\/td><td class=\"column-2\">Yes<\/td><td class=\"column-3\">No<\/td>\n<\/tr>\n<tr class=\"row-10\">\n\t<td class=\"column-1\">- geolocation<\/td><td class=\"column-2\">Yes<\/td><td class=\"column-3\">Yes<\/td>\n<\/tr>\n<tr class=\"row-11\">\n\t<td class=\"column-1\">- battery info<\/td><td class=\"column-2\">Yes<\/td><td class=\"column-3\">No<\/td>\n<\/tr>\n<tr class=\"row-12\">\n\t<td class=\"column-1\">- camera<\/td><td class=\"column-2\">Yes<\/td><td class=\"column-3\">Yes<\/td>\n<\/tr>\n<tr class=\"row-13\">\n\t<td class=\"column-1\">- beacons<\/td><td class=\"column-2\">Yes<\/td><td class=\"column-3\">No<\/td>\n<\/tr>\n<tr class=\"row-14\">\n\t<td class=\"column-1\">- audio output<\/td><td class=\"column-2\">Yes<\/td><td class=\"column-3\">Yes<\/td>\n<\/tr>\n<tr class=\"row-15\">\n\t<td class=\"column-1\">- private info<\/td><td class=\"column-2\">Yes<\/td><td class=\"column-3\">No<\/td>\n<\/tr>\n<tr class=\"row-16\">\n\t<td class=\"column-1\">- payment system <br \/>\n(Apple\/Google pay)<\/td><td class=\"column-2\">Yes<\/td><td class=\"column-3\">Yes<\/td>\n<\/tr>\n<tr class=\"row-17\">\n\t<td class=\"column-1\">- versatile sensors<\/td><td class=\"column-2\">Yes<\/td><td class=\"column-3\">Yes<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<!-- #tablepress-6 from cache -->\n\n\n\n<p>Unfortunately, iOS users are limited in their PWA functionality compared to Androiders. Nevertheless, the fact that Apple added service worker support in 2018 suggests that the ice in their relationship with PWAs is thawing.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Progressive web apps examples<\/h2>\n\n\n\n<p>Eventually, we moved from descriptions to use cases. A lot\u2019s been said in favour of PWAs but who is using progressive web apps in practice? Let\u2019s review some existing applications which you are free to check out yourself.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Flipkart<\/h3>\n\n\n\n<p>In 2015, this India\u2019s largest e-commerce website focused entirely on native application strategy to deliver the best engaging experience to their customers. With the rise of progressive approach, <a href=\"https:\/\/www.flipkart.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Flipkart<\/a> changed their mind and invested in the PWA. As a result, they got a huge boost in conversions (by 70%), re-engagement (by 40%), and time-on-site (by three times). All these would not be impossible without a truly native UX provided by the progressive development approach.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Forbes<\/h3>\n\n\n\n<p>Another industry that enjoyed progressive web app benefits is media. <a href=\"https:\/\/www.forbes.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Forbes<\/a> does not need a special introduction since this business magazine is globally known. In fact, it is one of pioneers among media companies that opted for PWAs. The reason was the insufficient performance of the former website. The app launch took 6.5 seconds, while the PWA starts more than twice faster. Other achievements associated with the progressive website design include the growth of sessions per user (by 43%), engagement rates (by 100%), and the number of readers who read Forbes articles to the last sentence (sixfold).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">AliExpress<\/h3>\n\n\n\n<p>One of the reasons why <a href=\"https:\/\/www.aliexpress.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">AliExpress<\/a>, a huge e-commerce site from China, was transformed into the progressive app was a poor user engagement and the customers\u2019 reluctance to download their mobile apps. It just happened that these challenges and the PWA progress coincided in time, and AliExpress invested in the development of the progressive version of the website. The results of that investment are terrific &#8211; growth in time per session (by 74%), conversions (by over 100%), and pages visited per session (twofold). The engaging experience was much improved.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Wiki-Offline<\/h3>\n\n\n\n<p>Let\u2019s put aside online magazines and shops and enjoy a fountain of knowledge known as Wikipedia. <a href=\"https:\/\/wiki-offline.jakearchibald.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Wiki-Offline<\/a> is designed to give users offline access to information contained in the encyclopedia. The articles are available offline only when you had activated the read-offline slider on the article page in online mode. After that, you\u2019ll see the chosen articles in the Cached articles section on the home page. And here you go. It\u2019s just a demo app so cut some slack.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Paper Planes<\/h3>\n\n\n\n<p>Initially, we wanted to review the Starbucks Coffee use case and describe benefits they acquired with the PWA. However, the app called <a href=\"https:\/\/paperplanes.world\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Paper Planes<\/a> deserves to be mentioned here at the very least due to the background music you can enjoy with this progressive web app desktop version. PP is game where you can throw and catch virtual paper planes around the globe. A user needs to put his\/her location stamp, fold the plane by dragging corners of the virtual paper, rotate the smartphone horizontally, and throw the plane (but not the phone!). In addition, you can catch other people\u2019s planes, stamp them with your location, and throw further. Fun is guaranteed!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Building a progressive web app &#8211; is it worth a shot?<\/h2>\n\n\n\n<p>At last, we need to understand whether this method of development is worth a shot or not. On the one hand, PWAs rest upon three pillars &#8211; speed, reliability, and engagement. Any PWA provides fast UX from the very installation until the interaction with it, reliable functioning even without Internet connection, and increased user engagement (big kudos to the progressive web app push notifications and background synchronization). That\u2019s from a user\u2019s perspective. Developers won\u2019t face any extraordinary issues. For example, there is no dedicated progressive web app framework since the majority of engineers opt for <a href=\"https:\/\/railsware.com\/blog\/react-vs-angular-battle-for-the-front-end\/\" target=\"_blank\" rel=\"noopener noreferrer\">Angular or React<\/a>. There is a specially tailored <a href=\"https:\/\/developers.google.com\/web\/progressive-web-apps\/checklist#site-is-served-over-https\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">PWA checklist<\/a> to evaluate whether your product can be called progressive.<\/p>\n\n\n\n<p>PWA is not a cure-all solution. In some cases, it won\u2019t fit. If you need to enhance user engagement, make one multi-platform app fast and cheap, share web content with any share enabled app on your device, and can sacrifice some features and functionality specific to native products (for example, access to Bluetooth, Face ID, battery info, altimeter at iOS; NFC, fingerprint scanning, advanced webcam controls at Android) then the PWA will do. This app type is a decent solution for purposes of online media source, e-commerce, single\/regular event, social network, online business or management tool, etc.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">PWA vs. cross-platform vs. hybrid<\/h2>\n\n\n\n<table id=\"tablepress-24\" class=\"tablepress tablepress-id-24\">\n<thead>\n<tr class=\"row-1\">\n\t<th class=\"column-1\">App type<\/th><th class=\"column-2\">Progressive web app<\/th><th class=\"column-3\">Cross-platform app<\/th><th class=\"column-4\">Hybrid app<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr class=\"row-2\">\n\t<td class=\"column-1\">In a few words<\/td><td class=\"column-2\">Websites doped by browser APIs to provide native UX<\/td><td class=\"column-3\">JavaScript-based business logic enhanced with native UI elements<\/td><td class=\"column-4\">Websites wrapped in a mobile browser runtime and enhanced with native plugins<\/td>\n<\/tr>\n<tr class=\"row-3\">\n\t<td class=\"column-1\">Hallmarks<\/td><td class=\"column-2\">\u2013 Highly performative<br \/>\n\u2013 Supported by all kinds of devices <br \/>\n\u2013 Work offline <br \/>\n\u2013 Support push notifications <br \/>\n\u2013 Provide a decent UX <br \/>\n\u2013 Limited access to native functionalities<\/td><td class=\"column-3\">\u2013 Superior performance <br \/>\n\u2013 Close-to-native UI and UX <br \/>\n\u2013 Independent of the browser <br \/>\n\u2013 OS-specific modules available<\/td><td class=\"column-4\">\u2013 Comparatively slow performance <br \/>\n\u2013 Poor UX <br \/>\n\u2013 Supported by all kinds of devices <br \/>\n\u2013 Website customization capabilities<\/td>\n<\/tr>\n<tr class=\"row-4\">\n\t<td class=\"column-1\">Reasons to choose<\/td><td class=\"column-2\">It is a fit for a website with high traffic expectation like an e-commerce platform, news portal, event website, etc. With this approach, you can build a fast and performative product, which can boast a great UX.<\/td><td class=\"column-3\">Cross-platform is a pick by developers who are already leveraging React. Other reasons to choose this approach to build a multi-platform app with a close-to-native UI &amp; UX using JS.<\/td><td class=\"column-4\">Despite the apparent loss of hybrid apps as for performance and UX, they compensate their deficiencies with cost-efficiency. If you need to make an MVP fast and cheap, you\u2019ll hardly find a better option.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<!-- #tablepress-24 from cache -->\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping Up<\/h2>\n\n\n\n<p>In the end, let\u2019s sum up some key takeaways about PWAs and their place in the industry.<\/p>\n\n\n\n<p>Progressive web apps:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>combine the benefits of native products and websites;<\/li>\n\n\n\n<li>work without Internet connection;<\/li>\n\n\n\n<li>need no place in app stores;<\/li>\n\n\n\n<li>run on any browser;<\/li>\n\n\n\n<li>receive push notifications;<\/li>\n\n\n\n<li>contain special technical components that enhance their functionality and UX;<\/li>\n\n\n\n<li>excell the native apps as for costs-efficiency, cross-platform adaptability, but lose by UX and functionality;<\/li>\n\n\n\n<li>SEO-friendly;<\/li>\n\n\n\n<li>are optimized for Android while iOS users cannot enjoy the benefits of progressive apps in full;<\/li>\n\n\n\n<li>are widely used for e-commerce, media, and even games;<\/li>\n<\/ul>\n\n\n\n<p>We\u2019ve not explained how to build a progressive web app but given reasons why you might need it. Progressive apps will be forefront regardless of what happens in the mobile app industry in the future. They are not undisputed winners or losers in the battle against native apps. Different purposes demand different approaches, and PWAs strive to maintain the balance between both of them.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Progressive web apps are a growing trend on the market. Here, you&#8217;ll learn what they are and how they differ from native, hybrid and cross-platform apps.<\/p>\n","protected":false},"author":73,"featured_media":11010,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3],"tags":[],"coauthors":["Zakhar Yung"],"class_list":["post-10754","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development"],"acf":[],"aioseo_notices":[],"categories_data":[{"name":"Engineering","link":"https:\/\/railsware.com\/blog?category=development"}],"post_thumbnails":"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2018\/10\/illustration-1.jpg","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts\/10754","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/users\/73"}],"replies":[{"embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/comments?post=10754"}],"version-history":[{"count":38,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts\/10754\/revisions"}],"predecessor-version":[{"id":18955,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts\/10754\/revisions\/18955"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/media\/11010"}],"wp:attachment":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/media?parent=10754"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/categories?post=10754"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/tags?post=10754"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/coauthors?post=10754"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}