As developers, we always try to find resources and ways to make implementing functionalities, as well as testing and launching an application easier for us. The greatest boom in recent years has undoubtedly been in the development of mobile applications. Since 2007, when the iPhone was launched, Steve Jobs introduced the idea of being able to run applications developed in Ajax and HTML5 that were a standard for the iPhone at that time. However, when the concept of the App Store appeared, it became very popular, leaving all of those ideas behind. With that in mind, today, we’ll like to take a look at what Progressive Web Applications (PWA) have to offer and where they stand in comparison to native apps.

What is a PWA or Progressive Web App?

A Progressive Web Application is a web app that runs on an instance of a browser, is able to consume native services of the device, and offers a native user experience. Let’s break down what each part of PWA entails:

• Progressive: Works for everyone, on all devices that support modern browsers.
• Web: Uses web standards like Javascript, HTML and CSS, all behind the facility of React to develop a responsive, clean, modern and safe web app.
• App: Runs, works and looks like a native app, including push notifications* and offline and local storage access support.

Source: https://developers.google.com

Why should you choose Progressive Web Apps (PWAs) over Native Apps?

One of the major advantages for developers is the fact that, to build a PWA, you need to code using React, which also provides the code for the website. So you’ll be developing a multiple platform app, native for Android and iOS, and also a web app, for all the other devices that integrate a modern browser.

Furthermore, React supports the use of CSS style sheets, which allows to easily integrate styles into any environment of the application, even having a main resource configuration file called manifest.json, where you can change variables such as the icon of the application, application mode, wallpapers, title, splash screen, and many others. There is no doubt this means the configuration can be done in a simple and centralized way.

Moreover, if you develop a PWA, you circumvent the fact that often resources such as styles, functionalities and libraries work differently for each platform. Programming and correcting these aspects usually requires a lot of time and money, in addition to the fact that there are often no libraries that support both platforms because the base language for each platform is different.

From this last point, we can conclude that the cost of developing a PWA is significantly lower than that of developing a native application for each platform. Not to mention saving you save the cost of publication in each of the app stores that requires a paid developer account.

Progressive Web App benefits 

Here’s an overview of all the benefits of developing a Progressive Web App:

• Looks like a native app.
• Easy to develop with ReactJS; lots of documentation available.
• Fast and fluid navigation; uses Service Workers.
• Offline support, WebSQL database; LocalStorage access; push notifications*; allows access to device’s hardware, like Camera, Speakers, etc.
• Quick development; can see changes in real-time; uses a Node server.
• Totally responsive, adapts the design to all screen devices.
• Easy app installation by just going to the website and selecting the “Add to Home” browser option.
• Smaller size than a native app.
• Appears on the device’s app manager, providing the possibility to uninstall it, or clean the cache.
• Instant deploy: just deploys changes to the production web site and the changes will instantly appear on the PWA.

What are the cons?

Of course, like every tool, PWAs also have its disadvantages. Let’s take a look at them:

• Most users usually go directly to the device’s store instead of going to the app website, so it will cause a change of “routine” for the users that may be difficult to get used to.
• *Push notifications for iOS safari browser are not supported yet.
• It is not possible to access specific properties of the hardware of the device and the operating system, meaning you are limited to the basic functions provided by each system.
• If the icon, splash screen, app name or description changes, you can’t get an automatic update from the server. This does not happen with a native app, because just by updating it, you can get a completely new and different app if you want to. 

Conclusion

To sum up, the choice of technology will depend on the requirements and resources of each client. If the objective and scope of the application to be developed do not require specific functions of the device, but do call for the possibility of web access and include a tight budget, the process of analyzing alternatives will probably lead you to develop a PWA as the best option for the client. On the other hand, if your client requires considerable fluidity with animations, access to specific resources of the device—such as the processing of data and content—, or access to specific properties of the hardware of the device, and has a flexible budget, the best option will without a doubt be developing a native application.

For either case, we recommend learning how to use React, React Native, and taking full advantage of them. ReactJS allows you to easily develop websites and PWAs. And, if you want to develop native applications, you should use React Native, whose code and implementation is very similar to ReactJS.

The post Progressive Web Apps vs Native Apps appeared first on asap developers.

In a recent article, we talked about Progressive Web Apps (PWAs) and discussed how they compare to native apps. A PWA is a web app that runs on an instance of a browser, is able to consume native services of the device, and offers a native user experience. It basically works on all devices that support modern browsers and uses web standards like JavaScript, HTML and CSS, which allows you to develop a responsive, clean, modern and safe web app. It runs, works and looks just like a native app and includes push notifications and offline and local storage access support. This time, we’d like to give you examples of just a handful of very successful PWAs. Let’s have a look to our Top 9 Progressive Web Abpps:

