Project cases
System develop/designed before

PWA Apps for all devices

Many people think that web pages cannot be compared to native apps because websites cannot be as fast, reliable, highly interactive, etc.

The PWA is a technology to change this concept and solve the respective problems of web pages and native APPs at the same time. Users can install the web application on devices like native apps in the apps store. It can minimize the difference between the PWA website app and native apps.

Think about it first, when we use WEB or APP,
What problems might you encounter?

For web pages, there are usually two problems:

  1. slow mobile network (slow or unstable mobile network)
  2. user-unfriendly (poor user experience)

For slow mobile network
In the real world, it is around 53% of users will give up browsing the website if it loads for more than 3 seconds.

The APP has installed part of the content on the mobile phone, so when browsing the APP, the screen can be displayed more instantly, but if you browse the website on the mobile phone, the user may use 4G, 3G, or even 2G network speed. In order to display the website If the content of the SPA – Single Page Application (Client Render of the whole site) is used, HTML, CSS, and Javascript must be downloaded, and the request API will be required to return JSON. It will take time for back-and-forth transmission to obtain website information.

In an environment with poor network signals, users must wait longer to fully present the “WEB” content.

For user-unfriendly
In terms of web pages, it cannot be like a native APP. During the startup process, there will be an initial splash screen (Splash Screen), which flashes on the full screen of the mobile phone to display the company logo, image or company name. to attract the user’s attention.

On the other hand, The APP also has the function of push notifications, which can actively recommend information to users, increase browsing stickiness, and even improve the motivation of consumption behaviour.

The following project is a demonstration of PWA technology. (Please open with this link)Once the website is visited by the user, the user can click the install button in the browser.

Installation button in mobile
Installation button in PC

After the installation, all required files are also installed on the device so that is no need to download the resource during the app running. It only needs to get data from the server through API such as weather information. It can minimize the bandwidth a lot to make the responding time of the application to be fast.

After installation in mobile
Message alert from server
Message alert from server

This project also implements two more features which are weather information and currency exchange. In weather, this will retrieve London’s 6 days’ weather information from the server in JSON format. The other feature is a currency the application will get the existing exchange rate from yahoo and calculate it immediately.

PWA also supported camera units on PC/Phone. It helps us to design applications which need a camera to operate such as barcode scans, membership photos…etc. In the demonstrated application, it will snap a photo and reply to the user immediately.

The signature function is one of the popular functions for parcel received/collection and online document signature confirmation. Users can use this function for parcels received confirm and signature for online contracts and generate PDF documents with signatures. I think it is the trend in all industry future that all common documents will not sign in front of suppliers. Customers only confirm and sign in to the online application.

The mortgage function is a financial application that helps users estimate the instalments of Mortgage and how to calculate it. (The rule of 76 is not applied in it yet)

P.S: This project example can install on PC, MAC, IOS and Android devices, but the push notification is not completed for mac os and iOS versions. It needs to implementation in a little bit different method. for more detail, please click here

WhatsApp

Open WhatsApp

Contact Page

Go