ブログにブラウザの対応状況を表示する

当ブログでは、一部ブラウザでしか使えないような機能を取り扱うことがある。

毎回「対応状況: Chrome123, Edge, Safari, Firefox」みたいなことを書いていたのだが、手動で更新し続けるには限界がある。そこで、W3C WebDX Community Groupが公開しているbaseline-statusというWeb Componentsを使用する。

使用イメージは以下のような感じだ。

baseline-statusの使い方

npm を使う場合

npmでbaseline-statusをインストールする。

$ npm install -S baseline-status

パッケージ内部でwindow.customElements.define('baseline-status', BaselineStatus);のようにカスタム要素に登録しているので、使用者はそのままimportするだけでよい。

import 'baseline-status';

<baseline-status featureId="abs-sign" />

CDN を使う場合（非推奨）

テストやプロトタイピングでは良いが、プロダクトで使用する場合は、パッケージ重複が排除できなかったり、複数バージョンのlitが読み込まれたりするので、注意が必要。

<script src="https://cdn.jsdelivr.net/npm/baseline-status@latest/baseline-status.min.js" type="module"></script>
<baseline-status featureId="abs-sign"></baseline-status>

SSR/SSGでで使う場合（Astro.jsの場合）

baseline-statusにはHTMLElementが使われているので、SSR（Server-Side Rendering）やSSG（Static Site Generator）ではエラーになることがある

当ブログで使っているAstro.jsを例に紹介する。

BaselineStatusコンポーネントの作成

クライアントサイドだけで読み込み・実行したいので、ダイナミックインポートを使って読み込んでいる。

$ npm install -S baseline-status

// components/BaselineStatus.astro

---
interface Props {
  featureId: string;
}

const { featureId } = Astro.props;
---

<script>
  // クライアントサイトで読み込みたいので、Dymamic Importを使う。
  import("baseline-status");
</script>

<baseline-status featureId={featureId}></baseline-status>

BaselineStatusの使用

// {page}.mdx
import Baseline from './path/to/components/BaselineStatus.astro'

<Baseline featureId={"abs-sign"} />

featureIdの指定をする

最後に、featureIdを指定する必要があるのだが、webstatus.devかweb-platform-dx/web-featuresリポジトリで検索するのが良いだろう。

検索後のURLにあるwebstatus.dev/features/{featureId}の部分をfeatureIdとして指定する。