What is PWA?
When Google came up with the PWA, it didn't have a precise definition. It is not a specific technology, but a combination of techniques to improve the user experience. Those technologies are Web App Manifest, Service Worker, Web Push, etc.
The main features of PWA are as follows.
- Reliability - instant loading, even in unstable or disconnected network environments.
- User experience - rapid response, with smooth transition animations and feedback on user actions
- Stickiness - like the Native App, can be added to the home screen and receive offline notifications.
PWA itself emphasizes Progressive (Progressive) in two perspectives.
- PWA is still evolving;
- PWA is downward-compatible and non-intrusive. It costs developers little to use the new features - developers can add it to the existing site progressively.
Google's "Progressive Web App Checklist" defines those minimum requirements for PWA.
- served over HTTPS.
- Pages should be responsive on desktop, tablet, and mobile devices
- All URLs have content to show in case of disconnection, not the default browser page
- requires Web App Manifest to be added to the desktop
- Faster page loading and shorter delay, even on 3G networks
- It displays correctly in all major browsers
- Smooth animation with immediate feedback
- Each page has its own URL
Features of PWA
A PWA combines the benefits of both the Web App and Native App and gives us the following features.
- Progressive - for all browsers, as it is developed with progressive enhancements in mind
- Connectivity agnostic - Ability to leverage Service Worker for offline or low network connectivity.
- Native experiences - on the App Shell model, they should have Native App interactions.
- Continued updates -- always up-to-date, no version or update issues.
- Security - Served over HTTPS
- Indexable - manifest files and Service Workers can be recognized and indexed by the search engine.
- Stickiness - By pushing offline notifications, etc., you can get users back to your app.
- Installable - users can easily add web apps to the home or desktop without going to an app store.
- Linkable - share contents through links without downloading and installing them.
More specifically, what is the advantage of PWA over the native app? Openness and index-ability. Users can hardly install a native app instantly and search across native apps seamlessly.
The table below shows the comparison between t raditional Web App, Native App, and PWA for each feature.
Installable | Linkable | User experience | User stickiness | |
---|---|---|---|---|
Traditional Web | ❌ | ✅ | ❌ | ❌ |
Native App | ✅ | 😐 | ✅️ | ✅ |
PWA | ✅ | ✅ | ✅ | ✅ |