ページ離脱時のイベントをiOSのブラウザでも発生させたい

Question

質問

Vue.jsでページ離脱時にAPIを実行したいのですが、表題の通りiOSからでは期待した動作が行われません。
別の方法をご教授いただけないでしょうか。

ソースコード

mounted: function() {
   // ページから離れる前にここが呼ばれる
    window.addEventListener('beforeunload', function() {
        this.request();
    });
},
methods: {
    request: function() {
      axios
        .post("/api/update", this.params)
        .then(function(response) {})
        .catch(function(err) {});
    },
}

試したこと

iOS（Safari）ではbeforeunloadは呼ばれないようなので、pagehideに置き換えましたが、
axiosが実行されません。

mounted: function() {
   // ページから離れる前にここが呼ばれる
    window.addEventListener('pagehide', function() {
        this.request();
    });
},
methods: {
    request: function() {
      console.log('ここまでは動く')
      axios
        .post("/api/update", this.params)
        .then(function(response) {})
        .catch(function(err) {});
    },
}

参考

https://qiita.com/ta__ho/items/937257c3c9891bdf2d38

Answer 1

https://teratail.com/questions/23619
↑こちらにもpagehideを使う話が出てきていますね。参考になるかもしれません。

ページ遷移系一般についてですが、遷移のイベントを拾って非同期な処理を行おうとすると、処理完了前にページ遷移が起きてしまい、安定して処理が行えないという問題はよく発生します。

また、pagehideは「閉じたあとに発生」すると前述の記事にあったので、この時点で通信は行えない状態なのかもしれません。

苦肉の策としては、リンククリックを拾って非同期処理完了後、location.hrefなどを使って擬似的に遷移する...などの方法ですかね。

Comments

[poteto4401]

そちらも以前確認しました。

やはりシンプルに実装できないものなのですね。。

ありがとうございました！