【譯】漸進式 Web App 的離線存儲

時間 2019-12-04

標籤漸進 web app 離線存儲欄目 HTML 简体版

原文原文鏈接

拖拖拉拉很久，終於把我的博客整出來了。鳴謝 @pinggod。html

厚着臉安利一下，地址是 http://www.wemlion.com/。歡迎訪問，歡迎收藏。html5

本文轉載自：衆成翻譯
譯者：文藺
連接：http://www.zcfy.cc/article/1067
原文：https://medium.com/@addyosmani/offline-storage-for-progressive-web-apps-70d52695513cgit

2016 極可能成爲網絡彈性（network resilience）元年。es6

網絡鏈接極可能不靠譜（flakey），或者根本就連不上，這也是爲何在漸進式 Web App（譯者注：Progressive Web App，如下簡稱 PWA）中，支持離線和性能可靠都很重要。本文總結了關於 PWA 離線數據存儲的一些創意。想一想那些提供有意義的離線體驗所須要的 JSON 數據、圖片以及其餘的靜態數據。github

離線存儲數據的建議：web

對 URL尋址資源(URL addressable resources)，使用 Cache API（這是 Service Worker 的一部分）。對其餘數據，使用 IndexedDB（給它包裝上 Promises）。sql

常見問題解答：chrome

IDB 和 Cache API 二者的 API 都是異步的（IDB 基於事件，Cache API 基於 Promise）。它們均可以在 Web Worker、Window 以及 Service Worker 三種環境下工做。shell
IDB 處處都支持（譯者注：原文如此，做者的意思請自行揣摩）。 Service Workers 和 Cache API 只在 Chrome、Firefox、Opera 中支持， Edge 中尚在開發。npm
IDB 不支持 Promise，但有一些強大的庫提供了 Promise 包裝。後面會給出建議。這些庫會盡量抹平 API 之間的強制複雜性（事務處理，schema 版本控制）。
原生的 IDB Promise 以及 observer 已獲得提議。
有多大的存儲量？Chrome 和 Opera 中，是按域計算存儲的（而不是按 API 計算）。在到達儲量限制以前，兩種存儲機制都會一直進行存儲。經過 Quota Management API 能夠檢查用量（譯者注：這個 API 還在提案階段）。Firefox 則沒有對存儲量作出限制，只是在 50 MB 以後會彈出提醒。移動版 Safari 最多能夠存 50 MB；桌面版 Safari沒有限制（滿5 MB 以後有提醒）；IE 10+ 最多能存 250 MB，超過 10 MB 以後彈出提醒。以上數據來源於 PouchDB 對 IDB 存儲行爲的跟蹤。朝着將來的方向看，若是應用須要更多持久化存儲，請看正在進行中的 Durable Storage。
Safari 在最新的 Tech Previews 中修復了許多長期存在的 IDB bug。即使如此，Safari 10 的 IDB 並未徹底經過 PouchDB 的測試套件，已經有人碰到了穩定性問題。在更多研究完成以前，可能會遇到各類不一樣的狀況。請務必測試並提交 bug，讓 webkit 的同窗和相關支持庫的做者們看看。
URL尋址資源一般是指能夠那些經過 URL 訪問的靜態資源。對 PWA 而言，你能夠經過 Cache API 緩存那些組成你的應用 shell 的靜態文件（JS/CSS/HTML），並經過 IndexedDB 向離線頁面填充數據。對此沒有硬性規定，PWA 僅靠 Cache API 就能玩得轉。
Chrome (Application tab)、Opera、Firefox (Storage Inspector)、Safari (Storage tab) 都已經支持 IndexedDB 調試。

值得一看的 IndexedDB 庫

localForage：約 8 KB，Promise，對傳統瀏覽器支持良好
idb-keyval：小於 500 字節，Promise，提供 key-value 支持
idb：約 1.7 KB，Promise, 可迭代、索引
Dexie：約 16 KB, Promises，複雜查詢、輔助索引
PouchDB：約 45 KB ，支持定製版本，同步的（？）
Lovefield：相關的內容
LokiJS：內存中的
ydn-db：相似 dexie，可使用 WebSQL

值得一看的 Service Worker 庫

sw-toolbox：動態或運行時請求的離線緩存
sw-precache：靜態資源或應用 shell 的離線預緩存
Webpack 用戶能夠直接使用上面的，或者能夠看看 offline-plugin

其餘存儲機制

Web Storage (e.g LocalStorage) 是同步的，不支持 Web Worker，且有大小限制（只能存儲字符串）。儘管以前異步 LocalStorage 的想法已有人提出來，但目前的焦點仍是 IndexedDB 2.0。我我的就願意使用 IDB 加上一個工具庫。
Cookies 自有其用途，但倒是同步的，不支持 Web Worker，還有大小限制。在以前的項目中我使用了 js-cookie（gzip 後約 800 字節）處理 cookie。目前已經有人勾勒出 Async Cookies API 的支持了，有一個可用的 polyfill。
WebSQL 是異步的（基於回調函數），但它一樣不支持 Web Worker。Firefox 和 Edge 也不支持它。若是某一天它徹底消失，我不會以爲驚訝的。
File System API 也是異步的（基於回調函數），在 Web Worker 和 window 中能夠工做（雖然使用的是同步 API）。不幸的是，除 Chrome 以外它並沒有更多興趣，並且是運行在沙盒中的（這意味着咱們沒法獲取原生的文件訪問權）。
File API 正在由 File and Directory Entries API 和 File API 規範完善。Github 上有一個 File API 庫；關於保存文件，做爲權宜之計，我一直在使用 FileSaver.js。可寫文件的提案最終可能會爲咱們提供本地文件無縫交互的標準解決方案。