Chrome on iOS

In talks with our product team, we decided the development cost of supporting a wide range of browsers outweighed the benefits. For the initial release, we elected to support Chrome, Firefox, and the new Chromium-based Edge as they behave similarly and rarely require special considerations in the code.

To accomplish this, we pulled in a library called detect-browser and then wrapped some of the comparisons in a custom hook like so:

import { detect } from "detect-browser";

const browser = detect();
export function useIsSupportedBrowser() {
    switch (browser && browser.name) {
        case "chrome":
        case "firefox":
        case "edge-chromium":
            return true;
        default
            return false;
    }
}

We added this hook to the highest level of our application. If it returned true, we displayed the app. If it returned false, we displayed a message indicating the user's current browser was not supported as well as a list of the currently supported browsers.

But after deploying, we were surprised to find that the app still didn't render in Chrome on iOS devices. What gives?

Turns out there's actually a different browser name for Chrome on iOS: crios .

import { detect } from "detect-browser";

const browser = detect();
export function useIsSupportedBrowser() {
    switch (browser && browser.name) {
        case "chrome":
        case "firefox":
        case "edge-chromium":
        // crios is chrome on ios
        case "crios":
            return true;
        default
            return false;
    }
}

Adding the check for crios worked like a charm.

As a small aside, I'm curious why they chose crios as the name? Shouldn't it be chrios? Were they worried that if people Googled chrios, they would start getting cheerios ads? Is that the worst thing in the world?

Oh well, now we know.