browserslist-config-sfgov

This is a shareable list of the browsers supported by the San Francisco Digital Services, for use with tools that support browserslist, such as autoprefixer, postcss-preset-env, Babel, and eslint-plugin-compat.

This list is automatically generated from analytics data, and is tailored to support 99% of browsers used within the last year by visitors to sf.gov.

Usage

To use this config, first install browserslist-config-sfgov as a development dependency:

npm install --save-dev browserslist-config-sfgov

Then, in the browserslist field of your package.json, your .browserslistrc, or any of the other supported browserslist config locations, use:

extends browserslist-config-sfgov

For example, in your package.json:

+   "browserslist": ["extends browserslist-config-sfgov"]

You can add entries to the list if you'd like to support specific browsers. You may exclude specific browsers from your own config with the not prefix, e.g. to exclude Internet Explorer entirely in your .browserslistrc:

extends browserslist-config-sfgov
not ie

Updating

This package uses browserslist-ga-export to convert a CSV export from Google Analytics into browserslist-stats.json, which is read when browserslist encounters the in my stats identifier from index.js. The update process is manual:

1. Install the dev dependencies with npm install

2. Follow the CSV export instructions from browserslist-ga-export

3. Copy your CSV export to the data directory, e.g. as data/stats.csv

4. Run browserslist-ga-export on the CSV file:

   npx browserslist-ga-export --reportPath=data/stats.csv
   

You should see a success message in your terminal and a diff in browserslist-stats.json. Add the CSV export and your changes, commit them, then file a pull request.

Automated updating

You can automate the updating of the stats, but it's complicated because Google Analytics doesn't provide a way to export custom reports via the API. (Aaaaarrrgh Google, why?) Here's the workaround:

1. Create a new Google Sheet

2. Add the Google Analytics add-on

3. Create a new report from the Sheets menu bar: Add-ons → Google Analytics → Create new report. This will create a new worksheet that houses your report's configuration (not the report data itself).

4. Set the following options in your report:

   Option	Value
   Report Name	"Browser stats" (for instance)
   Start Date	30daysAgo (or use a different period)
   End Date	yesterday
   Metrics	:pageviews
   Dimensions	ga:operatingSystem,ga:operatingSystemVersion,ga:browser,ga:browserVersion,ga:deviceCategory
   Order	-ga:pageviews
   Limit	1000 (or go lower for less coverage)

5. Run your report from the Sheets menu bar: Add-ons → Google Analytics → Run reports

6. Set up the report to run periodically: Add-ons → Google Analytics → Schedule reports

7. Set up a Google service account to access the Google Sheets API

8. Share the Sheet with the email address of your new service account

9. In your environment (.env locally), set up the following variables:

   • GOOGLE_SHEET_ID: your sheet's ID (in the URL between /sheets/d/ and /edit#...)
   • GOOGLE_CREDS_JSON: your Google service account credentials JSON, on a single line

10. Test the export script with script/export-browser-stats

11. Test the whole update process with npm run update

12. Figure out where to run this in the cloud

😅