Mozilla Firefox

Firefox Preview PWA and TWA support

  • Android
  • Kotlin
  • PWA
  • Trusted Web Activities

Firefox Preview is a rewrite of Mozilla’s Firefox browser for Android. On the Mozilla Android Components team, I work on many features for Firefox Preview and other Mozilla Android web browsers. We shipped the browser to over 100,000 users on the Google Play Store during my internship and I continue to work on new features for the app.

Progressive Web Apps

My main project at Mozilla was to support installing and running Progressive Web Apps in Firefox Preview. Progressive Web Apps are websites using new features on the web platform, letting them be installed like regular native apps on your phone. I implemented an enhanced app-like experience for web apps, with themed system bars and customized entries in the recent app switcher. I acted as a feature lead on this project and implemented most of the core functionality.

Firefox Preview is the first browser to support “maskable icons”, letting websites specify a full-bleed Android icon that takes up the entire icon area on Android. Previously, all web app icons were placed inside a white background when added to the device home screen. Maskable icons are a new API to specify an icon with a custom background to display. I implemented maskable icon support in Mozilla’s Android web browsers and published an article about it on CSS Tricks.

Trusted Web Activities

I brought support for Trusted Web Activities to Firefox Preview. Trusted Web Activities are a new API to easily display web content on Android without the limitations of WebViews or Custom Tabs. Firefox Preview verifies that the website developer trusts the Android app developer, then renders the website content full screen.

Animations

I added over 15 animations to Firefox Preview to polish the user experience. I published a blog about some of the work that went into the animations and I was invited to publish on the official Mozilla Mobile Engineering blog.

Uploads

I worked to enhance the UI for uploading a file to websites containing a file input element. I enhanced the upload dialog to allow for taking a picture with the camera or recording audio with the microphone depending on the data type requested by a website. I also coordinated with the Gecko team to add support for the capture attribute, so that websites could request to directly open the camera or microphone rather than open the file picker.

Downloads

To have greater control over the file downloading experience, I modified our implementation to download resources through Mozilla’s Gecko engine rather than the Android networking stack.