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’ content=”hogehoge”> はもちろん <head> タグ内に記述しているが、iOS が認識していないのでは?!という可能性を疑って、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/