
LIFFブラウザとLINE InAppBrowserにおけるUser-Agentの違い
リテールアプリ共創部のるおんです。
先日LINEミニアプリの開発において、特定のWebViewページをユーザーがLIFFブラウザで開いているかLINE InAppBrowserで開いているかを判別したい場面がありました。
今回は、これらのブラウザ環境のUser-Agentの違いを実際に調べてみました。
先に結論
LIFFブラウザの場合は、末尾に 「LIFF」 という文字列が含まれていますが、LINE InAppBrowserの場合は含まれていません。
LIFFブラウザの場合
User Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 Safari Line/15.12.1 LIFF
LINE InAppBrowserの場合
User Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 Safari Line/15.12.1
末尾に「LIFF」という文字列が含まれているかどうかのみ異なり、それ以外の文字列は同じことが確認できました。(テキスト比較ツール difff使用)
また、LIFFアプリでもLINEミニアプリでもLIFFブラウザで表示する場合は「LIFF」という文字列が含まれます。
そもそもLIFFブラウザとLINE InAppBrowserの違いとは
LIFFブラウザ
LIFF ブラウザとは、LINE内でLIFF (LINE Front-end Framework) アプリケーションが動作するブラウザ環境のことです。LIFFアプリがLINE内で開かれる際に、このLIFFブラウザが使用されます。
LIFFブラウザでは、LINE が提供するLIFF SDK を使用して、LINE のプラットフォーム機能(ユーザープロフィール取得、友達追加など)にアクセスできます。
LINE InAppBrowser
LINE InAppBrowser(インアプリブラウザ)とは、LINE アプリ内でWebページを表示する際に使用されるブラウザ環境です。例えば、トーク内で共有されたURLをタップした際や、リッチメニューから外部サイトにアクセスする際にこのブラウザが起動します。
LIFFブラウザとは異なり、LINE InAppBrowser では LIFF SDK の機能は利用できません。
検証方法
今回は、モバイル端末でもUser-Agentを確認できるように、vConsole を使用してデバッグ用のコンソールを表示できるようにします。
vConsoleを使用することで、スマートフォンのブラウザでもコンソールログを確認でき、User-Agent文字列を簡単に取得できます。
create-liff-appで作成したLIFFアプリのmain.tsxに以下のコードを記述します。
import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
import VConsole from "vconsole";
const main = async () => {
// デバッグ用のコンソールを表示するために、VConsoleを初期化
new VConsole();
const root = createRoot(document.getElementById("root")!);
// ユーザーエージェントをコンソールに表示
console.log("User Agent:", navigator.userAgent);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>,
);
};
main();
動作確認
実際にスマートフォンでLIFFアプリとLINE InAppBrowserの両方でアクセスして、vConsoleでUser-Agentを確認してみます。
今回はサクッと検証したかったのでLIFF CLIでローカル環境をngrok経由でhttps化して自分のスマホのLINE環境で確認しました。
LIFFブラウザの場合
User Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 Safari Line/15.12.1 LIFF
LINE InAppBrowserの場合
User Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 Safari Line/15.12.1
LIFFブラウザの場合のみ 「LIFF」 という文字列が含まれているのがわかりますね。
おわりに
今回は、LIFFブラウザとLINE InAppBrowserのUser-Agentの違いを実際に検証してみました。
たった一文字の違いですが、ユーザーの環境に応じた機能提供の差別化をしたい場合などに活用することができます。
公式ドキュメントを探してみたのですが、それらしきものが見当たらなかったので、記事にしてみました。
どなたかの参考になれば幸いです。
参考