為網站提供離線版!UpUp 讓使用者在無連線時也可瀏覽內容



為網站提供離線版!UpUp 讓使用者在無連線時也可瀏覽內容為網站提供離線版!UpUp 讓使用者在無連線時也可瀏覽內容

隨著行動網路與 Wi-Fi 日漸普及,現今許多使用者可能都不是坐在電腦前上網,而是透過行動裝置(例如手機、平板電腦)來瀏覽網站。但大家都知道,無線網路並不一定時時刻刻都有良好的連線品質,如果剛好進電梯、搭捷運,或是遇到收訊死角,網路就無法正常開啟網站。若你希望提供使用者更好的瀏覽體驗(或是你擁有非常大量的行動裝置訪客),可以考慮使用 UpUp 來強化網站在離線時的瀏覽功能。

UpUp let users visit your site, even when they’re on a plane over the Atlantic, or 20,000 leagues under the sea. #OfflineFirst(UpUp 讓使用者隨時隨地皆可瀏覽你的網站,無論在飛越大西洋的飛機上,或在海底兩萬哩。)

UpUp 是一個免費、開放原始碼的小型 JavaScript 程式,使用一項名為 Service Workers 技術,大多數的主流瀏覽器都能支援。當使用者處於離線狀態,就能夠瀏覽指定的網站內容。

一般我們認知的情況是如果行動裝置暫時沒有網路連線,這時候只會出現瀏覽器的錯誤畫面,在網站加入 UpUp 後,你可以設定要以那些內容或網頁來取代這情境,無論要顯示簡易離線訊息,或是建立一個離線也能夠瀏覽的網頁,都能輕鬆做到。

網站名稱:UpUp
網站鏈結:https://www.talater.com/upup/

使用教學

STEP 1

UpUp 用法其實非常簡單,只要到 GitHub 下載最新版本的 upup.min.js 程式,把它上傳到你的伺服器,然後從網頁裡載入這段程式碼即可。利用設定來選擇當離線狀態時要載入的頁面及相關內容。

<script src="/upup.min.js"></script>
 <script>
 UpUp.start({
 'content-url': 'offline.html' // show this page to offline users
 });
 </script>

UpUpUpUp

STEP 2

若你對於程式碼不是那麼熟悉,也可閱讀 UpUp 提供的說明文件(Tutorial),裡頭有一些實際的使用方法和程式碼可以參考,同時也會一併顯示出預覽效果,讓開發者知道能夠這樣設定。

UpUpUpUp

目前 UpUp 支援所有主要瀏覽器,包括 Chrome 40+、Opera 27+ 及 Firefox 41+。如果使用者使用其他的瀏覽器,離線時就不會產生效果。

值得一試的三個理由:

  1. 免費、開放原始碼
  2. 程式本身非常小巧(不到 1kb),支援主要瀏覽器
  3. 可設定離線狀態下要顯示的內容、網頁或相關資源

Ten articles before and after

[教學] 為 WordPress 開啟「單一登入」機制,讓網站更安全

Facebook 推出「On This Day」我的這一天,快速倒轉回顧過往大小事

關閉 Facebook 我的這一天,不再顯示不想看到的過往訊息

Dropbox 學生空間大滿貫即將過期,回收 25GB 容量後六個替代方案選擇

OneDrive 全面縮減容量,開啟這網頁避免空間被降為 5 GB!

解決 Facebook 與 Chrome 桌面通知同時出現的問題

Tab Counter 在瀏覽器分頁標籤即時顯示網站數字變化,例如線上人數、按讚數、影片播放時間等等…

將 Microsoft Translator 加入網站,讓你的網站或部落格支援多國語言!

Microsoft Translator 微軟全新免費翻譯 App 下載,支援全世界 50 種語言(iOS、Android、WP)

使用 Facebook 安全檢查工具,讓臉書帳號更安全的三個方法教學