[JavaScript] Web Locks APIで排他制御が効く範囲

Web Locks API はフロントエンド（ブラウザ側）のリソースをロックする仕組みを提供する APIで、１つ以上のタブ・ウィンドウで同じリソースを使用する時の排他制御に使います。

この記事では、Web Locks API のロックの範囲が、どこまでに影響するのかを紹介します。

同じブラウザの場合

同じブラウザ（Chrome、edge、Safariなど）同士で、Web Locks API でロックを取得した時の影響範囲は次のとおりです。

同じタブ または 別タブ

当然といえば当然ですが、Web Locks API で取得したロックは、同じタブや、別タブに対しても効くため、ロックを取得したタブ側でロックを解除するかタブを閉じるまで、後からロックを取得しようとしたタブ側でロックが取得できません。

別のウィンドウ

同じブラウザであれば、別のウィンドウで開かれている場合も Web Locks API で取得したロックは効くため、上と同じように、ロックを取得したウィンドウがロックを解除するか、ウィンドウを閉じるまで、別のウィンドウではロックを取得できません。

異なるブラウザの場合

Web Locks APIは、異なるブラウザ間のロックには対応していないため、例えば Chromeでロックを取得した場合も、Safari側で普通にロックが取得できます。つまり、異なるブラウザでは排他制御はかかりません。

結論

ここまで紹介したように、Web Locks API の排他制御は同じブラウザ内でのみに効くため、ローカルストレージなどのブラウザ単位で持っているリソースに対する排他制御に有効な APIと言えます。

逆に、ブラウザに関わらないリソース（サーバー上に配置されたドキュメント）などには Web Locks API を使用すべきではないでしょう。