iOS で PWA を実行させると “untitled” が表示される問題（未解決・iOS バグ？）

iOS (iPhone) で Web アプリを PWA として起動させたあと、リンクから Twitter アプリなどを起動すると、画面左上に “untitled” が表示される問題についての考察です（未解決・iOS バグ？）。

※解決方法をご存知の方がいらっしゃいましたら、コメント頂けると嬉しいです。
※参考サイトは最下部にまとめております。

PWA とは？

PWA とは Progressive Web Apps（プログレッシブ・ウェブ・アプリ）の略で、HTML + CSS などでブラウザ表示できるページを iPhone や Android のスマホの [ホーム画面に追加] することによって、ネイティブアプリのように動作させる技術のことです。

※参考サイトは最下部にまとめております。

iOS の場合

iOS の場合には head タグ内に以下のコードを挿入することで、PWA として動作させることができます。

<meta name='apple-mobile-web-app-capable' content="yes">
<meta name='apple-mobile-web-app-status-bar-style' content="default">
<meta name='apple-mobile-web-app-title' content="hogehoge">

このコードを入れておくと、当該 Web ページを表示させたあとシェアボタンから [ホーム画面に追加] し、ホーム画面に追加されたアイコンをタップすると（safari ではなく）あたかもネイティブアプリのように全画面表示のアプリとして起動させることができます。

“untitled” が表示される手順

当社で制作中の Web アプリ「Twitter 片思いアプリ」は、Twitter ユーザー名を入力すると Twitter 片思い（フォロー中なのにフォローバックしてもらえていない）アカウントを一覧表示することができますが、各アカウントのリンクをクリックすると iPhone の Twitter アプリが起動されてプロフィール画面が表示されます。
この際、画面左上に “untitled” の文字が表示されてしまう…という現象です。

検証してみた…

PWA を safari で動作させてみると…

PWA の Web ページを safari で表示させて、同じ動作を処理してみると同様に Twitter アプリが起動しますが、この場合には “safari” と問題なく表示されます。。

“apple-mobile-web-app-title” を英字にしてみると…

日本語対応されていない可能性を疑って、title タグおよび meta – apple-mobile-web-app-title – content を「Twitter – 片思い」→「Kataomoi」などの短い英字にしてみましたが “untitled” のままでした。。

“apple-mobile-web-app-title” を jQuery で上書きしてみた…

$('meta[name="apple-mobile-web-app-title"]').attr('content', 'hogehoge');

結果はやはり “untitled” でした。。

alert で確認してみた…

jQuery – alert を使って本当に meta name=’apple-mobile-web-app-title’ がセットされているのか、以下のコードを実行させてみた…

alert($('meta[name="apple-mobile-web-app-title"]').attr('content'))

結果は “hogehoge” が表示されました。。

その他

a タグにプロパティを付けてリンクをクリックしてみたり、英文サイトで議論されているように <link rel=”apple-touch-icon”> などを書き加えてみたりしたが…やはり “untitled” が表示されるだけだった。。

結論

一部の英文サイトでは iOS のバージョンアップで解消されるようなことも書いてありますが、私の iPhone（Ver. 13.6）では 2021年10月28日現在では、問題は解決されておらず…今後もこの問題は追っていきたいと思います。

解決できなくて、本記事を読んで頂いた方には申し訳ないです、、

参考サイト

Apple – PWA Back to app untitled
https://developer.apple.com/forums/thread/128646
Apple – Configuring Web Applications
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
Twitter – 片思いアプリ
https://soln-sns.net/apps/twitter-kataomoi/