PWA with SAP
Commerce

Understanding Progressive Web App with SAP & TA Digital

Understanding Progressive Web App

A replica of websites written in JS and HTML5 enabled to be responsive for small screen mobile users, work like a natively developed app

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.”

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 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 the entire website, and the content served to eliminate the need to be online.

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 suing  Progressive web apps than Responsive web Apps

  • Adding an icon to the home screen is something RWA’s cannot do and PWA’s 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 something greatly feature of PWAs

Well, its all good, why can’t we all do PWAs, well there are limitations as well

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 how one can leverage 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

  • 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
  • org metadata, Social metadata where provided and appropriate (Schema.orgmetadata 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
  • 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
  • Site uses cache-first networking
  • 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
  • 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

  • Greate 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 essentialfor 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-ViewModel(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 are first, Knockout is used to extend HTML, which in turn makes it easier to learn, and it does not require JSX. Secondly, templating making it easier to build complex apps without duplication of DOM elements.

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