Boost Page Speed By Using Only A CSS Property!

Prosenjit Chowdhury — Sat, 29 Aug 2020 13:50:21 +0000

Google just released Chrome 85, the major update for this browser in 2020. Just like those previous major updates, Chrome got a bunch of fixes and new features. Which includes content-visibility: auto also.

When we develop a site or page for a browser, it requires several steps to render or to show the page to the users. Browser goes through multiple processes before even it paint its first pixel of our site. After that it does these process for the whole page including the contents or elements that is not visible or not in the viewport yet.

After publishing of Chrome 85, developers now can easily make this process shorter by using content-visibility: auto to an element. This CSS property tells the browser that specific element can be skipped until it has been scrolled to the viewport.

#element {
    content-visibility: auto;
}

I have already applied it to one my project and the performance boosted impressively than earlier. Previously the Lighthouse speed was 66. But after applying content-visibility: auto to the elements that will be scrolled later, made the performance speed to 83. Which is amazing!

So start using it now and discuss your experience in the comments section.

Publishing React App on Google Play Store - Trusted Web Activity (TWA) Basic Guide

Prosenjit Chowdhury — Sat, 11 Jul 2020 13:51:54 +0000

When I first heard about Trusted Web Activity (TWA) I was very amazed and excited to publish my first app on play store. Recently I have published my Next.js (React SSR) PWA on Google Play Store as TWA and I will try to share all information, process and experiences about TWA in this article.

As you already know, TWA is a way of publishing your PWA on Play Store. It runs in a Chrome instance or Chrome Custom Tab (CCT) on a user's device. It gives way beyond features than a web-view on an android app, such as - Web Push Notification, Background Sync, Chrome Form Autofill, Media Source Extensions (MSE) and Web Share API.

Why TWA?

So far I have gathered some of my personal experiences regarding TWA. Including -

Efficient codebase - This technology gives a company or a developer to maintain a single code base for most of the platform which is very efficient,
Instant update - Updates on TWA doesn’t require to go through the review process of Play Store after every update, which saves time and serves to the user instantly,
Device Compatibility - Most of the android app developers face a problem of providing support to every devices, specially for the devices having less amount of RAM. But for TWA, it isn't required to test for all device models as it works on every device that supports Chrome 72+.

Criterias for TWA

This is actually the most important part to publish your app on Play Store. To publish your web app on play store some requirements need to fulfilled, such as -

To become a TWA, web-apps need to be a PWA at first. Which means, you have to fulfill all the requirements of PWA. Some articles say that loading speed is measured using Lighthouse and web content in TWAs must achieve a performance score of 80. But in my case, I had to use libraries like Material UI and others to deliver the app ASAP, that’s why I had to compromise with my app performance which was 66 (measured by Lighthouse). But After going through the review process of the Play Store, my app was finally approved. That's why I think having the performance score of 80 isn’t a requirement anymore for TWA.
TWA needs to have a Digital Assets Link which proves both app has been published by the same developer,
The app must meet the Play Store policies. As google can't always guarantee that your web contents meet the Family Program Requirements, you have to select your audience age should be 13+ while publishing your app through Play Console.

Setting up the Environment

Get the Java Development Kit (JDK) 8

The Android Command line tools requires the correct version of the JDK to run. To prevent version conflicts with a JDK version that is already installed, Bubblewrap uses a JDK that can be unzipped in a separate folder.

Download a version of JDK 8 that is compatible with your OS from AdoptOpenJDK and extract it in its own folder.

Warning: Using a version lower than 8 will make it impossible to compile the project and higher versions are incompatible with the Android command line tools.

Get the Android command line tools

Download a version of Android command line tools that is compatible with your OS from https://developer.android.com/studio#command-tools. Create a folder and extract the downloaded file into it. This will further install the androidSdk and android SDK manager without needing to install the whole Android IDE.

Tell Bubblewrap where the JDK and Android command line tools are

