structuredCloneを使う時は当面、非互換を気にしよう

structuredClone、便利ですよね。

https://developer.mozilla.org/ja/docs/Web/API/structuredClone

あまりに便利すぎて私はフロントエンドでは全面採用しましたが、先日、iOSユーザから「アプリが使えない」という問い合わせを受けました。
サーバ不具合もないけど何でだろうなと思って、iOSのバージョンアップをおすすめしたらアップデートしたら使えるようになったとのこと。今日もそういう話があり、ちゃんとみてみると、structuredCloneってiOSでは15.4からのサポートなんですね。リリース日でいうと、2022年3月末ですね。

もう半年以上経ったというべきか、まだ半年1年経ってないというべきか。iOSの自動更新は「電源につないであり、かつWiFi接続時」に限るんですよね。なので、iOSって年単位でアップデートをかけないユーザというのはざらにいます。なので、日本ではまだiOS15.3以前のユーザがいるとみることができます。そこで、そういったユーザをサポートしながら、structuredCloneを使う方法を考えてみましょう。

対応方法

1. ユーザに警告をだす

structuredClone をサポートしてるかどうかは typeof で検証できるので、確認してalertをだします

if (typeof structuredClone !== "function") {
  alert(`このOSはサポートしていません。OSを最新版にしてください`);
}

2. Polyfillを使う

Polyfillは、メソッドがサポートされていない後方ブラウザに対して、代替メソッドを提供するものです。 ungap/structured-clone が提供されています。

https://github.com/ungap/structured-clone

実際の実装と違いますが、とても簡単にいうとこんなことをします。

if (typeof structuredClone !== "function") {
  window.structuredClone = (object) => {
    return ...// ここで、JSONを使ってシリアライズしてから、デシリアライズする
  }
}

まとめ

言って半年以上前にリリースされたiOSでサポートされているので私は個人的にはユーザにアップデートを促す方がいいかとは思いましうが、どうしてもサポートしたい場合はPolyfillをどうぞ。