先辨認被還原的頁面

顧客可能離開結帳頁查看商品、在另一個分頁改動購物車,或從付款服務返回後按瀏覽器「上一頁」。瀏覽器或會從上一頁/下一頁快取還原整份舊文件,連當時的介面狀態一起帶回來;這不是商店重新回傳的最新頁面。快速返回對顧客方便,但畫面的數量、價格、登入身分或可按的按鈕,可能仍屬較早的一刻。商店應把它視為待核對的畫面,先與伺服器目前記錄對齊,才讓顧客作下一個有後果的動作。

Google 的網頁平台說明指出,初次載入及從上一頁/下一頁快取還原時都會觸發 pageshow;當事件的 persisted 為 true,便可辨認這次屬於還原。離開頁面時的 pagehide 可以表示瀏覽器打算暫存頁面,但它的 true 並不保證稍後一定成功還原。因此,回到結帳頁的核對程序應同時涵蓋還原與正常載入;正確性不可押注某款瀏覽器一定會保存舊頁。

先決定哪份資料作準

購物車項目、數量、適用價格、運送方法、供貨情況及付款狀態,應以訂單系統現時資料作準。被還原的畫面、舊 JavaScript 變數或按鈕文字,都不能授權交易。顧客返回時,商店應按有效登入狀態及經伺服器驗證的購物車或訂單識別碼取得最新摘要,再與畫面比較。若顧客在別處改了數量,便顯示新數量並解釋總額變化;若登入已失效,應提供重新登入的路徑,並按帳戶政策安全地返回原流程。

付款頁返回更需要獨立核對。付款服務的跳轉、瀏覽器歷史記錄和顧客口述,都只是線索,不能取代商店的最終付款記錄。應由伺服器查詢訂單目前屬於待確認、已付款還是失敗,再分別顯示。若付款尚待確認,先避免再次扣款,直至系統能提供安全的恢復選擇。若訂單已成立,按「上一頁」後的舊結帳按鈕不能再次建立訂單;重複請求應按原訂單識別碼及既有防重複控制處理。

讓顧客看得見資料更新

靜悄悄更新數字同樣可能誤導。假設顧客返回時,舊畫面顯示兩件商品、示例總額港幣六百元;另一分頁已移走一件,伺服器現時只記錄一件、示例總額港幣三百五十元。這些金額純屬說明,並非實際價格或優惠。商店應替換舊摘要、指出哪件商品已移除,並請顧客確認新的應付金額才繼續。若總額或配送條件有變,舊選擇只有在仍然有效時才可保留。驗收重點是顧客能否說清楚發生甚麼變化,以及自己將同意支付哪個金額。

核對期間仍要讓頁面容易理解。可標示訂單摘要正在更新,並暫停最終付款或落單動作,以免使用舊資料。如果網絡中斷而無法核對,應說明目前總額未能確認,提供重試或安全返回購物車的方式;不能因為舊金額已顯示就當作最終金額。可盡量保留無害的表格輸入,但要分清楚它們與伺服器已確認的選擇。頁面重新出現後若內容改動,清楚的狀態訊息和可追蹤的焦點位置,對使用輔助科技的顧客尤其重要。

把私隱判斷與速度分開

上一頁/下一頁快取與 HTTP 快取不是同一回事。即使 HTTP 回應要求重新驗證,瀏覽器從記憶體還原舊文件時,也不會因此自動取得最新資料。Google 的說明特別指出,舊結帳資料以及登出後仍顯示私人內容,都是要處理的風險。商店不應為求返回速度而放寬敏感資料的回應政策;真正敏感的頁面可能需要 no-store 或另一種設計。資料較不敏感的頁面則可在可靠的返回核對下保留快速還原。不同瀏覽器對 no-store 的處理亦可能變動,應在實際支援的瀏覽器驗證。

