TCS PWA Architectural Suggestions

Jan, 2020

| Copyright © 2019 Tata Consultancy Services Limited

1a Environment Setup

a. Server and it’s configuration

Development Stage Production
• OS: Mac / Ubuntu / Windows • OS: Ubuntu / Windows / CentOS • OS: Ubuntu / Windows / CentOS
• Ram: 16 GB • Ram: 16 GB • Ram: 16 GB
• Rom: 10 GB • Rom: 10 GB • Rom: 10 GB
• Domain / Sub-domain with SSL binding • Domain with SSL binding
• Configuration for FTP Connect • Configuration for FTP Connect

2
1b Environment Setup

b. Software and Tools

• Software and tools installation on servers
Development Stage Production
• NodeJs V_6.XX • NodeJs V_6.XX • NodeJs V_6.XX
• Cordova • Cordova • Cordova
• Ionic V_2.2.4 • Ionic V_2.2.4 • Ionic V_2.2.4
• FileZilla • Notepad++ / Vim / Nano • Vim / Nano / Notepad++
• Visual Studio Code • Light House tool
• Notepad++ / Vim / Nano
• Photoshop
• Postman
• Light House tool
• Browser: Chrome, Safari, Firefox
• Code Versioning tool (TFS & VSTS)

3
2a Functional Architecture

Sales Rep Directed Detailing Platform

Notifications Clinical Cases Ablation Size Procedure

Sales
Representative Upload / Update Case Records / Reports Video Local SQLite
PWA
Documents (.pdf)

APIs
• Product
Catalogue &
description
APIs • Characterises
Description
• Images
• Technical
Insights
Images
Content (Showpad) Service Worker
Azure SQLite

Physicians

4
2b Technical Architecture

PWA Application
Functional Components Mobile Backend
Case Procedures Middleware APIs Data
Clinical Ablation
Login Sales Rep Records / &
Cases Size
Home Reports Documents

Azure SQL APIs, MS Azure SQL

Algorithm & Operations (AngularJS) Showpad APIs

c
UI/Presentation Layer
(Ionic Framework) Data Content Ablation
Offline
Rendering Rendering Algorithm

Hybrid Plugins / Native Feature Plugins

Data
Service Access Layer Data Access Layer Orchestration ,
Ablation data-point
Common Utilities Local App Database Algorithm, Sorting
Showpad
Exception
Security Logger SQLite
Handler

5
2c Integration Architecture

PWA Integration with

Applications
API Life cycle

Showpad APIs
Security Management Rest API
Clinical Case,
Record, Report, Rest API
Orchestration Showpad Storage Showpad
Details
Synchronization • Brochure
• Tech docs
e Rest API • Image
Rest API • Procedure
Ablation Data Azure APIs Videos from
Azure API different
Rest API doctors
Rest API Authentication • Case Records
Authentication API Reports

API Layer (MS Azure)

6
3a Without Service Worker application work model

• In Normal Application Work Model

1. Request

3. Get Data
Depend on network connection!

2. Response

Browser
Server

7
3b PWA Work Model

• PWA Work Model when Online

Local Network

1.Request
3. Return the Data
5.Response

Browser
Service Worker Online

2. Fetch from Cache 4. Update Cache

Server

Cache

8
3c PWA Work Model

• PWA Work Model when Offline

Local Network

Request

Response No longer depend on

network connection
Browser
Service Worker Offline

Fetch from Cache

Server

Cache

9
4 PWA Workflow
• App Shell: Fast Loading, Host Pages, Help provide native experience
Overview • App Manifest: Home Screen icon, App like experience
• Service Worker: Offline Experience, Cache

Request
App Service
App Shell
Manifest Worker Response

API Authentication Showpad

PWA APP
10
Thank You

11