775
技術社區[雲棲]
低成本打造一個帶寬無限的網站（三）
前端代理
HTML5 時代的黑科技層出不窮，但最具創新的也許要數 Service Worker，它甚至可以顛覆傳統的 B/S 網絡架構。
顧名思義，Service 是服務程序，而 Worker 常用於多線程。因此 Service Worker（以下簡稱 SW）是一種獨立於頁麵、可持續運行的瀏覽器後台程序。
SW 提供了一組 API，可讓網站開發者攔截自己站點下 所有頁麵 產生的 所有請求，並且能自定義響應結果。（除了一些特殊請求無法攔截）
這，如同在本地開啟一個反向代理服務！
有了這麼逆天的功能，在前端做負載均衡就非常容易了，甚至還能實現過去不敢想象的效果 —— 實時無縫的切換。
實時切換
作為代理，當 SW 加載上遊資源失敗時，可選擇不返回錯誤結果，而是嚐試後備站點再次加載，直到返回正確結果，才響應給下遊網頁：
在網頁看來，這隻是一次普通的請求與響應 —— 也許用時更長一些，但結果仍是正常的。SW 中的重試細節，對於業務是完全透明的！
相比 DNS 最少也有數秒的緩存時間，這種通過程序控製的方案，能在極短的時間內切換源站點。這樣即使某些節點出現故障，頁麵甚至都毫無感知！
校驗加密
除了能改變 URL 之外，SW 當然還能操作返回的數據。
這意味著，我們可以增加一個校驗機製，用以檢測資源是否遭到篡改。於是那些插廣告、加水印之類的問題，就能很好解決了！
此外，我們還可以對原始數據進行加密，再由 SW 解密。這對於私密性不高的節點，很是有意義。
例如用 Raw Git 作為免費空間，我們所有的文件都能在 GitHub 倉庫裏找到，任何人都可以輕易查看。但如果對文件進行加密，同時對 SW 中的解密算法進行混淆保護，就能增加查看難度了 —— 至少 GitHub 的搜索功能、以及普通的蜘蛛，是不會抓到明文內容了。
更進一步，我們甚至還可以對文件名進行 Hash 再存儲。這樣，暴露的隻是一堆亂七八糟、沒有目錄層次的文件！
離線啟動
前麵我們提到，SW 能攔截頁麵裏的請求。事實上 SW 開啟之後，訪問頁麵本身也會經過 SW。
這意味著：用戶隻要裝上 SW，之後所有的請求都可代理到外部節點上，於是可大幅減少自己網站的流量消耗！
這樣就算我們的網站掛了，但隻要有一個節點可用，用戶仍能正常訪問！
精簡啟動
為了能在帶寬吃緊的情況下迎接新用戶，我們參照之前「迷你啟動器」的方案，把安裝 SW 所需的資源，精簡到最小 —— 最終隻需兩個極小的文件：html 和 js 文件。（SW 的腳本必須在當前站點下）
用戶首次訪問時，無論訪問哪個 URL，我們都返回這個 html 文件，用以安裝 SW 服務；安裝完成後，頁麵自動刷新，這時所有請求都走 SW 代理了！
關於 html 的內容，和之前探討的一樣，所有功能都由外部腳本實現：
<script src=//free-host-n.net/boot.js></script>
而 SW 腳本的內容，同樣也可以放置在外部：
importScripts('//free-host-n.net/sw.js')
於是，我們的站點隻需承載兩個極小的文件，就能獲得無盡的帶寬！
改造成本
相比之前強緩存的方案，如今使用 SW 無需對前端做任何改造，頁麵裏的資源仍保持原始路徑即可。如同使用 VPN 一樣，無需對應用程序對任何修改，開啟後流量就能自動轉發到代理上，用起來非常簡單。
這樣，任何一個網站都能輕鬆接入使用！
事實上 SW 可實現的效果遠不止這些，我們繼續深入挖掘吧。
最後更新：2017-11-09 11:34:41