1. Twitter Lite

Given that 80% of Twitter’s users are on mobile, the fact they invest heavily on their apps comes as no surprise. Twitter Lite was introduced back in April of 2017 and this PWA managed to bring down mobile data usage by up to 70%, thus making navigation exceedingly faster. Not to mention its storage space is negligible in comparison with the native Twitter app for Android (600KB versus the original 23.5MB). It has also heavily increased engagement—as Google reports, this progressive web app increased the number of pages per session by 65% and saw a 75% increase in Tweets sent, in addition to decreasing the bounce rate by 20%. If you are wondering how the PWA was built, you can check out this article.

• Starbucks PWA

Starbucks launched their first mobile app back in 2015 and switched to a progressive web app last year. Users can browse and research the Starbucks menu, customize their orders, and even place items in their shopping cart from any device without needing an internet connection (a connection is required only to check local prices and actually place an order). The app has been a major success, increasing engagement and reducing development costs. Given its reduced size (233KB versus the original 148MB native app), it is quite fast and responsive.

• Uber Progressive Web App

Uber’s PWA was released in 2018 and takes up only 50KB, which means you can launch it in just two seconds in devices with just a 2G network. Therefore, riders who weren’t able to use the native app due to owing a low-end device now have a way to access Uber services through any modern browser. Not to mention the app also offers offline access to rides and ride sharing. You can learn more about this progressive web app here.

• AliExpress

This remarkably prosperous e-commerce site unsuccessfully tried to convert non-app users into app users through their mobile site before making the jump to PWAs back in May 2016. Their cross-browser progressive web app has allowed them to improve retention and conversion rates (with a 104% increase) as well as reengagement. And if that wasn’t enough, users visit twice as many pages as before and spend 74% more time per session in the app. The app is fast and sleek, can be used offline and added to the users’ home screen, and includes push notifications.

• Pinterest

Launched in 2010, Pinterest’s virtual pinboard has become hugely successful by allowing users to find and save images, videos and recipes, among many other things. However, their website experience used to be slow and only 1% of visitors either signed up or installed the mobile app. This is why they decided to develop a PWA that yielded a higher user engagement (60% in all) with 40% more time spent on the mobile web. Their revenue also saw a major impact with an increase in the ad click-through rate (50%) and user-generated ads revenue (44%). You can see a case study on the new app here.

• The Washington Post

This prestigious newspaper holds a considerable amount of third-party content, which means a progressive web app provides them with optimal performance while running third-party scripts. The app, released in April 2016, caches content in the background allowing The Washington Post to keep their content up to date and provide a smooth reading experience for their users. Users can also add an icon to their home screen and use the app both online and offline. As for results, the app yielded a 23% increase for mobile users returning after 7 days and improved loading time by a whopping 88%.

• Forbes

Following The Washington Post’s footsteps, Forbes launched their very own PWA the following year. The switch from mobile site to PWA improved user experience by providing faster load times (from 6.5 seconds to just 2.5) and extremely visual content as well as adding offline reading and push notification features. Consequently, their engagement rates doubled and the number of readers that actually finished an article increased by six times. All of this has allowed Forbes to grow and stay ahead of their competition.

• OLX

The popular Indian classified ads site, which runs in over 40 countries, saw major improvements by embracing PWA technology. Most of OLX users prefer mobile and the PWA gave them the opportunity to speed up ad and page loading, as well as to add the app to their home screen and receive push notifications even when offline. Soon, re-engagement increased by 2.5 times, their CTRs (click-through rates) grew to 146%, and they saw an 80% decrease in their bounce rates. It goes without saying that these quickly resulted in higher monetization.

• Flipboard

Flipboard is the most popular social news app. It provides readers with access to content from news outlets, blogs and social media, displaying them in a magazine-style format. It also allows users to follow sources and save stories, videos and images into their own magazine to read later or share with friends. Flipboard used to be strictly a mobile app, which means their progressive web app has allowed them to reach a wider audience. Their PWA also provides a faster browsing experience by reducing data usage.

Top Progressive Web Apps Takeaway 

Believe it or not, we’ve provided you with just a sneak peek of some of the most successful progressive web apps currently available. As you can see, PWAs have allowed apps across all industries to increase engagement and revenue by providing users with a faster and more engaging experience. They are versatile, appealing and lightweight. Some other companies that have chosen to go the PWA route include Telegram, Trivago, 2048 Game, Yummly and Podle for Podcasts.

The post Top Progressive Web Apps: The Best 9 PWAs appeared first on asap developers.

The post What is a PWA (Progressive Web App)? appeared first on asap developers.