Introduction to PWA & TWA
Progressive Web Applications
Progressive Web Applications (PWA) is a web application that provide a native web app experience to user using a browser. They are web apps that are actually web sites and using progressive enhancement, new capabilities are enabled in modern browsers. They are able to use of latest technologies like push notifications, cache, secure connections, and etc. Progressive Web Apps (PWA) are built and enhanced with modern APIs to deliver enhanced capabilities, reliability, and installability while reaching anyone, anywhere, on any device with a single codebase.
Three pillars of Progressive Web Applications
These three pillars transform our website into an experience that feels like a platform-specific application:
- Capable
Make sure our website is responsive in style and capable to be accessed in various device type, such as desktop, tablet, and mobile. - Reliable
Our website needs to have good performance, so the page load will be fast and the transition will be seamless, like we access a native apps. - Installable
Our web apps needs to be installable, so users can install and launch it like a native apps.
What does it take to be installable?
- The web app is not already installed
- Meets a user engagement heuristic
- Be served over HTTPS
- Includes a web app manifest. The web app manifest is a JSON file that tells the browser about your Progressive Web App and how it should behave when installed on the user’s desktop or mobile device. It needs to include:
* short_name or name — PWA will decide which name to be shown based on device.
* icons — must include a 192px and a 512px icon
* start_url — path URL that will be accessed when we first access the apps.
* display — must be one of fullscreen, standalone, or minimal-ui
- Registers a service worker
A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction. Examples of usage: push notification, background sync, offline experience, and etc. To assess whether our web apps fulfill PWA criteria or not, we can user Lighthouse tool in Chrome browser DevTools. It will show the requirement we need to follow.
PWA Browser Compatibility
PWA is compatible with the latest version of these browser:
- Chrome (Desktop and Android)
- Firefox (Android)
- Safari (iOS)
- Microsoft Edge
- Samsung Internet
Trusted Web Activity
Trusted Web Activity (TWA) and Progressive Web Applications (PWA) are connected. A Trusted Web Activity (TWA) is merely an Android app but does not need to create it. All we need to do is launch the required PWA site into the Android app. A Trusted Web Activity allows Chrome (v72 or later) to run a website in fullscreen mode without a browser toolbar within an APK (Android Package). Since TWA is based on Chrome Custom Tab, it has access to Chrome features. They share data like cookies that are stored with Chrome.
The word trusted comes from the fact the app and the website belong to the same developer. They have digital asset links which ensure the ownership. For the digital asset links in our web apps, create a file that contains the contents from the digital asset tool that is publicly accessible from your PWA’s web host at the following path: .well-known/assetlinks.json. The value of the namespace and package_name is depend on the Android project that we setup. For the fingerprints, we can extract it from the Android apps keystore. Don’t forget to deploy our web app when complete.
PWA requirement for TWA
These things are PWA requirement to be accessible in TWA:
- Be compliant with Google Play Policies
- Be an installable PWA
- Achieve a lighthouse performance of 80+
- Recommended: Have a privacy policy that can be accessed without login
PWA to Google Play Store steps
What are the steps for our PWA to be published in Google Play Store?
- Build a good PWA
- Sign up for Google Play, pay $25
- Create Android TWA app
- Create a keystore
- Create a digital asset link file and deploy it
- Generate a signed APK
- Create an Internal Track Release
- Upload the signed APK to Google play
- Finish the Google Play Store Listing
- Release and wait
Advantages & Disadvantages
These are advantages & disadvantages of using TWA compare to native apps:
Advantages
- Easy to maintain and deliver
- Don’t need to write code twice (web & apps)
- Cost effective
- Smaller apps size
- Faster running in low end device
- Quick for feature changes
Disadvantages
- Have limitation for functionality, depends on browser
- Experience not as good as native apps
