スマホのブラウザでのファイルダウンロードの挙動の違い

「保存したはずなのにどこに行ったか分からない」、スマホでファイルをダウンロードしたときにこれ経験したことある人、結構多いんじゃないでしょうか。OSやブラウザによって挙動が地味に違っていて、実装する側としても何度か振り回されました。

保存先自体がOSやブラウザの設定次第でバラバラで、利用者に「保存できたはずなのに見つからない」という混乱を与えないよう、保存後の案内文言はかなり気を使って書いています。

あとブラウザによっては、ファイルを直接ダウンロードせず新しいタブでただ開くだけの挙動になることもあります。モールス信号ツールのスタンドアロンHTMLダウンロード機能を作ったときも、この環境差にちょっと振り回されて、想定より対応に時間がかかりました。

ファイル名を指定していても一部環境では無視されて汎用的な名前で保存されることもあります。

正直「完全には制御しきれない部分がある」という前提で、諦め半分に設計しています。

ファイル名だけは指定するようにしている

それでも、最低限できることはやっておきたくて、ダウンロードリンクにはdownload属性でファイル名を指定するようにしています。

<a href="result.html" download="morse-code-result.html">ダウンロード</a>

サーバー経由でファイルを配信する場合は、レスポンスヘッダーのContent-Disposition: attachment; filename="..."を使う方法もあります。どちらも「絶対に効く」わけではなく、環境によっては無視されることもありますが、指定しておいて損はない設定です。何も指定しないと、ブラウザが自動生成した意味不明な名前で保存されて、利用者が後から見返せなくなるリスクの方が大きいと思っています。