loading...

Case Study: Preview Your Launcher Icon Design with iconpreview.com

henrylim96 profile image Henry Lim ・5 min read

"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: iconpreview.com


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:


Home & Upload Page

"Home & Upload Page" (Select Icon page, Preview Icon page, and Uploading 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

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

Well, it’s still working perfectly ¯\_(ツ)_/¯

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://iconpreview.com/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 iconpreviewer.com/<id>/, but not from iconpreviewer.com/.

Web App Manifest & Add to Home Screen

Adding Your App Icon to the Home Screen (Chrome for Android)

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:

The browser will fire a "beforeinstallprompt" event is the site meets the Add to Home screen criteria

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.

Dynamically generate "manifest.json" using Express

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.

Launcher Icon Previewer running on Safari for iOS

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.

Launcher Icon Previewer running on the desktop (Chrome for MacOS)

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.

Dashboard of cron-job.org

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!

Posted on Mar 21 '19 by:

henrylim96 profile

Henry Lim

@henrylim96

Google Developer Expert in Web Technologies / Chrome DevTools, PWA, Project Fugu, Web, Firebase / Creator of Remote For Slides

Discussion

markdown guide