😥

SafariでGoogle Playストアのリンクが非表示になる挙動について調査した

2023/01/11に公開

HTML

フロントエンド

Safari

tech

経緯

業務でアプリのダウンロードリンクの実装をしていた時に遭遇した謎事象について調査したので、そのまとめです。
業務中はiOS14系の端末を利用しており、そちらではGoogle Playストアのリンクが問題なく表示できていたことから、おそらくiOS 16（Safari 16）から追加された仕様なんだと思います。

どこかで公式に言及済みであれば、教えていただけると幸いです。

前提共有

デモサイトで再現させた時の画像

調査に用いたアプリストアのリンクは下記の通り

動作確認・ソースコード

デモサイト
 GitHub

確認環境

Node.js LTS
Vite 4.0.0（Vanilla JS）
ホスティング先はVercel

調査観点

観点	判断方法	期待値
aタグの子要素が非表示の原因	テキスト/画像のリンクで比較	子要素に関係なく消えること
ホスト名が非表示の原因	`play`, `docs`, `drive`.google.comで比較	play.google.comのみ非表示になること
pathnameで判定しているか	`/store/apps/details`を分割して結果比較	フルパス(`/store/apps/details`)の時に非表示になること
特定のクエリパラメータで判定しているか	`id`, `hl`, `gl`, `hoge`を指定して比較	`id`を指定した時に非表示になること

各項目の調査結果

aタグの子要素が非表示の原因

期待値: 子要素に関係なく非表示になること
結果: 子要素に関係なくリンクは非表示になった

考察: aタグ自体になんらかの作用が働いている

ホスト名が非表示の原因

期待値: play.google.comのみ非表示になること
結果: play, docs, drive.google.comいずれも表示されたままとなった

考察:

ホスト名のみで判定している訳ではない様子
google.com部分で弾いているという可能性はない

pathnameで判定しているか

期待値: フルパス(/store/apps/details)の時に非表示になること
結果: /store/apps/detailsも表示されたままとなった

考察: https://play.google.com/store/apps/details部分で判定していない。クエリパラメータまで見ていそう。

特定のクエリパラメータで判定しているか

期待値: idを指定した時に非表示になること
結果:

パラメータ名	結果
id	非表示になる
hl	非表示になる
gl	非表示になる
hoge	非表示になる

考察: hogeのような適当なパラメータ名でも非表示になることから正規表現等で意図的に非表示にしていると判断

まとめ

iOS 16（Safari 16.0）以降で入った仕様
https://play.google.com/store/apps/detailsにクエリパラメータを付与すると非表示になる
- クエリパラメータは何をつけても非表示になるので正規表現で弾いているように見える
aタグのhref属性に指定した時のみ発生する模様