What specifies a web application as a Progressive Web App (PWA)

Progressive Web Apps’ (PWAs) biggest draw is in their ability to adapt and provide the best overall mobile web experience regardless of what screen they’re being viewed on or what browser they’re being run on. PWAs drive performance and load similar to a regular web page, but offer additional native device functionality such as working offline, serving notifications, launching a camera, etc. For more background and further explanation on what PWAs truly are, check out the previously published article, What’s all the hype with Progressive Web Apps (PWAs).  

This second installment in the PWA series will explore the browser technologies that make PWAs possible, including what specifies a web application as a PWA. 

PWA Capabilities and Specifications

PWAs themselves have various capabilities. This includes (but is not limited to) geolocation, sensor access (magnetometer, accelerometers, gyroscope), camera access, audio output, on-device payment, web-based notifications, background synchronization, and more. These APIsand services are exposed through the particular browser that are supported (more on that later).

It’s important to note that making use of the previously mentioned capabilities in a web app doesn’t immediately make it a PWA. Various automation tools will provide auditing capabilities for PWAs, which provides somewhat of a standardized expectation for what rules/practices PWAs should really adhere to. The metrics evaluated by these tools are set by a baseline of influencers in these technologies. Google’s development documentation describes the various technologies sought after in the industry to declare a web application as a PWA.

For PWA classification, a web application must:

• Originate from a Secure Origin. Served over TLS and green padlock displays (no active mixed content).
• Load while offline (even if only a custom offline page). By implication, this means that PWAs require Service Workers.Service Workers being the current technology of implementation as there is no current alternative to the approach.
• Reference a Web Application Manifest with at least the following properties: name short_name start_url display with a value of standalone or fullscreen An icon at least 144×144 large in png format.

In addition to the feature set PWA’s possess, there is also far greater simplicity in their distribution/consumption model. As PWAs are distributed as static files, they are easy to serve by means of a light-weight webserver which clients can download the necessary assets for through their browser. Another means of distribution is through a standard CMS/CDN- simply to host the built static assets required for the PWA. Therefore, having a PWA doesn’t necessarily mean the CMS you’re using is now obsolete, but it opens up opportunities to new capabilities that a CDN may provide such as content caching, security features, and more. 

When thinking about the means of distribution for PWAs, its ease doesn’t come to surface until the actual use cases are applied. From the ecommerce perspective, how many times have you ventured into a store outside your home country to be presented with an appealing banner to download an app to aid you with all your enhanced in-store shopping experience? You happily search for this app in your phone’s App Store, only to find out that it’s not available for download because you have an account dedicated to a country which doesn’t distribute this app. You’re left displeased, and you get the feeling that you’re now left out of this opportunity to try out a wonderful shopping experience simply because the content you want to download has been region locked by your platform. 

Now imagine if this application was available as a PWA. You’ll simply be able to open up your web browser on your mobile device, navigate to the store’s website, and be presented with the same rich experience that you would expect from the native application. You’re now able to continue that incredible shopping experience that you were hoping for from the start.
Browser FeaturesCertain browsers offer more support and capabilities for PWAs compared to others. This is most evident in the current mobile web application world between iOS Safari and Android Chrome mobile browsers.  iOS does not possess the richer capabilities of PWAs such as web-based push notifications, bluetooth access, background synchronization, geofencing, and more. 

However, as of the time of writing this article, Apple has released iOS 12.2 beta, which adds additional capabilities such as native support for gesture navigation, state management between apps, level 1 web share features, external link handling (useful for OAuth flows), and plenty more. This doesn’t put iOS on par with Android yet in term’s of PWA support. However, it does bring truth to the fact that PWAs are becoming the way of the future for web applications and are continuing further adoption to platforms.

As continued adoption of PWAs increase, we should see more native features of platform operating systems become exposed through web browser APIs. 

If curious on what capabilities a browser may have, it’s encouraged to visit https://whatwebcando.today/, and run a scan on a current browser in use. It may be surprising to see some features limited to native applications have made their way to the web.  

These modern practices encourage growth in the mobile industry and demonstrate how both consumer and developer requirements have shaped mobile application development practices into adoptable front-end models.

The post What specifies a web application as a Progressive Web App (PWA) appeared first on Get Elastic Ecommerce Blog.

from
https://www.getelastic.com/what-specifies-a-web-application-as-a-progressive-web-app-pwa