WebAPI check

Simply open this page and get an instant overview of the WebAPIs that are supported on your current device.

Made with Nuxt, Vite, and Uno. Powered by Vercel.

Sources:

• MDN Web Docs
• Chrome Developers

Setup

Clone the repo, install the dependencies with pnpm, and you're ready to go.

pnpm install
pnpm dev

Production

Build application for production:

pnpm build

Contribute

Contributions are very welcome!

For WebAPI additions and bug fixes you can open pull requests right away, but for improvements and new features I'd suggest opening an issue for discussion first to avoid unnecessary work if it gets rejected.

Please use prefixes according to Conventional Commits and @commitlint/config-conventional in your commits to make changelogithub work properly, e.g.

• chore: upgrade deps
• fix: a bug
• test: something

Adding new APIs

Adding new WebAPIs is really easy, just add it to the webApiData object in utils/webapis.ts like this:

'bluetooth-api': {
  name: 'Bluetooth API',
  url: 'https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API',
  path: 'navigator.bluetooth',
  source: 'mdn',
  userInteractionRequired: true,
  permissionsRequired: true,
  secureContextRequired: true,
  experimental: true,
}

By default the app will check if the interface under path is defined – in this case navigator.bluetooth – and if yes the API is available, if not it is not available.

But that is the simplest case, some APIs require a more complex test in which case you can add a custom check function like so:

'battery-status-api': {
  name: 'Battery Status API',
  url: 'https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API',
  path: 'navigator.battery',
  source: 'mdn',
  secureContextRequired: true,
  detail: shallowRef(DetailBatteryStatusAPI),
  check: async () => {
    try {
      if (navigator && 'getBattery' in navigator) {
        const bm = await (navigator as any).getBattery()
        return bm !== undefined
      }
      return false
    } catch (error) {
      return false
    }
  },
}

Note that this entry also has a detail property, which you can define if you want to display a widget to demo the API. Here the widget shows the current battery level of the device. Take a look at the DetailBatteryStatusAPI component to get a feel for how that looks like.

If you need help, don't hesitate to ask.

The web platform and an open web are the most important infrastructure projects of our time.

Repo Insights via RepoTracker at
https://repo-tracker.com/r/gh/toniengelhardt/webapicheck