🤖

LINEの内部ブラウザを知っていますか？LINEの内部Webブラウザで閲覧しているかどうかを確認する方法

まさぴょん

2023/12/14に公開

こんにちは、AIQ株式会社のフロントエンドエンジニアのまさぴょんです！

みなさまは、LINEの内部ブラウザを知っていますか？
私は、今まで、LINEの内部ブラウザをちゃんと意識して使ってはいなかったので、今回、少し事件に遭遇して学びがあったので、その記録です。
また、LINEの内部Webブラウザで、Webアプリを閲覧しているかどうかを確認する方法についても解説します。

LINEの内部ブラウザを知っていますか？

普段、あたり前に使っているLINEですが、よくよく思い出すと、LINEで共有してもらっているURL・リンクを開くと、LINE特有の枠組みの中で、Webページが表示されませんか？
そう、それが、LINEの内部ブラウザでの表示です！！(適当)

参考程度に、私のスマホ(Android)でのLINEの内部ブラウザのスクショを貼ると、こんな感じです。
Bottom Navがあるなど、UIの違いが見て取れます。

LINE内部ブラウザだと、Auth0のログイン機能がエラーになる事件に遭遇

今回、LINEの内部ブラウザをちゃんと意識するきっかけとなったのが、LINE内部ブラウザだと、Auth0のGoogleログイン機能がエラーになる事件に遭遇したことでした。。。🥺

Auth0のGoogleログイン機能とは、また話が別ですが、ここら辺のコミュニティTopicでは、iOSで、Auth0のLINEログイン機能を使用するとエラーになるなどの話が出ていますね。。。🫠

LINEの内部ブラウザは、Web技術の一部をサポートしていないので注意

LINE内部のブラウザは、外部ブラウザと違い、一部のWeb技術が使えない(サポートしていない)状況です。

公式の説明を引用すると次のとおりです。

LIFFブラウザは、外部ブラウザがサポートしているウェブ技術の一部をサポートしていません。
LIFFブラウザでサポートしていないウェブ技術として、以下のものがあります。

theme-color Meta Tag(opens new window)：ユーザーインターフェースの色を指定する機能

Download attribute：ハイパーリンクを、リソースへの遷移ではなく、リソースのダウンロードに使用する機能

Add to home screen (A2HS)：ユーザーがウェブアプリケーションを端末のホーム画面に追加できるようにする機能

Service Workers：ウェブアプリケーションでオフライン対応、バックグラウンド同期、プッシュ通知などをできるようにする機能
引用元:LIFFブラウザと外部ブラウザの違い

基本的には、LINEアプリ内でURLを開くとLINE内部のブラウザが起動する

次のQ&Aの内容によると、基本的には、LINEアプリ内でURLを開くとLINE内部のブラウザで、Webページが表示されるように設定されているようです。

配信するメッセージ内のリンクは、LINEアプリ内ブラウザと外部ブラウザのどちらで開かれますか？
回答：原則、LINEアプリ内のブラウザで開かれます。
ただし以下の場合は外部ブラウザ（SafariやChromeなどのスマートフォン等に搭載されているウェブブラウザアプリ）で開かれます。
1.URLにパラメータ（openExternalBrowser=1)をつけた場合
2.LINE Official Managerで「トラッキング(LINE Tag)」＞「トラッキング」をオンにしている場合
3.ユーザーが「LINE Labs」＞「リンクをデフォルトのブラウザで開く」をオンにしている場合
※iOSのみに提供されています
※LINE LabsではLINEの新機能をお試しで利用できますが、予告なしに利用できなくなる場合があります
引用元:配信するメッセージ内のリンクは、LINEアプリ内ブラウザと外部ブラウザのどちらで開かれますか？

LINEの内部Webブラウザで閲覧しているかどうかを確認する方法

LINEの内部Webブラウザで閲覧しているかどうかは、ブラウザのユーザーエージェントを調べることで確認ができます。

次のようにnavigator.userAgentのユーザーエージェント文字列を取得し、その中にLineという文字が含まれているかを確認することで、LINEの内部Webブラウザで閲覧しているかどうかを判定することができます。

/** LINE 専用の ブラウザで開いているかどうか？ を判定する */
const isLineWebBrowser = () => {
  /** User Agent 文字列 */
  const userAgent = navigator.userAgent;
  /** Line という文字列が含まれているかどうか? を判定する */
  const isLineWebOpen = /Line/i.test(userAgent);
  return isLineWebOpen;
};

まとめ

LINEの内部ブラウザまで、考慮したことはなかったので、いい学びになりました。

個人で、Blogもやっています、よかったら見てみてください。

https://masanyon.com/

注意事項

この記事は、AIQ 株式会社の社員による個人の見解であり、所属する組織の公式見解ではありません。

求む、冒険者！

AIQ株式会社では、一緒に働いてくれるエンジニアを絶賛、募集しております🐱🐹✨

詳しくは、Wantedly (https://www.wantedly.com/companies/aiqlab)を見てみてください。

参考・引用

AIQ Tech Blog (有志)Publication

AIQ 株式会社に所属するエンジニアが技術情報をお届けします。 ※ AIQ 株式会社社員による個人の見解であり、所属する組織の公式見解ではありません。 Wantedly: wantedly.com/companies/aiqlab