What is progressive web app(pwa)?
Purpose of this article
In this article we will introduce concept of progressive web apps and its advantage and disadvantage when comparing to web apps and native apps.
Contents
- What is progressive web app(pwa)
- Advantage of progressive web apps (comparing to web apps and native apps)
- What features you can and cannot implement in PWA?
What is a Progressive Web App (PWA)
Have you ever rejected by app store or play store when updating your mobile application? Are you tired of waiting their approval to update your application? Then progressive web app is a considerable solution to implement and provide your application in real time to your users.
We are implementing a B2B service. Thus our application is not a commercial application. So we were finding solution which is not reliable to app store and play store, and updates could be in real time without delay. Then we found out about PWA and started to research about it.
Progressive Web Apps(PWAs) are web applications that feels like a platform-specific application. They are fast, reliable, engaging and installable.
Advantage of Progressive Web Apps
- Real time update
PWAs are web applications, then users don’t have to install it from app store or play store and updates are available without any delay.
- Installable (can set home screen icon)
If users want, they can add PWA into their mobile home screens and reach it by clicking its home screen icon like native applications.
- Receive push notification
PWA is able to receive push notifications like native apps even if user closes its web browser.
- Working offline
Expect the situation, when you are the middle of some task and your network connection is lost. PWA is more reliable like native applications which users ongoing tasks are restored when network connection is lost and after your device is online it continues this task again.
- Good performance
PWA doesn’t load its content every time entering to new page like web apps. Because pwa caches its assets using service workers. Service workers run separately from the javascript main thread and caches assets.
- Require low data usage
PWA caching system make it possible to require a lot less bandwidth than traditional web apps.
What features PWA can and cannot do according to internet browser?
- Safari IOS
- Offline Mode — YES
- Background Sync — NO
- Credentials — NO
- Inter App Sharing — YES
- Local notifications — NO
- Push Messages — YES
- Idle Detections — NO
- Permissions — NO
- Bluetooth — NO
- NFC — NO
- USB — NO
- Serial Port — NO
- Geolocation — YES
- Geofencing — NO
- Device Position — YES
- Device Motion — YES
- Screen orientation & Lock — NO
- Presentation — NO
- Full Screen — NO
- Audio&Video Capture — YES
- Advanced Camera Controls — NO
- Recording Media — YES
- Online State — YES
- Battery Status — NO
2. Samsung Browser
- Offline Mode — YES
- Background Sync — YES
- Credentials — YES
- Inter App Sharing — YES
- Local notifications — YES
- Push Messages — YES
- Idle Detections — NO
- Permissions — YES
- Bluetooth — YES
- NFC — NO
- USB — YES
- Serial Port — NO
- Geolocation — YES
- Geofencing — NO
- Device Position — YES
- Device Motion — YES
- Screen orientation & Lock — YES
- Presentation — YES
- Full Screen — YES
- Audio&Video Capture — YES
- Advanced Camera Controls — YES
- Recording Media — YES
- Online State — YES
- Battery Status — YES
As seen the above list (thanks for https://whatwebcando.today), Apple has more limitation to PWA. But safari is still supporting PWA and new features are becoming available in PWA.
I hope that you had some understanding about PWA and decided whether you need PWA or not. If you decide to implement your service using PWA in react typescript, then keep following next article to start your own pwa using reactjs.
Resources
https://www.youtube.com/watch?v=z2JgN6Ae-Bo