登出之後,被還原的帳戶或結帳頁不應讓同一部裝置的下一位使用者看到可用的個人資料或仍有效的操作。應先驗證登入狀態;若已失效,就清除敏感的前端狀態,導向登入或中性頁面。測試時要留意非同步更新完成之前,舊畫面是否已短暫露出資料,不能只看最後停留的畫面。若產品政策要求瀏覽器歷史記錄完全不保留敏感資料,便應明確列出並設計回應及導覽方式,不能假設 pageshow 一定能在任何人看見之前抹除內容。

建立一致的返回流程

結帳頁可設一段簡單的返回協調流程:頁面重新可見時先辨認是否還原,在狀態未確定前鎖住有交易後果的按鈕,取得伺服器最新摘要,核對差異,再向顧客說明結果。正常載入也應依照同一份伺服器資料與最終操作規則。不要只為了強制重載而加上 unload 監聽器;某些瀏覽器可能因此無法使用快速還原,而且仍未解決恢復流程。若頁面有長時間連線,可在 pagehide 適時釋放,並於 pageshow 恢復,但要避免重複建立連線。事件可能多次出現,流程應可安全重跑。

分析報表的定義要與顧客操作正確性分開。從上一頁/下一頁快取還原,屬於歷史導覽,不一定是新的文件載入。若商店計算結帳瀏覽或放棄次數,應先訂明還原是否算另一個瀏覽,再一致實作。未有量度證據,不能把畫面較快出現說成銷售提升。這裏較具體的營運目標是:最終金額沒有過期、不會因返回而重複建立訂單、登出後不露出私人資料,以及顧客能重新作有效選擇。這些都可以在上線前逐項驗收。

測試真正會改變狀態的路徑

用測試購物車,並在每次導覽前記錄伺服器狀態。先從結帳頁往商品頁再返回,若沒有資料變動,原選擇應仍有效。然後在另一分頁改數量再返回;新的總額應先出現,最終操作才重新可按。再測試缺貨及配送資格改變。完成一筆測試訂單後按返回,確認舊表格不能再建立第二張訂單。最後,在另一分頁登出再返回,檢查受保護的資料不會繼續可見或可操作。每一步都要同時看畫面和伺服器記錄。

上述路徑應在顧客實際使用的瀏覽器及裝置重複測試。開發時可查看 pageshow.persisted,但也要測試沒有快取還原、只能重新載入的情況;兩者最終結果應一致。記錄顧客在更新期間看到甚麼、總額和付款狀態是否與伺服器相符,以及屏幕閱讀器能否聽到有用提示。開發工具若指出某頁不能還原的原因,可留待日後改善速度;它不能取代核心驗收:無論瀏覽器採用哪條快取路徑,顧客都應抵達正確的訂單狀態。

讓客服看得見狀態脈絡

顧客說「我按返回後價錢變了」時,客服應能根據資料回答,而不能把舊截圖當作已扣款的證明。系統可記錄安全的訂單或購物車參考碼、重新核對時伺服器回傳的摘要版本,以及當時展示給顧客的結果。付款參考資料須與卡號資料分開,亦不應要求顧客傳送密碼。若確有合法價格變動,應按實際訂單記錄解釋原因;若是舊畫面未更新,則應承認顯示問題,先指出已確認金額,再讓顧客採取下一步。

核對記錄應保持精簡,不必把含有個人資料的整個購物車複製到分析事件中。時間、導覽路徑、狀態轉變及非秘密參考碼,已可協助團隊重現問題,同時符合商店的資料最少化選擇。應確認返回核對請求即使重試,也不會建立新訂單;客服亦不能只憑畫面報告改寫付款狀態。這樣一來,瀏覽器生命週期中的邊界情況便成為可管理的服務流程:顧客理解更正後的狀態,員工則可追查該狀態如何形成。

進行前先確認

  • 最終操作會否等待伺服器最新摘要?
  • 付款後按返回,會否回到原有訂單?
  • 登出後,舊私人資料會否仍可見或可用?

資料來源及延伸閱讀