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

Launcher Icon Previewer is a project created by me and Taylor Ling, 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

This post was originally published on medium.com.

Technologies

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

• Firebase Realtime Database
• Firebase Hosting
• Cloud Storage for Firebase
• Cloud Functions for Firebase
• Add to Home Screen, Web App Manifest and Service Worker
• Express and EJS

Home & Upload Page

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.

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

Preview & Share Page

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.

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/.

Web App Manifest & Add to Home Screen

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:

Take note this beforeinstallprompt event is still an experimental technology, 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.

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.

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, 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.

Furthermore, with the support of Desktop Progressive Web App 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.

In this case, we are using cron-job.org 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.

Launcher Icon Previewer 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. 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!