1. This document is confidential and contains proprietary information, including trade secrets of CitiusTech. Neither the document nor any of the information
contained in it may be reproduced or disclosed to any unauthorized person under any circumstances without the express written permission of CitiusTech.
Introduction, Use Cases and Migration
to Progressive Web Apps in Healthcare
April 2020
Authors: Vidhya Jain; Solution Architect & Harshal Sawant; Sr. Solution Architect
CitiusTech Thought
Leadership

2. 2
Agenda
 Introduction to Progressive Web Apps
 PWA Adoption in Healthcare
 PWA Use Cases in Healthcare
 Steps for Successful Migration to PWA
 Conclusion
 References

3. 3
Introduction to Progressive Web Apps (PWA)
 Progressive Web Apps or PWA are web
applications designed to work on most platforms
such as native apps on iOS, Android, Windows,
Chrome, etc.
 PWAs combine the capabilities of website and
mobile by creating apps that have features such
as offline access, self-updates, easy installation,
security, responsive design, etc.
 PWA advantages:
• Platform and device agnostic
• Fast installation and OTA updates
• Native app user experience
• Push notifications
• Offline storage
• High performance
• Low development costs
• Enhanced security
PWA Highlights
 68% rise in mobile traffic
 52% average increase in conversion rate
 25x reduced use of storage device
 15x improved load and installation
speed
 137% more engagement
 ~133% increase in page views
 78% average increase in sessions
 ~43% lower bounce rate compared to
mobile websites
 3x lower data usage
 70% greater conversion rate among
those arriving via add to Home screen
 3x more time spent on site than mobile

4. 4
PWA Adoption in Healthcare
 Healthcare organizations frequently use desktop
or web apps for OPD management, patient
registration, appointments, medical billing,
encounters, etc.
 Mobile support for desktop and web apps will
allow easy access and faster care
 Traditionally, healthcare organizations use native,
hybrid, and cross-platform technologies
 Recent announcements such as UIWebView API
deprecations by Apple have pushed healthcare
organizations to revisit their mHealth strategy
 PWA is a suitable option to redefine mHealth
strategy for low maintenance, scalability, easy
updates and more.
PWA could address long term challenges
such as:
 App maintenance
 API deprecations and OS updates
 App vulnerabilities and security audits
 Technology learning curve and
development effort
 App deployment and distribution
 Direct update for numerous devices
 Secure offline storage
 User retention

5. 5
PWA Uses Cases in Healthcare (1/2)
Feature Details Use Case
Offline
Functionality
Support healthcare apps that need
offline and caching function.
 Patient education apps
 Offline physician directory
Secure App
Distribution
Healthcare organizations with lean IT can
serve their app over HTTPS URL instead
of any app store using PWA.
For apps involving:
 HIPPA Compliance
 PHI Data
 Medical Imaging
 EHR
Platform and
Device Agnostic
Healthcare apps with PWA can work on
most browsers, mobiles, tablets with
single codebase.
 Provider patient engagement apps
 Member engagement
 Home care and hospice
Push
Notifications
PWA supports notifications or alerts
across browsers, desktops, and mobile
devices.
 Alerts, reminders to check vitals
 Appointment notification
 ER notification
Re-engineering
Healthcare Apps
Mobile support for current healthcare
apps to drive higher user adoption.
 Legacy web apps
 Access test reports via mobile
 Medical billing, accounting apps

6. 6
PWA Uses Cases in Healthcare (2/2)
Feature Details Use Case
High Performance
Apps
Uses service worker and caching
methodology to cache pages and deliver
high performance.
 Smart messaging / reminders to
confirm or re-schedule visit
 Medication schedule and history
 Chat with doctors and service
desk
Low Costs Migrate existing web apps to PWS,
resulting in minimum infrastructure costs
and operational learning.
 Patient registration
 Appointments
 Medical billing and encounters
Fast Installation &
OTA updates
PWA are deployed over secured HTTPs
URL for easy distribution and automatic
updates.
 Promo apps (e.g. special offer on
checkups)
 Payment and insurance claim
status
Responsive
Layout
Media Queries, Flex Layout allows for
development of a single app and auto
adjust layouts for desktop, browser,
mobile etc.
For apps involving:
 Chronic disease management
 Patient enrollment
 Insurance claim

7. 7
Steps for Successful Migration to PWA (1/2)
 Existing healthcare web apps can be extended to support mobile for higher user adoption rate using PWA
 Migration to PWA depends on many factors like current user base, UI layout design, offline strategy, current
tech stack, libraries usage, capacitors usage, security, performance, etc.
 Detailed analysis and approaches should be followed on parameters like performance, accessibility, best
practices, SEO, etc.
1. Perform Lighthouse
Audit
Lighthouse is an open-source tool to audit for performance, accessibility,
PWA, SEO and more. It ensures all PWA features are in order.
2. Add PWA Package A PWA package boilerplate code for starting PWA application. Include
necessary elements like service worker, manifest etc. in the code. For
instance – ng add @angular/pwa
3. Service Worker
Implementation
Registering service worker and caching implementation serves static and
dynamic content on pages. Leverage out-of-box tools such as Workbox for
offline strategy.
4. Add metadata in
“manifest.json” file
For “Add to Home” feature, add details such as – short name or name,
display, start URL, icons, description, background color, theme color etc.

8. 8
Steps for Successful Migration to PWA (2/2)
5. Responsive Layout
Implementation
Use media queries and Flex layout to develop responsive design. Out-of-box
web component responsive libraries help build the look and feel of an app.
6. Push Notification
Implementation
Leverage service worker events to implement push notifications. Follow best
practices such as provider context to user, control to enable / disable
notification, etc.
7. Serve PWA
on HTTPS
Use SSL / TLS certificate to serve webserver on HTTPS and proxy all requests
through some service to avoid any data leakage or security vulnerabilities.
8. Code for
Performance
Eliminate render-blocking resources, avoid huge DOM size, encode images,
remove unused CSS etc. to meet PWA performance.
9. Follow Best Practices
for PWA
Avoid using deprecated APIs, provide fallback content when JavaScript is
unavailable, and avoid application cache while creating PWA.

9. 9
Conclusion
 Organizations need to keep up with upcoming trends and adopt emerging technologies to be
competitive. Shifting to PWA could give organizations an opportunity to grow user engagement
and drive business results
 Migrating existing web apps to PWA is an effort intensive exercise and needs critical assessment
before implementation
 Assessment should include - evaluation of current front-end tech stack used, total number of
pages/features, offline features, security considerations, capacitors usage, etc.

10. 10
References
 https://developers.google.com/web/showcase
 https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0
 https://ionicframework.com/pwa
 https://ionicframework.com/docs/angular/pwa
 https://www.progressivewebapp.com/medical-industry

11. About CitiusTech
4,000+
Healthcare IT professionals worldwide
1,500+
Healthcare software engineering
400+
FHIR / HL7 certified professionals
25%+
CAGR over last 5 years
110+
Healthcare customers
 Healthcare technology companies
 Hospitals, IDNs & medical groups
 Payers and health plans
 ACO, MCO, HIE, HIX, NHIN and RHIO
 Pharma & Life Sciences companies
11
Thank You
Author:
Vidhya Jain
Solution Architect
Harshal Sawant
Sr. Solution Architect
thoughtleaders@citiustech.com