Like a typical website, PWAs are hosted on a server and distributed using URLs instead of app stores. They utilize Service Workers technology, allowing the website to work offline. Service Workers cache the site on the user's device and provide an icon for the bookmark.

So, is it the same as a responsive website? How is it different?

While the answer is yes and no, a PWA is the next level of technology to the Responsive web app. In simple terms, PWA technology enables a responsive website to leverage the new features supported by modern browsers to make it a Progressive Web App.

Let's understand a little deeper, PWA supports using technology features like service workers, web app manifests, push notifications, offline support, etc., and the application cache feature of  HTML5. Application Cache allows websites to store significant amounts of data offline, and as a result, it can function similarly to a native application. This HTML protocol enables caching of the entire website, and the content served to eliminate the need to be online.

Here are the 10 Digital Commerce Strategies to Prepare for the Post-Pandemic World.  ||  Sign up today for the latest news about your Digital Transformation.

Most of the handheld devices are well integrated with HTML5 APIs. As it is hard to list all the device integration API's, let's look at those additional features implementations get benefited by using Progressive web apps than Responsive web Apps:

• Adding an icon to the home screen is something RWAs cannot do and PWAs can
• Enabling the icon in the apps list. Using WebAPKs – PWA's can now be packaged into actual install-able Android packages
• Launching in full-screen with Clipboard access
• Hardware-accelerated 2D/3D graphics via HTML5 Canvas or WebGL
• Accessing the filesystem (Chrome and Opera) and reading user-selected files in any browser
• Slick, smooth UIs with 60fps animations is a great feature of PWAs

Well, it’s all good. So, why can’t we all do PWAs?

Although the Progressive web app can do most of the functionalities required by most apps, there are still some features that are not supported, and technology features PWAs cannot support.

• Compared to the native app, some of the telephony features like Intercept SMS or calls, Send SMS/MMS features, Get user's phone number services, Voice mails, Make phone calls without Dialer dialog, Access to contacts, calendar, and browser, Access to alarms are not entirely supported
• Access to low-level hardware features and sensors like the flashlight, atmospheric pressure sensor from the devices are not integrated to PWAs
• Access to task management, modifying system settings, and logs or device-based functions is a limitation to PWAs

Is it easy to convert a responsive website to a progressive website or PWA?

Even though both the technologies premise is the same, there is a process on leveraging the PWA from an existing responsive website. To make life easier, Google has provided a criterion of checklists to call a website a PWA.

Baseline Criteria Checklist for transforming to PWA:

• The site is served over HTTPS
• Pages are responsive on tablets & mobile devices
• All app URLs load while offline - Load various pages in the PWA with an airplane mode enabled. Ensure the app presents some content even when offline.
• Metadata provided for Add to Home screen
• First, load fast even on 3G
• Site works cross-browser
• Page transitions don't feel like they block on the network (Transitions should feel snappy as you tap around, even on a slow network, a key to perceived performance.)
• Each page has a canonical URL

Exemplary Criteria Checklist for transforming to PWA:

• Google indexed site content
• Schema.org metadata, social metadata were provided, and appropriate (Schema.org metadata can help improve the appearance of your site in search engines.)
• Canonical URLs if the content is available via multiple URLs.
• An important point to remember is that Pages use the History API, and content doesn't jump as the page loads
• Pressing back from a detail page retains scroll position on the previous list page
• Content is easily shareable from standalone or full-screen mode
• The site is responsive across phone, tablet, and desktop screen sizes
• Any app install prompts are not used excessively
• The Add to Home Screen prompt is intercepted
• First load very fast even on 3G
• The site uses cache-first networking
• The website appropriately informs the user when they're offline
• Provide context to the user about how notifications enabled
• UI encouraging users to turn on Push Notifications must not be overly aggressive
• The site dims the screen when the permission request is showing
• Push notifications must be timely, precise, and relevant
• Provides controls to enable and disable notifications
• User is logged in across devices via Credential Management API for sites with sign inflow
• Users can pay quickly via native UI from Payment Request API. for site accepting payments

