Progressive Web App (PWA) in Healthcare
Progressive web apps can change the way we build applications in healthcare – especially patient facing ones. While other applications are used daily and might deserve a complete web application in itself, patient applications are used on an ad-hoc basis, typically on the mobile phone and on the go, at doctor offices etc.
We have experimented with various device forms previously and wanted to try our theory out – whether PWA would have higher adoption than native mobile apps.
Our first attempt was with a patient engagement app for an NYC ophthalmology group. We sent out SMS blasts to patients with the PWA app. The PWA app had links to add the application to home screen and on the login screen itself, had links to the native iOS and Android apps.
The results?
Every patient (thus far) has only use the PWA. It’s fast, it’s secure, it allows the patient to authenticate themselves by using an SMS one time password (OTP).
It’s SUPER convenient. We urge you to consider progressive web applications in healthcare software development. This truly has changed the way we think of patient facing applications.
What is a Progressive web app (PWA)?
Progressive web apps are mobile/web applications that are developed using web technologies.
In true words PWA is a real cross platform application as you build it ones and run it everywhere.
Why Progressive web app (PWA)?
From 2015 to 2019 website traffic of mobile has been raised from 31% to 52% and it is not going to stop in the future. According to the statistics the data continues to show that for most sites, the majority of their traffic comes from mobile devices.
The dilemma of mobile apps is that every step of downloading the app reduces the significant amount of users and also the reach of mobile websites is 2.5 times higher than mobile apps.
So this is where Progressive web app (PWA) got you covered. As most of the users are using websites through the mobile, when they visit the Progressive web applications they’re given a prompt of “Add to home screen” and once they click on it, your app reaches the home screen of the mobile and stands strong with other native apps.
In addition, Progressive web apps give users the advantage of first checking the app out and if they feel like downloading the native mobile app they can. If it is used infrequently, the user can use the app as any other websites.
Why did we use a Progressive web application (PWA)?
The software we were planning to develop was people-centric and the medium we used to introduce the software to the public was by SMS. So, mostly our users were going to be mobile users.
So, this was the ideal scenario where one can use progressive web application, as they are linkable we can easily share our application URL. People can download and start using the application instead of going to app store or play store and wait for its installation.
Features of a PWA
Installable:
Progressive web apps prompt allow the user to save the app on the home screen with the option of Add to home screen. This eliminates the multiple steps users have to take to download the native apps.
Offline support:
Service workers help to provide offline support to users as they cache the server request and then in the offline mode tells the client to use cache api to load the pages instead of requesting a new server call.
Security:
One of the biggest concerns on the internet is security and progressive web apps are ready to fight this problem as to be a progressive web app it must be served over a safe network.
Updates:
Progressive web apps eliminates the steps users have to take when updating the application as progressive web app can be updated from the development side without involving the user.
Linkable:
Progressive web apps can be shared easily between users as you just have to share the link.
Responsive:
Progressive web apps are responsive for every screen be it a laptop, tablet or mobile screen, it supports every screen size.
Native app experience:
Progressive we apps just look and feel like any other native app and also in terms of navigation they behave like native apps.
A PWA offers other cool features like push notification access, geo location, camera and contact picker.
How to build a Progressive web app (PWA)
Many front-end frameworks provide the feature to create a Progressive web app. For example:
We used angular to create our application. Angular is one of the most popular Front-end frameworks for developing web applications and it also provides the feature of PWA. Also you can easily convert your existing app into PWA with angular CLI.
CLI command to add PWA features in the application:
ng add @angular/pwa
This single commands perform various tasks to convert your web app into the progressive web app.
- With this command angular takes care of adding service workers in your project and enables the service worker. After this command is successfully executed you can check in package.json file that a package of @angular/service-worker has been added.
- Adds a manifest.webmanifest file in the src folder of your app. This file provide the information about the application in JSON format (i.e. Name, themes color, icon of different size etc.)
- Adds a ngsw-config.json file in your project which specifies which files and data urls angular service worker should cache.
- Updates index.html file with a link to manifest.json and meta tags for theme-color (themes the browser address bar to match the brand color of your Progressive web app).
- Installs icon files to support the installed Progressive Web App in the assets folder.
- Registers the service worker in the app module. Service workers play an important role in progressive web apps as it allows applications to control network requests, cache those requests to provide offline support. Service workers check whether the application has access to the Internet. If it doesn’t, then the service worker tells the client that it should fetch the cached version of the page instead of creating a new request to the server.
Words of caution
As it looks and feels like native app users will expect it to work like native app. So in the buttons try to give the feedback on button click.
As the progressive web application are used in both IOS and android platforms, safari standards needs to be keep in mind when developing the application (i.e. Some date format does not support on safari and works perfectly in other browsers)
Safari does not support manifest files where the icons are saved for the home screen of mobile. So, for iPhone icons needs to be added in index.html.
Progressive web apps should be responsive for every screen size and try to make the position of headers in your application fixed for the keyboard open state.
For scrolling, using a virtual scroll is ideal for progressive web applications as users will scroll very fast considering your app is being used as native application. We used cdk-virtual-scroll-viewport in our application because it loads only the visible content which results faster, smoother and app like experience for the user. The problem I faced with using cdk-virtual-scroll-viewport is that in cdk-virtual-scroll-viewport we have to define the fixed height for view-port. So for height always give calculate height as the app can be open on multiple height (i.e. web browser, IPhone and android standalone mode, IPhone and android browser)
One of the main challenges of progressive web applications are updates and service workers provides a solution for this. Using public API SwUpdate you can detect when a new version of your application is available and perform the desired steps accordingly.
Future of Progressive web app (PWA):
We can say that the Progressive web apps are the future of web application development. Progressive web apps still have a long way to go but they are on their way to giving a tough competition to native apps.
Putting it all together
Progressive web app(PWA) offers the advantages of modern browser features with mobile experience.
