Progressive web apps<\/h2>\n
I decided to try this out with one of my web-apps, BJJ Tracker<\/a>. You can read about how I first built it on another blog post<\/a>.<\/p>\n I had to make sure it qualified as a PWA. It needed offline support, as well as any other features that would make it feel like a native app. Google Chrome’s developer tools has a section called “Audits” that helped me identify such opportunities.<\/p>\n The first step was to create a “service worker” JavaScript file, and register it when BJJ Tracker loads.<\/p>\n I added the above code to a shared file that loads on every page of my app.\u00a0 Below is an example service worker file.\u00a0This file downloads any vital assets to a user’s device, and later loads them from the cache. Including a polyfill<\/a> ensures that the cache methods exist (in case the browser does not support them natively). “We need to use the polyfill because the Cache API is not yet fully supported in all browsers.<\/a>”<\/p>\n Read the documentation on Google’s developer portal.<\/a><\/p>\n 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 meta data.<\/p>\n I created the image assets using open source software<\/a>.<\/p>\n The manifest needs to be referenced by the app. I added a link tag to a shared <head<\/em>> file. Additionally, I included a few other meta tags that let browsers know to treat this website as an app.<\/p>\n A signed app bundle is generated from Android Studio.\u00a0 I use a sample project from Google Chrome Labs as a template<\/a>. We can clone that repository, and update the “\/svgomg-twa\/<\/span>app\/build.gradle<\/em>” settings to point to our PWA.<\/p>\n The app’s icon files can be generated using an online tool<\/a>. The downloadable bundle can be dropped into “\/svgomg-twa\/app\/src\/main\/res\/<\/em>“.<\/span><\/p>\n When creating the app bundle (“Build > Generate Signed Bundle\/APK”) we’ll need a signing key. I created a new one, and named the file mykeystore<\/em>.keystore<\/em>.<\/p>\n An\u00a0“assetlinks.json<\/em>” file needs to be uploaded to the web app’s host to satisfy the\u00a0Digital Asset Links requirement.\u00a0 “The Digital Asset Links protocol and API enable an app or website to make public, verifiable\u00a0statements<\/em>\u00a0about other apps or websites.<\/a>”\u00a0This confirms ownership of the PWA so that it can be linked to our app in the Play Store. To generate this file, first we’ll need to get the fingerprint from the signing key we used:<\/p>\n That command shows us the\u00a0certificate fingerprints. Copy the <\/span>SHA256<\/span><\/em> value. It is used with Google’s Statement List Generator<\/a> to create the contents of the\u00a0assetlinks.json<\/em> file. The statement file is then placed in a “.well-known”<\/em> directory on the root of our PWA domain (eg.<\/em> https:\/\/www.bjjtracker.com\/.well-known\/assetlinks.json<\/em>)<\/span><\/p>\n Finally, I visited the Google Play Console. Besides uploading the .apk<\/em> file, I also needed to include screenshots, featured image files, and complete a content rating survey – amongst other things. Since my app has been approved, you can now find it in the Google Play Market<\/a>.<\/p>\n This app is a 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<\/a>. 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<\/a>.<\/p>\n![\"progressive](\"https:\/\/www.antpace.com\/blog\/wp-content\/uploads\/2019\/07\/Screen-Shot-2019-07-22-at-4.04.29-PM.png\")
<\/p>\nif('serviceWorker' in navigator) {\n navigator.serviceWorker\n .register('\/serviceWorker.js')\n .then(function() { console.log(\"Service Worker Registered\"); })\n .catch(error => {\n\t \tconsole.log(error.message)\n\t \t})\n}<\/pre>\nimportScripts('\/cache-polyfill.js');\n\nself.addEventListener('install', function(e) {\n e.waitUntil(\n caches.open('bjjtracker').then(function(cache) {\n return cache.addAll([\n '\/',\n '\/index',\n '\/index?login',\n '\/create-record?class',\n '\/create-record',\n '\/create-record?competition',\n '\/view-record',\n '\/view-month',\n '\/privacy-policy',\n '\/contact',\n '\/view-more-data',\n '\/account',\n '\/css\/bootstrap.min.css',\n '\/css\/bootstrap.min.css',\n '\/css\/bootstrap-theme.min.css',\n '\/css\/main.css',\n '\/simpleMobileMenu\/styles\/jquery-simple-mobilemenu.css',\n 'https:\/\/use.fontawesome.com\/releases\/v5.3.1\/css\/all.css',\n 'https:\/\/fonts.googleapis.com\/css?family=Roboto|Eczar&display=swap',\n 'https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.2\/jquery.min.js',\n ]);\n }).catch(error => {\n console.log(error.message)\n })\n );\n});\n\nself.addEventListener('fetch', function(event) {\n\tevent.respondWith(\n\t\tcaches.match(event.request).then(function(response) {\n\t\t\treturn response || fetch(event.request);\n\t\t}).catch(error => {\n\t console.log(error.message)\n\t })\n\t);\n});\n<\/pre>\n{\n \"name\": \"BJJ Tracker\",\n \"lang\": \"en-US\",\n \"short_name\": \"BJJ Tracker\",\n \"start_url\": \"\/\",\n \"display\": \"standalone\",\n \"background_color\": \"#2a4d69\",\n \"theme_color\": \"#2a4d69\",\n \"description\": \"Track Brazilian Jiu Jitsu progress and fitness goals.\",\n \"icons\": [{\n \"src\": \"img\/homescreen48.png\",\n \"sizes\": \"48x48\",\n \"type\": \"image\/png\"\n }, {\n \"src\": \"img\/homescreen72.png\",\n \"sizes\": \"72x72\",\n \"type\": \"image\/png\"\n }, {\n \"src\": \"img\/homescreen96.png\",\n \"sizes\": \"96x96\",\n \"type\": \"image\/png\"\n }, {\n \"src\": \"img\/homescreen144.png\",\n \"sizes\": \"144x144\",\n \"type\": \"image\/png\"\n }, {\n \"src\": \"img\/homescreen168.png\",\n \"sizes\": \"168x168\",\n \"type\": \"image\/png\"\n }, {\n \"src\": \"img\/homescreen192.png\",\n \"sizes\": \"192x192\",\n \"type\": \"image\/png\"\n }, {\n \"src\": \"img\/homescreen512.png\",\n \"sizes\": \"512x512\",\n \"type\": \"image\/png\"\n }]\n}\n<\/pre>\n![\"Image](\"https:\/\/www.antpace.com\/blog\/wp-content\/uploads\/2019\/07\/image-assets.png\")
<link rel=\"manifest\" href=\"\/manifest.json\">\n<meta name=\"theme-color\" content=\"#005b96\"\/>\n<meta name=\"mobile-web-app-capable\" content=\"yes\">\n<meta name=\"apple-mobile-web-app-capable\" content=\"yes\">\n<meta name=\"msapplication-starturl\" content=\"\/\">\n<\/pre>\n
Android Studio<\/h2>\n
![\"app](\"https:\/\/www.antpace.com\/blog\/wp-content\/uploads\/2019\/07\/app-gradle-settings.png\")
![\"icon](\"https:\/\/www.antpace.com\/blog\/wp-content\/uploads\/2019\/07\/icon-generator.png\"){kind=icon}
![\"key](\"https:\/\/www.antpace.com\/blog\/wp-content\/uploads\/2019\/07\/key-signing.png\")
<\/p>\nkeytool -list -v -keystore mykeystore.keystore -alias mykeystore -storepass password-here -keypass password-here\n<\/pre>\n
![\"BJJ](\"https:\/\/www.antpace.com\/blog\/wp-content\/uploads\/2019\/07\/Google-Play-Store.png\")
<\/a><\/p>\n
![\"bjj](\"https:\/\/www.antpace.com\/blog\/wp-content\/uploads\/2019\/07\/bjj-tracker-ig.jpg\"){kind=tracking}
<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"