There are numerous open-source tools out there. Below are a couple of strong and easy ones to work with:

Polymer template - an open-source project by Google, frequently updated to keep it in sync with the open-source projects the template leverages. Advantages include:

• Great for starters
• Significant reduction in the setup time
• Uses the PRPL pattern to optimize the delivery of the app to the device
• Most commonly used to Push critical resources for the initial route
• Natural rendering of the initial route, and pre-cache the remaining routes, plus a lazy-load to create remaining routes on demand

Webpack - where custom app development is needs Webpack fits the stack well. It relies on a module bundler for JavaScript applications. Some advantages include:

• Webpack makes creating dependency graphs much more manageable. A dependency graph removes the need for managed dependencies, meaning you no longer need to link to all those JS files at the bottom of an HTML web page. 
• Moving to CommonJS or ES6 modules dramatically reduce the number of calls to and from a server, resulting in a faster app.
• With Webpack, all non-code assets (images, CSS, fonts, etc.) gets accessed via JavaScript as objects that have significant speed benefits.
• Not a pro, but on the con side, Webpack is not perfect. 
  • The learning curve is a little harsh (but manageable)
  • The documentation code is not great. But Webpack is essential for complex, front-end driven progressive websites.

Knockout - One of the best tools to build lightweight progressive apps. Creators of knockout use PWA in conjunction with JavaScript to handle Model-View-View Model (MVVM) bindings. Here are the key benefits of Knockout that have kept it in our toolbox:

 

• The library is easy to drop into existing websites without an extensive rewrite.
• The library is tiny (only 13KB). While small, the library still offers a great deal of functionality.
• Knockout is a great "go to" framework for smaller projects, where the speed of execution is paramount.
• There are two strong reasons. First, Knockout is used to extend HTML, making it easier to learn, and it does not require JSX. Secondly, templating making it easier to build complex apps without duplication of DOM elements.

Read our new blog on how to implement the Buy-on-the-Fly Commerce concept with Drupal.   ||  Our Digital Strategy Practice creates long-term digital roadmaps by leveraging people, processes, and tools to improve efficiency and innovation.

There are several other tools like Lighthouse, AMP, Angular JS, Ionic2, and the list goes on, you got the point.

The bottom line is that the tools for progressive web apps are still maturing and changing at a rapid rate. Many of the leading browser vendors, specifically Apple (with Safari and mobile Safari), Google (with Chrome), and Microsoft (with Edge), provide regular updates every 1-3 months. We are always keeping a close eye on new solutions and evaluating how or if we should be using them in our projects. The end goal is to increase the app-like experience using web technologies, explore and innovate with us. If you are interested in looking at some live examples, here are some PWA references:

1. Uber - Using tiny libraries and SVGs instead of images where possible, the m.uber.com core app is only 50 kB gzipped and loads in less than three seconds?—?on 2G networks! Learn more about Uber's PWA at https://eng.uber.com/m-uber/

2. Tinder - Tinder comes at only a fraction of the size of its native versions. While Tinder's Android app requires 30 MB downloaded. PWA delivers the core Tinder experience at a data-cost of 2.8 MB. Learn more about Tinder's PWA at https://medium.com/@addyosmani/a-tinder-progressive-web-app-performance-case-study-78919d98ece0

3. Pinterest - Realizing that it had a weak mobile presence, Pinterest reinvented its mobile experience and developed a PWA. As a result of this change, user time spent on the mobile site increased by 40 percent, and user-generated ad revenue and core engagement increased by even more. Learn more about Pinterest's PWA at https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154

About the Author

Venkata is the Head of SAP Practice at TA digital. With 22 years of experience in implementing SAP Projects, Venkata has multi-industry experience in providing customers the best of breed innovations in Customer Experience and Relationship Management.