PWA-TWA Rakuten Pasha case. How we build an android app for 3 months.
I joined Rakuten Pasha, it is a very new service in Rakuten kind of startup from July 2019 as a full-stack web engineer, the manager wanted me to work both on server-side and frontend. However, during this period, the team wants to deliver a PWA app as soon as possible because our service only supports smartphones. In order to keep users, we need to provide an easier way to open the app, users cannot always open chrome and then enter the URL.
First PWA App
So my first task is to build a PWA app. I came from the backend and DevOps side so PWA is something new to me, I used to work with Vuejs, Javascript for a while but I never like to work with CSS, or responsive anymore. So it takes me a month to apply the PWA for our app. Here is what I have done
- Understood lighthouse tool and how to measure web score
Lighthouse, it is a very nice tool not for using to detect the PWA web app, we use this tool for checking the web performance, it also gives us how to improve our web performance.
2. Implement service worker, caching strategy
Firstly, I was trying a service worker as javascript but then we went to google PWA conference, we were suggested to use workbox framework which will make implement a service worker in an easier way. In our web site, there are so many images that are loaded and most of them are not change for some time, we will cache these images first and then next time, chrome will check the cache without waiting from the server site. We are using the CacheFirst strategy.
3. Build offline page
Build an offline page is not difficult just HTML and CSS in-line, but I got a problem that we cannot cache the image in a different file but then I convert the image to base64.
4. Create a manifest file
This file is very important to let chrome, safari detects that your site is supported PWA or not. Chrome and Safari will use this file to show or hidden address bar or not. Because our service is using basic authentication, so when the user is redirected go to the login page, this is a different page so after login, safari cannot back to our original page. This issue only happens on the IOS version before 12.2. This issue leads us to detect users' safari versions, with the iOS version before 12.2 we will not support hide bar address.
5. Improve web performance
This is the most difficult and takes most of my time, we base on lighthouses score to improve the speed performance. Here the way I have applied for our web app.
- using the lazy loading
As you know chrome 78, native lazyloading is supported but during my implementation, chrome is not official support. On our page, there are some pop-ups like user, functions guide which is not shown the first time so we do not load these images until open the popup.
- gzip file
We are using apache server, so I have enabled module deflate_module in the apache config file, you will surprise how much improve score in this case. Our service has got 80 points from 30 points before enabling this module. You can check the explain detail in this article
After around 2 months (it takes 2 months because we need to pass QA team), our app has been delivered the first PWA version. It is very convenient for users that they can `add home to screen` our app.
TWA App
After releasing a PWA app, I was thinking that I will back to work with the backend work. However, my boss said to me that he wanted to publish an android app as soon as possible because PWA is just a web version. I don’t want to mention app version advantage here because all you know that the app is always the best way to keep users royalty with our service. There are so many pages, any many functions in our web version, so building an android for a short time, it probably impossible for me. I am not an android developer and I never work with android before. But my boss said to me about TWA technology which uses a custom tab. We can build an android app and publish to store for a short time don't need to know how to code in android. It seems very interesting to me. So I started to implement a TWA app. Here what I have done so far.
- Create an android app
It is funny that I am working alone in an android project which even I never work before. So I have learned every beginning steep from an android document like install android studio, create a native app. Understand the Gradle app file, create env. How to build an APK file, use ADB command lines… There are many beginning kinds of stuff but seems there are very interesting to me.
2. Build the first TWA app
In the beginning, I follow the tutorial from google document but I got some problems.
- We need to add analyzing library like firebase.
- The library does not support Android X. this issue has raised by me so seems no many application is using this library.
- We want to control other stuff like changing the application icon, splash screen, and notification.
In order to resolve this issue, I have customized the library. You can check in this article.
3. Detect PWA and TWA on the same devices.
There a problem that when users have installed the TWA app, we must let’s users know that they don't need to install PWA app anymore. We also check that if users are surfing our app by chrome, we should show the install banner on the top to let users using the application instead of.
In this case, I will back to work with HTML and CSS to create a top banner :D But it makes fun for me.
In order to detect whether users have installed a native app or not, it is not easy at all, fortunately, we need to use chrome experimental in this article.
4. Build an app and publish it to google play store.
After around 1 month, I have done to implement a TWA but when we publish the app, I realize that there are so many steps ahead.
Firstly, we need an associate our website with the app to hidden the address bar.
However this function is not working as expected because when you upload the app to google play store, google will gen a new hash key for you, it is not the key when you gen at the local. So need to add 2 keys in asset links, you can check this issue which I have opened in the chrome forum.
The second problem when I build APK file and test in local, everything is going well but when I down the app from the google play store, there are many SDK is broken. So I realize that some codes have been shrinked
It helped me to understand ProGuard and how to apply for my project
5. Deeplink and notification
Seems everything is going well as expected, we still got an obstacle when the user gets the notification from the server site. Because the TWA app is running on chrome, so when the user opens the notification it will up with Chrome, so it is not correct, it should open in our app instead of. In this case, we need to implement a deep link.
Implement deep-link, we can get the parameter from the URL and then we can open a specific link.
6. Release the first TWA app
Finally, we have released the app after 3 months (1 month for PWA and 2 months for TWA) after passing google audit. This is the first android app in my software engineer career. As we have confirmed form the google Japan team this is also the first enterprise TWA app in Japan.
I was surprised that in order to pass the google requirement to up the app to google play is not easy and even upload the app to google play takes so many steps, not only build APK file and just upload… on the web side, we just a web and cloud account, your website will be available immediately (check here how to create your blog site with Vue.js in netlify).
7. Open a native Activity from Chrome Custom Tab with Deeplink
This is the most complicated and takes my time, but working in a native app helps me deeply understand the android activity lifecycle, layout, intent, service … and java programming.
The problem, our app needs a native camera to get analyze receipt using OCR SDK, which we cannot do on chrome. So we have to implement the click action from chrome to open Camera Activity. After taking the photo app will send it to the server-side with the user‘s information. In this case, we need to pass the user's information for chrome to the app. In order to do that we can use the deep-link and pass these parameters by deep-link query, it seems perfect but what happens if the user had not installed the application yet and the deep link is not available and all your web versions will doing nothing. So we need to detect the devices that whether the app has been installed? Thanks to the Google Chrome team, the Installed Related Apps is available from chrome 80, check here to get how to implement it.
Conclusion.
Again, today is the last day of 2019. I am happy to share that our app got 40k install just for 3 months and the top 1 in lifestyle in japan. In order to get this result, our frontend, backend, design, sale, the marketing team have worked a lot but I can be proud that as an only software engineer in charge of the android app for 6 months but we have published a useful app.
I am not sure whether I will continue to work with android in the future or not because I don't want to waste my 7 years of experience with web technology but I believe that I have learned a lot of stuff during this project.
You can download the app at this link. You can easy to get the point by upload receipt. We are providing many campaigns with many good products in the convenience stores which you even get 100 points.
