DEV Community

365Talents profile image Nico Prat
Nico Prat for 365Talents

Posted on

Automatically take care of outdated browsers thanks to Browserslist and Github Actions

Our policy is to support browsers released within the last two years. Previously, we used Browserslist to transpile our code and automatically add polyfills. At some point, we wondered if we could use the same configuration to inform users when their browser was too old — ideally, without needing to write or maintain that logic ourselves.

It's all in a regex

Fortunately, there's a package that does exactly that: browserslist-useragent-regexp. It generates a regular expression based on your Browserslist config, which you can run against navigator.userAgent.

Here’s a simple .browserslist.rc config targeting our policy:

last 2 years
not dead
Enter fullscreen mode Exit fullscreen mode

Then, you can generate the regex using a script in your package.json:

{
  "scripts": {
    "supportedBrowsers": "npx update-browserslist-db@latest && echo \"export default $(browserslist-useragent-regexp --allowHigherVersions);\" > supportedBrowsers.js"
  }
}
Enter fullscreen mode Exit fullscreen mode

The npx update-browserslist-db@latest command ensures your caniuse data is current, preventing the dreaded Browserslist: caniuse-lite is outdated warning.

This script outputs something like:

export default /Edge?\/(10[5-9]|1[1-9]\d|[2...
Enter fullscreen mode Exit fullscreen mode

You can then import and use this regex in your app to notify users:

import supportedBrowsers from './supportedBrowsers.js'

if (!supportedBrowsers.test(navigator.userAgent)) {
  alert('Your browser is not supported, please update it.');
}
Enter fullscreen mode Exit fullscreen mode

Automate the update

To keep the regex up to date, we use GitHub Actions to run the script automatically every month. That way, our last 2 years policy always reflects the current calendar without anyone needing to remember to update it.

Here’s a simplified version of our workflow:

name: CI - Update browsers list

on:
  schedule:
    # At 8:00AM UTC the first day of the month
    - cron: "0 8 1 * *"

jobs:
  update_frontend_browserslist:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2

      - name: Update browsers list
        working-directory: components/frontend
        run: npm run supportedBrowsers

      - name: Commit and push changes if any
        run: |
          git config user.name Internal
          git config user.email internal@yourcompany.com
          # Check if there are any changes to the browsers list
          if [[ -n "$(git status --porcelain .)" ]]; then
            git add .
            git commit -m "chore: update supported-browsers.ts"
            git push
          fi
Enter fullscreen mode Exit fullscreen mode

With this in place, we get a fresh, accurate regex every month — keeping users informed only when necessary, without adding manual work for the team.

Top comments (0)