Open11

エラハン物語 #PWA

llc_starhacksllc_starhacks

PWA #A2HS

consoleみれないかなあ

WebView

2024/08/08

LINEとInstagramは独自のuserAgentをもつWebViewで
window.navigator.serviceWorker が無い。
しかも try catchでエラハンしないとアプリ自体が動かない。

そしてmacに接続してインスペクター開いても、
極稀にしかLINE/InstagramのWebViewがヒットしない。

llc_starhacksllc_starhacks

setAppBadgeがないせいだった

window.navigator?.setAppBadge(100);

などの記述だと、
スマホの"ブラウザ"で立ち上げた時だけエラーがでてしまい、
原因特定が困難、どこが悪いのかわからなくなってしまいます。

理由
window.navigatorはあっても、setAppBadgeがないから。

これで解決:

    if (window.navigator?.setAppBadge) {
      window.navigator.setAppBadge(100);
    }
llc_starhacksllc_starhacks

Q. PWAの時だけ、userページでエラーがでる

  • 個別ページでerrorが: #PWA 通信が重い？ #未ログイン #ログイン
  • 一覧ページで描画されない: #PWA 通信が重い？ #未ログイン
llc_starhacksllc_starhacks

親でエラハンすると影響範囲(修正範囲)がでかいので、子でしようね。


const useRoomsHeads = ({ user }, { onSuccess } = { onSuccess: () => {} }) => {
  const SWR = useSWR(user ? `/roomsHeads?where=[${where}]` : null, {
    onSuccess: (data) => {
      console.log('[FData]:', data)
      onSuccess(new RoomsHeads({ data }));
    }
  });
  const { isMutating, trigger } = useSWRMutation(user ? `/roomsHeads?where=[${where}]` : null,
    (path: string, { arg }: any) => arg()
  );
  return {
    SWR,
    rooms: SWR.data && new Rooms({
      data: SWR.data,
      isMutating,
      trigger
    })
  };
};

// x: where: string
export const useRoomHeads = (userId, user = mine) => {
  
  const [room, setRoom] = useState();
  const { rooms } = useRoomsHeads(`["members", "array-contains", "${mine.id}"]`, {
    onSuccess: (rooms) => {
      const room = rooms.findBelongingTo(userId);
      setRoom(room);
    }
  });
};
llc_starhacksllc_starhacks

Q. TwitterのWebViewは問題ないが、LINEのだと 謎エラーで画面サワレナイ

  • よくみるとuserAgentに "LINE" という文字が
  • Xにはそんなのない

mac chrome:

Mozilla/5.0 (iPhone; CPU iPhone OS 16_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Mobile/15E148 Safari/604.1
llc_starhacksllc_starhacks

Q. mobile環境のみでエラーが

TypeError: Right side of assignment cannot be destructured

Q. なぜeslintやtsが弾いてくれない？

llc_starhacksllc_starhacks

Q. AndroidのWebviewやブラウザでどうも trueかundefined(おそらく後者)になってしまっている

以下のように修正してみる

-     setIsPWA(window.matchMedia('(display-mode: standalone)').matches);
+     setIsPWA(navigator.userAgent.match(/iPhone|Android.+Mobile/) && !window.matchMedia("(display-mode: standalone)").matches);