Develop apps and explore the world (wide web)

I love building software. Writing code is a way to craft experiences that other people can interact with and enjoy. My favorite platform to build for is the world wide web. When I first started programming, I was building for Windows desktop computers. It was mostly utilities and games, and I really didn’t know how to distribute them. The web had always been a place to find information, and even download software, but websites were essentially documents, with little functionality. Now, they can have the full breadth of interactivity that native applications enjoy. Having moved into the age of mobile software, being able to build for the web has many advantages.

The web, as a platform, is open and free. Unlike native app markets, you don’t have to wait for your software to be approved by any third-party. It works across any device or operating system that has a web browser. (Which is why standards across browsers is so important). But, until recently web-apps faced limitations. Not having full access to a device’s hardware and operating system was an issue – but that’s being fixed as more native APIs are being added to modern web browsers.

In my experience, the big disadvantage of having a web-only app was losing out on the discoverability that comes with having it listed in a searchable marketplace. Also, adding a web-app to your device home screen is not intuitive to average users. As of recent, the Google Play market allows you list your web-app for users to install. The process involves uploading an Android app file (.apk), with the settings configured to target your web-app. It uses a new feature called “Trusted Web Activity” to achieve this, along with “Digital Asset Links“.

I decided to try this out with one of my web-apps, BJJ Tracker. You can read about how I first built it on another blog post. First, I wanted to enhance the experience by making UI/UX upgrades. I recreated the logo, focusing on typography. I also added a textured background to the app’s main view.  I sped things up by removing unused code assets. I even made some updates to help with accessibility (that is, compatibility with screen readers for the visually impaired).

bjj tracker

Next, I wanted to make sure my app had offline support, as well as any other features that would make it “feel” like a native app. Google Chrome’s developer tools as a section called “audit” that helped me identify such opportunities.

progressive web app audit

The first step was to create a “service worker” JavaScript file, and register it when BJJ Tracker loads. This file downloads any vital assets to a user’s device, and later loads them from the cache.

if('serviceWorker' in navigator) {
  navigator.serviceWorker
           .register('/serviceWorker.js')
           .then(function() { console.log("Service Worker Registered"); })
           .catch(error => {
	        	console.log(error.message)
	    	})
}

Here is an example service worker file:

 importScripts('/cache-polyfill.js');


self.addEventListener('install', function(e) {
 e.waitUntil(
   caches.open('bjjtracker').then(function(cache) {
    return cache.addAll([
       '/',
       '/index',
       '/index?login',
       '/create-record?class',
       '/create-record',
       '/create-record?competition',
       '/view-record',
       '/view-month',
       '/privacy-policy',
       '/contact',
       '/view-more-data',
       '/account',
       '/css/bootstrap.min.css',
       '/css/bootstrap.min.css',
       '/css/bootstrap-theme.min.css',
       '/css/main.css',
       '/simpleMobileMenu/styles/jquery-simple-mobilemenu.css',
       'https://use.fontawesome.com/releases/v5.3.1/css/all.css',
       'https://fonts.googleapis.com/css?family=Roboto|Eczar&display=swap',
       'https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js',
        
        
     ]);
    }).catch(error => {
        console.log(error.message)
    })
 );
});

self.addEventListener('fetch', function(event) {

	// console.log(event.request.url);

	event.respondWith(

		caches.match(event.request).then(function(response) {

			return response || fetch(event.request);

		}).catch(error => {
	        console.log(error.message)
	    })

	);

});

You can read more from the documentation: https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker

Next, I created a “manifest” file. This file is written in JSON format. It helps describe how the web-app behaves once “installed”. It handles things such as app icon images and splash screens.

{
  "name": "BJJ Tracker",
  "lang": "en-US",
  "short_name": "BJJ Tracker",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#2a4d69",
  "theme_color": "#2a4d69",
  "description": "Track Brazilian Jiu Jitsu progress and fitness goals.",
  "icons": [{
    "src": "img/homescreen48.png",
    "sizes": "48x48",
    "type": "image/png"
  }, {
    "src": "img/homescreen72.png",
    "sizes": "72x72",
    "type": "image/png"
  }, {
    "src": "img/homescreen96.png",
    "sizes": "96x96",
    "type": "image/png"
  }, {
    "src": "img/homescreen144.png",
    "sizes": "144x144",
    "type": "image/png"
  }, {
    "src": "img/homescreen168.png",
    "sizes": "168x168",
    "type": "image/png"
  }, {
    "src": "img/homescreen192.png",
    "sizes": "192x192",
    "type": "image/png"
  }, {
    "src": "img/homescreen512.png",
    "sizes": "512x512",
    "type": "image/png"
  }]
}

Ok, now I was ready to open Android Studio and generate a .apk file, that I can upload to Google Play. Check out this example from Google Chrome Labs: https://github.com/GoogleChromeLabs/svgomg-twa/. You can clone that repository, and update the “build.gradle” settings to point to your app. You’ll also need to upload an “assetlinks.json” file to your web app’s host to satisfy the Digital Asset Links protocol.

Finally, I headed over to the Google Play Console. Besides uploading the .apk file, I also needed to include screenshots, featured image files, and complete a content rating survey – amongst other things. Now, my app is “pending publication”.

bjj tracker app

This app is a fun side project I use to toy with new web technologies. I’m trying to drive traffic to it so that I can experiment with optimizing conversions. I’m using it as a trial grounds for another software service called SplitWit. SplitWit is focused on optimizing conversions for the web, and helping digital marketers reach their goals. You can read about it on another post from this blog.