【版務】Progress Bar Update
2 月中旬飄過一下子。
受到部分瀏覽器會定期清理暫存的機制所限，本站無法永久儲存閱讀進度，今後已讀文章會採取兩種方式顯示：
- 近期讀過的文章，將會顯示 0 – 100% 的閱讀進度，會在重新進入時回到閱讀進度（即現行機制）
- 很久以前讀過的文章，有機會顯示 100% 已讀，不會在重新進入時回到閱讀進度（新增機制）
詳細見下述。
……
啊，其實我也發現了這問題一陣子了。
在上年 10 月時替本站及青 . 小說做了一個 Progress Bar 文章閱讀進度條，顯示文章是「未讀」、「已讀」或「讀到一半」。
Progress Bar
可能有一點兒小 fancy？
雖然本身記住 Scroll Position 算是羊的 request 才做的，但 Scroll Position 以及「未讀」或「已讀」的 indicator，應該還有一些用處吧？
在這裡我用的是 LocalStorage，一種「永久」儲存於瀏覽器的 memory；不同於 SessionStorage 會在你關閉瀏覽器視窗時刪除，或 Cookies 會在特定時候失效，LocalStorage 在使用者或網站清除之前都會記在瀏覽器裡面……
但是顯然在這裡 Safari 跟其餘瀏覽器的處理方式不同。爬了一會兒文，發現問題出自這裡：
自 Safari 13.1 起內建防止追蹤的機制，會為 7 天內沒上過的網站清除所有由 javascript 產生的暫存資料，包括 LocalStorage。這影響了桌面版 Safari，及所有 iOS 瀏覽器。（iOS 版的第三方瀏覽器，如 Chrome，皆使用 Safari 內核）；而且好像遲點其他瀏覽器也會跟上。
所以不得不爬上來 fix 了。
延伸閱讀：https://www.theregister.com/2020/03/26/apple_relax_were_not_totally/
那這次我做了些什麼呢？
其實在上年 10 月動手做這功能時，我最初考慮是用 css 中的 a:visited 語法去做的。
（現代的網站已經不是時常見到了，）有時上網在 click 一個連結後返回上一頁，會發現那個連結從藍色字變成紫紅色字了嗎？……就是那個了。
當時我的考慮：
- a:visited
最簡單的做法做到顯示「未讀」、「已讀」狀態，並不需要 javascript，而 visited 與否的狀態是根據瀏覽器紀錄
但是除了「已讀」之外無法記住閱讀進度 - LocalStorage
需要用到 javascript，是我在去年 10 月選擇的方案
好處是除了「未讀」、「已讀」狀態之外，還可以記住 Scroll Position，也因此能做到重新進入時回到閱讀進度，以及顯示 0 – 100% 的 Progress Bar
那這次我做了什麼呢？就是……why not both？
現在是兩種機制並行，在 LocalStorage 找到了閱讀進度的現行機制，就會顯示 0 – 100% 的進度條；而萬一瀏覽器的 LocalStorage 被清除了，也能根據瀏覽紀錄顯示「未讀（0% 進度條）」及「已讀（100% 進度條）」兩個狀態了。
順帶留下簡單的 code：
<style>
.progress-bar {
background: #ddd;
}
.progress-bar.visited, a:visited .progress-bar {
background: #30a080;
}
</style>
...
<a href="blog-post.html">
<div class="progress-bar-container"><div class="progress-bar"/></div>
</a>
比較複雜的是《青 . 小說》。
因為我在文章列表也會顯示整體 Progress Bar，像這張圖：
《青 . 小說》在「加入主畫面」才能維持這功能
這個功能只能透過 LocalStorage 或其他暫存機制運作，因為 javascript 並無任何方式取得用戶瀏覽紀錄，也沒有方式可以計算 a:visited 的數量。
我加了一句 code，是當《青 . 小說》以「加入主畫面」模式運行才會在首頁、列表顯示整體閱讀進度，因為不會被瀏覽器清除；其餘情況則只顯示個別文章的閱讀進度（同上，以 LocalStorage 及 a:visited 兩個機制並行），以免出現奇怪的狀況。
……
也不是什麼肉眼看得出的分別，這次就不上新圖了。
嘛，就這樣。
青鳥
２０２２年２月
2 月中旬飄過一下子。
受到部分瀏覽器會定期清理暫存的機制所限，本站無法永久儲存閱讀進度，今後已讀文章會採取兩種方式顯示：
- 近期讀過的文章，將會顯示 0 – 100% 的閱讀進度，會在重新進入時回到閱讀進度（即現行機制）
- 很久以前讀過的文章，有機會顯示 100% 已讀，不會在重新進入時回到閱讀進度（新增機制）
詳細見下述。
……
啊，其實我也發現了這問題一陣子了。
在上年 10 月時替本站及青 . 小說做了一個 Progress Bar 文章閱讀進度條，顯示文章是「未讀」、「已讀」或「讀到一半」。
Progress Bar
可能有一點兒小 fancy？
雖然本身記住 Scroll Position 算是羊的 request 才做的，但 Scroll Position 以及「未讀」或「已讀」的 indicator，應該還有一些用處吧？
在這裡我用的是 LocalStorage，一種「永久」儲存於瀏覽器的 memory；不同於 SessionStorage 會在你關閉瀏覽器視窗時刪除，或 Cookies 會在特定時候失效，LocalStorage 在使用者或網站清除之前都會記在瀏覽器裡面……
但是顯然在這裡 Safari 跟其餘瀏覽器的處理方式不同。爬了一會兒文，發現問題出自這裡：
自 Safari 13.1 起內建防止追蹤的機制，會為 7 天內沒上過的網站清除所有由 javascript 產生的暫存資料，包括 LocalStorage。這影響了桌面版 Safari，及所有 iOS 瀏覽器。（iOS 版的第三方瀏覽器，如 Chrome，皆使用 Safari 內核）；而且好像遲點其他瀏覽器也會跟上。
所以不得不爬上來 fix 了。
延伸閱讀：https://www.theregister.com/2020/03/26/apple_relax_were_not_totally/
那這次我做了些什麼呢？
其實在上年 10 月動手做這功能時，我最初考慮是用 css 中的 a:visited 語法去做的。
（現代的網站已經不是時常見到了，）有時上網在 click 一個連結後返回上一頁，會發現那個連結從藍色字變成紫紅色字了嗎？……就是那個了。
當時我的考慮：
- a:visited
最簡單的做法做到顯示「未讀」、「已讀」狀態，並不需要 javascript，而 visited 與否的狀態是根據瀏覽器紀錄
但是除了「已讀」之外無法記住閱讀進度 - LocalStorage
需要用到 javascript，是我在去年 10 月選擇的方案
好處是除了「未讀」、「已讀」狀態之外，還可以記住 Scroll Position，也因此能做到重新進入時回到閱讀進度，以及顯示 0 – 100% 的 Progress Bar
那這次我做了什麼呢？就是……why not both？
現在是兩種機制並行，在 LocalStorage 找到了閱讀進度的現行機制，就會顯示 0 – 100% 的進度條；而萬一瀏覽器的 LocalStorage 被清除了，也能根據瀏覽紀錄顯示「未讀（0% 進度條）」及「已讀（100% 進度條）」兩個狀態了。
順帶留下簡單的 code：
<style>
.progress-bar {
background: #ddd;
}
.progress-bar.visited, a:visited .progress-bar {
background: #30a080;
}
</style>
...
<a href="blog-post.html">
<div class="progress-bar-container"><div class="progress-bar"/></div>
</a>
比較複雜的是《青 . 小說》。
因為我在文章列表也會顯示整體 Progress Bar，像這張圖：
《青 . 小說》在「加入主畫面」才能維持這功能
這個功能只能透過 LocalStorage 或其他暫存機制運作，因為 javascript 並無任何方式取得用戶瀏覽紀錄，也沒有方式可以計算 a:visited 的數量。
我加了一句 code，是當《青 . 小說》以「加入主畫面」模式運行才會在首頁、列表顯示整體閱讀進度，因為不會被瀏覽器清除；其餘情況則只顯示個別文章的閱讀進度（同上，以 LocalStorage 及 a:visited 兩個機制並行），以免出現奇怪的狀況。
……
也不是什麼肉眼看得出的分別，這次就不上新圖了。
嘛，就這樣。
青鳥
２０２２年２月