デスクトップでは Twitter を PWA で使っていますが、タイムラインが自動更新されないのがちょっと・・と思っていました。
かなり前に Electron で作ってた Twitter client
このアプリに自動リフレッシュを組み込んでみようと思いました。定期的にホームボタンの click イベントを発火させるのが簡単そうです。
Chrome の DevTools で調べるとこのボタンは SVG 画像を a
タグで囲んだもので、"data-testid" という属性を持っていました。DevTools の console では以下のようなコードで発火させられました。
document.querySelector("a[data-testid]").click();
Electron WebView では executeJavaScript
メソッドで上記のコードを実行できます。
function clickHome() { webview.executeJavaScript('document.querySelector("a[data-testid]").click();'); }
あとは、setInterval
で適当な間隔でこのfunction を呼び出せば、懐かしい感じにタイムラインが自動で流れていくようになりました。
追記) タイムライン以外の検索や通知の画面でリフレッシュされるのがうざいので、さらに調べたところ、メインカラムのタイトルが 「ホームタイムライン」になっているのがタイムライン選択状態のようです。そこで以下のようなコードを executeJavaScript
に渡すといい感じにタイムラインの時だけリフレッシュしてくれるようになりました。
if (document.querySelector("h1[aria-level]").innerHTML === "ホームタイムライン") { document.querySelector("a[data-testid]").click(); }
Twitter 側のデザイン変更にとても弱そうな方式ではありますが。