Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

PWA Technology

DZone's Guide to

PWA Technology

Learn about Progressive Web Applications, how they combine the best of web and app experiences, and how companies are taking advantage of them.

· Mobile Zone ·
Free Resource

Progressive Web Application experiences combine the best of the web and the best of apps. Identified by Google and other tech giants as one of the most significant developments for mobile app design, progressive web apps, such as Twitter's mobile app, provide the same utilities as conventionally installed apps including offline web pages, push notifications and fast speed load times. But in comparison, progressive web apps do not need to be installed on your device. "Developers can create light and easily updated applications that behave as if they were installed on the device, even adding a home screen icon for easy access," says Griffin.

PWAs are more efficient than native apps. They work on-demand and are always accessible, without taking up a smart phone's valuable memory or data. By choosing to use a PWA over a native version of the same application, users consume less data (as is the case for the Twitter PWA). However, this doesn't mean users need to sacrifice the convenience of a native app. They are still able to save the PWA to their home screen - it's installable without the hassle of a real download.

This not only highlights the improvement in user experience but also the earlier issue of consumer buy-in. Users must make a conscious decision and even a commitment to download and keep a native app. Uninstalling that app is an equally final decision. In contrast, clicking a simple link is an easy task that requires very little consideration, little data storage on your device, no lengthy download period and no installation.

There may be no difference between a PWA and a native app from the end user's perspective. That's beneficial for IT departments that already have an app interface their users or customers are comfortable with.

That was a big benefit for Nexercise, a health and wellness platform that is currently building a PWA for Sworkit, a fitness application. The Sworkit app was first developed for Apple iOS and Android, then the web and Apple TV. Since its web and native apps already shared some JavaScript code, it made sense to develop a PWA, said David Frahm, director of growth at Nexercise in Silver Spring, Md., who oversaw Sworkit's development.

"Visually, [our PWA] might look pretty much the same [as our web app]," Frahm said. "That would be great, because we have a great app, and we don't want to change all of that. We get to deliver to users wherever they want us to be, as opposed to being limited to the app store."

PWAs are popular as B2C apps, but organizations develop them for internal employees as well.

From a developer perspective, progressive web apps are also more economical. They are faster to build and update. You can also create one version of the app, and it displays seamlessly and identically on all devices. Rather than the segmented market of native mobile apps - where businesses need a separate app structure for Apple and Android devices - PWAs are unified to work on browsers that are common to all devices. Better yet, they cost less to develop than a native mobile app.

Cas Study: Pinterest PWA Technologies

According to Medium.com, the Pinterest PWA started because they were focused on international growth, which led them to the mobile web. After analyzing usage for unauthenticated mobile web users, they realized that their old, slow web experience only managed to convert 1% of users into sign-ups, logins or native app installs. The opportunity to improve this conversation rate was huge, leading them to an investment in the PWA.

Over 3 months, Pinterest rebuilt their mobile web experience using React, Redux, and webpack. Their mobile web rewrite led to several positive improvements in core business metrics. Time spent is up by 40% compared to the old mobile web experience, user-generated ad revenue is up 44% and core engagements are up 60%:

Loading fast on average mobile hardware over 3G: Pinterest's old mobile web experience was a monolith - it included large bundles of CPU-heavy JavaScript that pushed out how quickly Pin pages could load and get interactive. Users often had to wait 23 seconds before any UI was usable at all.

Their new mobile web experience is a drastic improvement. Not only did they break up and shave hundreds of KB off their JavaScript, taking down the size of their core bundle from 650KB to 150KB but they also improved on key performance metrics. First Meaningful Paint was down from 4.2s to 1.8s and Time To Interactive reduced from 23s to 5.6s.

Getting a web page to load and get interactive quickly benefits from only loading the code a user needs upfront. This reduces network transmission & JavaScript parse/compile times. Non-critical resources can then be lazily loaded as needed. Pinterest started breaking up their multi-megabyte JavaScript bundles by splitting them into three different categories of webpack chunks that worked quite well:

Pinterest also uses a progressive loading technique for images in their PWA. A placeholder with the dominant color is initially used for each Pin. Pin images are served as Progressive JPEGs, which improve image quality with each scan.

Pinterest just deployed support for Web Push notifications and have also been working on the unauthenticated (logged-out) experience for their PWA. They are interested in exploring support for <link rel=preload> to preload critical bundles and reducing the amount of unused JavaScript delivered to users on the first load.

The Progressive Web Application Development has transformed the Pinterest online experience they provide to users making a huge breakthrough in the way the digital world works nowadays.

Below you can also find few interesting news about PWA technologies in the world of business and stay tuned for more updates!

Latest News About PWAs

Microsoft Is Turning PWAs Into Windows Apps

According to TheVerge.com, Microsoft is bringing Progressive Web Apps (not to be confused with Universal Windows Platform apps, many of which are glorified websites) to Windows 10 with a new version of Edge that supports the necessary web technologies. Microsoft will also start adding high-quality PWAs to the Microsoft Store, and developers can also submit their PWA for consideration. Unlike Electron apps, such as Microsoft's own Visual Studio Code, PWAs can't include native OS-dependent code. They're still just websites, just with better caching, notifications, and background functionality. However, a lot of Electron apps are simply a website wrapped in an OS-native launcher, and it's possible that many of these could switch over to PWAs in the future. Progressive Web Apps work now on recent Windows Insider Program builds of Windows 10, and they should ship as a default to everyone "later this year."

Twitter PWA New Update

According to WindowsLatest.com, Twitter today pushed out a new update for its PWA app released for Windows 10 users. This is the first update released after the company made available the Twitter PWA app last week for Windows 10 users.

Twitter Progressive Web App is the first PWA app which was released in the Microsoft Store last week. The app brought lots of new features for the Windows 10 users which were not available in the Twitter UWP app for Windows 10 users. The latest update for the Twitter PWA app comes with bug fixes and performance improvements. The developers have made sure to fix a request review bug which occurred every time the app was opened. This issue is now fixed and the users will not be getting any notification for review when they open the app.

The developers also fixed the issue with the EU cookie dialog which popped up constantly even after dismissing it. The latest update fixes the issue and the dialog will now remember once you dismiss the dialog. Twitter has also added the ability to paste images from the clipboard in a tweet. This was the feature which was missing in the UWP application for Windows 10. The developers have made sure that the paste image feature is available for users in the new Twitter PWA application.

Topics:
progressive web applications ,pwa ,mobile

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}