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