Dynamic Routing with JavaScript

Presented at Blitalk: Scaling the Navigation at 26 October 2021

Transcript

1. DYNAMIC ROUTING WITH JAVASCRIPT Prawira Jalu
2. Overview • Problem • Solution • Architecture Diagram • Components • Implementation • Demo • Possible Pitfalls • What’s Next?
3. Problem Let’s say we have a native page. In next release we are introducing a non-backwards compatible changes to the page and we want the old apps to redirect into a web page. Other than that, at Blibli there are past scenarios when we need the flexibility to make navigation changes but without breaking past apps’ navigation and without app update. Deeplink: /promosi/kk-bca Native page: PromotionActivity Redirected to: https://www.blibli.com/promotion/kk-bca opened in WebView /product-detail/<sku> into /p/<name>/<sku>
4. Problem Since it’s impossible to retroactively updating a past app release, how can we do something so that in the future if something similar happens we can change the navigation?
5. Dynamic Routing with JavaScript
6. Dynamic Routing with JavaScript Leveraging the ability to bind JavaScript code and Android code by using WebView’s capability to execute JavaScript methods.
7. Dynamic Routing with JavaScript
8. Execute JavaScript Execute JavaScript using evaluateJavascript(). Since API 19, we can evaluate (execute) a JavaScript syntax in the context of the currently displayed page and retrieving the return value.
9. Execute JavaScript For API 18 and below we would have to use loadUrl paired with JavascriptInterface instead. JavaScript Interface enables your JavaScript code to call a method in your Android code. JavaScript code.
10. Putting Things Together
11. Dynamic Routing with JavaScript
12. Serving the JavaScript File Create a JavaScript file that will process the navigation request and return the destination URL. From CMS or API, send the JavaScript file and save it in local storage.
13. Example JavaScript File
14. Running the WebView Load the stored JavaScript to the WebView. Prepare a method to execute the JavaScript method that will return the destination URL. For API 18 and below, add JavaScript interface to receive the destination URL.
15. Receiving Click Events Receive click events and redirect it to the method that executes the JavaScript method loaded in the WebView.
16. Example Implementation
17. Example Implementation
18. Routing to Destination URL Get the destination URL from JavaScript evaluation result and navigate to the desired page.
19. Let’s See it in Action
20. Things to Take Care of
21. Security The most important thing is to make sure that we are only loading the JavaScript file that we write. Enabling JavaScript, especially adding JavaScript Interface can be used to allow JavaScript to control the host application. Which is why you should only load the JavaScript file that you write.
22. Error Handling We also must take care of error handling in case of JavaScript file error or some parsing error.
23. What’s Next?
24. Further Usage Basically, we can use WebView’s capability to execute JavaScript methods if we need some dynamic feature that doesn’t require app update. Using the same principle, we’ve also developed Dynamic WebView Analytics, but that’s for another time.
25. We are Hiring! Check https://careers.blibli.com
26. THANK YOU