Case Study: Preview Your Launcher Icon Design with icon.limhenry.xyz
Tags: webdev, pwa, uiux, firebase
Published: 2019-03-21 06:10:37

---
title: Case Study: Preview Your Launcher Icon Design with icon.limhenry.xyz
published: true
description: Learn how we built Launcher Icon Previewer - a tool to preview your launcher icon design on your mobile devices.
tags: webdev, pwa, uiux, firebase
---

![](https://cdn-images-1.medium.com/max/800/0*LqAbo6NHpkFC8mrS.jpg)

### *"Launcher Icon Previewer allows you to preview your launcher icon design on your mobile devices."*

[Launcher Icon Previewer](https://icon.limhenry.xyz/) is a project created by me and [Taylor Ling](https://medium.com/@taylorling), the co-founder of Fabulous app, and he’s also a Google Product Design Expert.

You can learn more about Launcher Icon Previewer here: **[icon.limhenry.xyz](https://icon.limhenry.xyz/)**

*****

*This post was originally published on [medium.com](https://medium.com/@limhenry/case-study-launcher-icon-previewer-b5a1fc959db2).*

*****

### Technologies

We decided to use all the greatest and latest technologies to develop Launcher Icon Previewer, which includes:

* [Firebase Realtime Database](https://firebase.google.com/docs/database/)
* [Firebase Hosting](https://firebase.google.com/docs/hosting/)
* [Cloud Storage for Firebase](https://firebase.google.com/docs/storage/)
* [Cloud Functions for Firebase](https://firebase.google.com/docs/functions/)
* [Add to Home Screen](https://developers.google.com/web/fundamentals/app-install-banners/), [Web App Manifest](https://developers.google.com/web/fundamentals/web-app-manifest/) and [Service Worker](https://developers.google.com/web/fundamentals/primers/service-workers/)
* [Express](https://expressjs.com/) and [EJS](http://ejs.co/)

*****

#### Home & Upload Page

![](https://cdn-images-1.medium.com/max/1400/1*NpqNEGV84BluNC109RtAMQ.jpeg)
<figcaption>"Home & Upload Page" (Select Icon page, Preview Icon page, and Uploading page)</figcaption>

The "Home & Upload Page" consists of 3 parts: *Select Icon*, *Preview Icon*, and *Uploading*.

On the "Preview Icon*" page, once the user clicked on the blue "Upload Icon" button, the icon will upload to the Cloud Storage. Once the icon is uploaded, it will return a download URL for the icon.

After that, we will store the icon’s URL, together with other information like the icon’s dimension, icon’s file type, app name, timestamp to Firebase Realtime Database.

{% gist https://gist.github.com/limhenry/afe3aba8a34832a190f550cef0c34722 %}

Once everything is completed, the page will redirect to the "Preview & Share Page".

#### Preview & Share Page

![](https://cdn-images-1.medium.com/max/1200/1*ZwRHbZWZ4lix5FTYD4slHQ.jpeg)
<figcaption>"Preview & Share Page"</figcaption>

**Generate QR Code**

We added a QR code on the "Share Page", this will make it easier for the user to open the page on another device. In this case, we are actually using a [deprecated Google Charts API](https://developers.google.com/chart/infographics/docs/qr_codes).

![](https://cdn-images-1.medium.com/max/1200/1*pQAyU0S1DkFbSyRdPQZUhA.png)
<figcaption>Well, it’s still working perfectly ¯\_(ツ)_/¯</figcaption>

By using the URL below, we are able to generate the QR code on the fly with a URL GET request.

`https://chart.googleapis.com/chart?chs=256x256&cht=qr&chld=L|1&choe=UTF-8&chl=https://icon.limhenry.xyz/123456`

**Service Worker**

It’s important to register the service worker correctly since one of the criteria for add to home screen is to have a registered service worker.

In this case, we need to set the scope of the service worker to `/<id>/` instead of the root of the page. By doing this, the service worker will only control the requests of the page from `icon.limhenry.xyz/<id>/`, but not from `icon.limhenry.xyz/`.

{% gist https://gist.github.com/limhenry/3fa988b3d207a3d4e8cdf5b936511cc1 %}

**Web App Manifest & Add to Home Screen**

![](https://cdn-images-1.medium.com/max/1200/1*na_hiBbUMY2XEVMzc3HOoA.png)
<figcaption>Adding Your App Icon to the Home Screen (Chrome for Android)</figcaption>

In order to show the "Add to Home Screen" button in the preview page *(see screenshot above)*, we are using the `beforeinstallprompt` event to show the button on the screen:

{% gist https://gist.github.com/limhenry/3da969c5abdc4d782055294d9a2390b7 %}
<figcaption>The browser will fire a "beforeinstallprompt" event is the site meets the Add to Home screen criteria</figcaption>

Take note this `beforeinstallprompt` event is still an [experimental technology](https://developer.mozilla.org/en-US/docs/Web/API/BeforeInstallPromptEvent), and it’s only working on Chrome 45 and above. However, for those using browsers that don’t support the `beforeinstallprompt` event, they still can add the page to the home screen from the menu options.

{% gist https://gist.github.com/limhenry/0609b47fbeedb0ffcd70c1cf0e4fc7b6 %}
<figcaption>Dynamically generate "manifest.json" using Express</figcaption>

To generate the web app manifest dynamically, we are using Express which is running on the Cloud Functions for Firebase. This allows us to generate a custom web app manifest with different app icon, start URL and app name on the server.

**Cross-Platform Support**

Initially, we built this Launcher Icon Previewer just for the Chrome browser, but we tried our best to make sure it works fine on other platforms too.

![](https://cdn-images-1.medium.com/max/1200/1*zUf0kEZmAym_dbTd7jm2iw.jpeg)
<figcaption>Launcher Icon Previewer running on Safari for iOS</figcaption>

In this case, we want to make sure Launcher Icon Previewer is working on Safari for iOS. However, there’s a problem: Safari doesn’t support web app manifest. 

Meet [PWACompat](https://github.com/GoogleChromeLabs/pwacompat), PWACompat is a library that brings the Web App Manifest to non-compliant browsers for better Progressive Web Apps. By adding PWACompat to the site, it will dynamically generate the appropriate meta icon tags needed to meet to criteria for add to home screen.

![](https://cdn-images-1.medium.com/max/1200/1*5exaQsMQBqkXQKv2mt0Ubw.png)
<figcaption>Launcher Icon Previewer running on the desktop (Chrome for MacOS)</figcaption>

Furthermore, with the support of [Desktop Progressive Web App](https://developers.google.com/web/progressive-web-apps/desktop) on the latest version of Google Chrome for Chrome OS, MacOS, Windows and Linux, Launcher Icon Previewer will also work on the desktop platform.

In conclusion, the user can now preview their app icon on:

* App Drawer, Home Screen (Android & iOS)
* Start menu, Taskbar (Windows)
* Launchpad, Dock (MacOS)
* App Launcher, Shelf (ChromeOS)

*****

#### **Optimization: Auto delete icons after 24 hours**

This project is currently using Firebase Spark (free) plan, hence we only can store total 5GB of data per month on Cloud Storage for Firebase, with 1GB of download traffic per day.

To prevent us from exceeding the limit, we need to delete the old, unused icon files from Cloud Storage periodically.

![](https://cdn-images-1.medium.com/max/1400/1*9eQF5vru6FigKCCIwAMb9w.png)
<figcaption>Dashboard of cron-job.org</figcaption>

In this case, we are using [cron-job.org](https://cron-job.org/en/) to schedule the Cloud Functions to execute every 24 hours.

The Cloud Functions will check the upload timestamp, and it will delete the icon from the Cloud Storage if it’s older than 24 hours. By using this method, we can *(hopefully)* make sure this project can runs perfectly without exceeding the limit of Firebase free plan.

*****

![](https://cdn-images-1.medium.com/max/1200/1*zRVSv4NroT0sFJjcBIVehw.png)

[Launcher Icon Previewer](https://icon.limhenry.xyz/) is currently in beta, as we aren’t sure if there will be any more issue, but feel free to share it out! 🎉

*****

*Psst, are you a public speaker or you are going to give a presentation soon?*

*Try out [Remote for Slides](https://chrome.google.com/webstore/detail/remote-for-slides/pojijacppbhikhkmegdoechbfiiibppi?hl=en). It is a Chrome Extension and a Progressive Web App that allows you to control Google Slides on any device, remotely, without the need of any extra hardware.*

*****

*Want to support these projects? You can* *[make a donation here](http://bit.ly/slides-donate)!*