SvelteKit の beforeNavigate の cancel を使って画面を閉じる前に確認モーダルを出す方法

初めに

beforeNavigate cancel関数のtipsを発見したので紹介します。

ネイティブのダイアログを出す

beforeNavigateのtoがない時にcancelを呼んでおくと、ネイティブのダイアログが表示され、選択に応じた挙動になってくれます
cancel関数は本来、呼ぶと遷移をキャンセルするというものなのですが上記のケースはそうじゃないみたいです。

• toがない場合とは
  • リロード時
  • タブを閉じた時

  beforeNavigate(({ cancel, to, from }) => {
    // リロード時 または タブを閉じた時
    if (!to) {
      // ネイティブのダイアログが出ます
      cancel();
      return ;
    } 
  });

さいごに

未保存の内容がある場合に確認を出す
などに使えるので使ってみてください！