browser-how-to

これはなに？

Facebook Messenger などのアプリ内ブラウザから開かれると、ホーム画面追加もパスキーも使えません。 また、パスキーは仕組みが分かりにくく「スマホでログインしたのにパソコンで入れない」と戸惑う人がいます。

このリポジトリは、その2つの課題を解決する独立した2つのパッケージを提供します。どちらもフロントエンドの JavaScript / TypeScript から数行で呼び出せます。

環境シミュレーター

User-Agent を切り替えて、各環境での判定結果と案内 UI を確認できます（案内の文言は選んだ UA で、表示はこのブラウザで描画されます）。

現在のブラウザの実環境で試すには「実機（このブラウザ）」を選んでください。

アプリ内ブラウザ判定

detectDevice() で、端末・ブラウザ・アプリ内ブラウザをまとめて判定できます。 どちらのパッケージからも同じ関数を import できます。

import { detectDevice } from "@kuboon/browser-how-to";

const device = detectDevice();

if (device.inApp.isInApp) {
  // 例: Messenger / Facebook / Instagram / LINE / X / WeChat ...
  console.log(device.inApp.appId);    // "messenger" など
  console.log(device.inApp.appLabel); // "Facebook Messenger" など（表示用）
  // → ホーム画面追加もパスキーも使えないので、標準ブラウザへ誘導する
}

// その他に取れる情報
device.platform;   // "ios" | "ipados" | "android" | "desktop" | "unknown"
device.browser;    // "safari" | "chrome" | "samsung" | "firefox" | ...
device.osVersion;  // { major, minor } | null
device.isStandalone; // ホーム画面アプリとして起動中か

① ホーム画面に追加（a2hs）

ホーム画面に追加できるか判定し、できなければ標準ブラウザへ誘導、できる場合は機種別の手順を案内します。

import { showA2hsGuide } from "@kuboon/browser-how-to/a2hs/ui";

document.querySelector("#install").addEventListener("click", () => {
  showA2hsGuide();
});

② パスキー（passkeys）

パスキーが使えるか判定し、使えなければ標準ブラウザへ誘導、使える場合はクロスデバイスや保存場所の仕組みを案内します。

import { showPasskeyGuide } from "@kuboon/browser-how-to/passkeys/ui";

document.querySelector("#passkey").addEventListener("click", () => {
  showPasskeyGuide();
});

③ プッシュ通知（push）

通知を受け取れる環境か判定し、iPhone で未インストールならホーム画面追加（a2hs）の案内へ、 アプリ内ブラウザなら標準ブラウザへ誘導します。通知の購読自体は行わず、前提条件を案内します。

import { showPushGuide } from "@kuboon/browser-how-to/push/ui";

document.querySelector("#push").addEventListener("click", () => {
  showPushGuide();
});