When running bubblewrap for the first time, it will ask where it can find the JDK and Android command line tools. So, take note of the location where both were decompressed.

To ensure if you are taking note of the correct location, check if each directory contains the following files:

The OpenJDK path should contain bin,com,include ..
The AndroidSDK path should contain tools which should have bin, cli

Updating the location of the JDK and / or the Android command line tools

If the location for the JDK or the Android command line tools have been setup with the wrong path or if their location has changed after the initial configuration, the location for either of those can be changed by editing the configuration file at ${USER_HOME}/.llama-pack/llama-pack-config.json.

Sample llama-pack-config.json

{ 
  "jdkPath":"\\user\\home\\bubblewrap-user\\open-jdk",
  "androidSdkPath":"\\user\\home\\bubblewrap-user\\android-cli"
}

Quick-start Guide

Installing Bubblewrap

npm i -g @bubblewrap/cli

Initializing an Android Project

Generate an Android project from an existing Web Manifest:

bubblewrap init --manifest https://your-web-app-url.com/manifest.json

When initializing a project, Bubblewrap will download the Web Manifest and ask you to confirm the values that should be used when building the Android project.

It will also ask you for the details needed to generate a signing key, used to sign the app before uploading to the Play Store.

Building the Android Project

bubblewrap build

When building the project for the first time, the Android Build Tools will need to be installed. The tool will invoke the installation process for the build tools. Make sure to read and accept the license agreement before proceeding. This process will install the other required files inside the directory/decompressed root directory of the android CLI package.

As a result of the build step, the tool will generate a signed APK (app-release-signed.apk) and an unsigned APK (app-release-unsigned.apk). You can choose any of them to be uploaded to the Play Store.

Publish your App through Play Console

You can choose to upload the unsigned APK and let Google manage your app's signing key. Go to Google Play console and signup for your developer account if you don’t have any. You’ll need to pay $25 to create this account. Then create an alpha, beta or internal release for your App. You can follow their guidelines to create your releases. Don’t forget to choose the age range from 13+ or your app publishing request won’t be accepted.

Creating Asset Link File

To create an Asset Link, you need to have a JSON file accessible from your web app URL. The URL of that JSON file should be https://your-web-app-url/.well-known/assetlinks.json. As mentioned earlier, I have used Next.js to build my web-app. If you have done the same, then create a folder named .well-known in your public folder of your project directory. In that folder create a file named assetlinks.json.

Then go to Google Play Console, select your app release and copy SHA-256 certificate fingerprint from under the App signing certificate section. Edit your assetlinks.json file like this,

[{
  "relation": ["delegate_permission/common.handle_all_urls"],
  "target": {
    "namespace": "android_app",
    "package_name": "com.appspot.pwa_directory",
    "sha256_cert_fingerprints": [
      "FA:2A:03:CB:38:9C:F3:BE:28:E3:CA:7F:DA:2E:FA:4F:4A:96:F3:BC:45:2C:08:A2:16:A1:5D:FD:AB:46:BC:9D",
    ]
  }
}]

Change the package_name value that was given or created when you have built you APK using Bubblewrap. Usually it becomes like com.your-web-app-url.pwa where your web-app URL might be https://pwa.your-web-app-url.com. Place sha256_cert_fingerprints value of SHA-256 certificate fingerprint that was copied from Google Play Console. Don’t forget to publish this JSON file ASAP after you applied for publishing your android app to Play Store.

Wait For Confirmation

After finishing the procedure as mentioned above, wait for the confirmation from Play Store authority about publishing your app. Usually it takes 1-2 days to finish the review process. But I published my app in June 2020 and due to COVID-19 situation Google took more time to finish the review process.

After submitting for review Google confirmed the publication of my first TWA app on Play Store after 5 days. Try publishing your web app on Google Play Store today. Happy Coding!

DEV Community: Prosenjit Chowdhury