Skip to main content

2-8

IOS Safari audio 禁止自動播放​

經過測試，在 IOS 系統的 Safari 無法自動播放 audio 音檔，因此要解決此問題，首先要判斷目前瀏覽器環境是否在 iphone 的 safari 瀏覽器上面：

const ua = navigator.userAgent.toLowerCase();

if (ua.indexOf('applewebkit') > -1 && ua.indexOf('mobile') > -1 && ua.indexOf('safari') > -1
    && ua.indexOf('linux') == -1 && ua.indexOf('android') == -1) {
    alert("是");
}
    else {
    alert("不是");
}

接著， IOS Safari 只允許在使用者觸發相關事件中做播放，故選用 touchstart event，這算是個硬繞過限制的方法，在事件中將 audio 播放非常小聲且時間很短的音樂，再把此事件偵聽移除，接著就按照原本要的邏輯播放音檔就可以 (audio 要用同一個 element)：https://stackoverflow.com/questions/31776548/why-cant-javascript-play-audio-files-on-iphone-safari/68107904#68107904

HttpOnly​

目前瀏覽器大多都有實作此項安全性防護，在 cookie 設置中加入 HttpOnly，可阻止網頁 JS 存取 cookie，能防止 XSS 攻擊盜走 cookie。

Secure​

在 http 網頁底下無法存取有設置 secure 的 cookie。

編碼​

React batch update 機制​

  • 同一個 fuction 內更新 state 多次，若是 react-based 的 event handler：透過 JSX 綁定的 click, onChange 或 react lifecycle 等等，更新多次 state 後只會重新 render 一次 (batch update)，若是 non-react-based 的： setTimeout, Promise calls, 自己在 addEvent 綁定的 native event 等等，更新多次 state 會重新 render 多次。
  • React 18 的新 feature: auto batching，能將上述會 re-render 多次的情況通通 batch update
  • https://stackoverflow.com/questions/53048495/does-react-batch-state-update-functions-when-using-hooks
Last updated on