資訊專欄INFORMATION COLUMN
摘要：離線存儲數據的建議對尋址資源，使用這是的一部分。在到達儲量限制之前，兩種存儲機制都會一直進行存儲。則沒有對存儲量做出限制，只是在之后會彈出提醒。是異步的基于回調函數，但它同樣不支持。也是異步的基于回調函數，在和中可以工作雖然使用的是同步。
拖拖拉拉好久，終于把個人博客整出來了。鳴謝 @pinggod。
厚著臉安利一下，地址是 http://www.wemlion.com/。歡迎訪問，歡迎收藏。
本文轉載自：眾成翻譯
譯者：文藺
鏈接：http://www.zcfy.cc/article/1067
原文：https://medium.com/@addyosmani/offline-storage-for-progressive-web-apps-70d52695513c
2016 很可能成為網絡彈性（network resilience）元年。
網絡連接很可能不靠譜（flakey），或者根本就連不上，這也是為什么在 漸進式 Web App（譯者注：Progressive Web App，以下簡稱 PWA） 中，支持離線和性能可靠都很重要。本文總結了關于 PWA 離線數據存儲的一些創意。想想那些提供有意義的離線體驗所需要的 JSON 數據、圖片以及其他的靜態數據。
離線存儲數據的建議：
對 URL尋址資源(URL addressable resources)，使用 Cache API（這是 Service Worker 的一部分）。對其他數據，使用 IndexedDB（給它包裝上 Promises）。
常見問題解答：
IDB 和 Cache API 兩者的 API 都是異步的（IDB 基于事件，Cache API 基于 Promise）。它們都可以在 Web Worker、Window 以及 Service Worker 三種環境下工作。
IDB 到處都支持（譯者注：原文如此，作者的意思請自行揣摩）。 Service Workers 和 Cache API 只在 Chrome、Firefox、Opera 中支持， Edge 中尚在開發。
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。可寫文件的提案最終可能會為我們提供本地文件無縫交互的標準解決方案。
離線存儲的現在與將來如果對離線緩存感興趣，下面這些成果值得關注。我個人對 IndexedDB 原生的 Promise 支持非常感興趣。
Durable Storage: 將存儲與瀏覽器的清除策略隔開
Indexed Database API 2.0: 先進的 key-value 數據管理
Promisified IndexedDB: 原生支持 Promise 的 IndexedDB 版本
IndexedDB Observers: 原生的 IndexedDB observer 支持
Async Cookies API: 異步的 cookie API
Quota Management API: 檢查應用、域的存儲占用量
writable-files: 允許網站與本地文件之間進一步的無縫交互
Directory downloads: 支持直接下載文件夾（非 .zip 文件）
File and Directory Entries API: 支持文件和目錄的拖拽上傳
資源Browser Database Comparison
State of offline storage APIs
IndexedDB, WebSQL, LocalStorage?—?what blocks the DOM?
How to think about databases (Pokedex research)
Which APIs are supported in Web Workers and Service Workers?
離線存儲并沒有那么神奇，對潛在 API 的理解有助于你最大程度地利用現有的資源。無論你想直接使用這些 API，還是使用對它們進行抽象庫文件，花一些時間來熟悉你的選擇。
希望本文對你的 PWA 離線體驗有所幫助。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/61790.html
摘要：離線存儲數據的建議對尋址資源，使用這是的一部分。在到達儲量限制之前，兩種存儲機制都會一直進行存儲。則沒有對存儲量做出限制，只是在之后會彈出提醒。是異步的基于回調函數，但它同樣不支持。也是異步的基于回調函數，在和中可以工作雖然使用的是同步。 拖拖拉拉好久，終于把個人博客整出來了。鳴謝 @pinggod。 厚著臉安利一下，地址是 http://www.wemlion.com/。歡迎訪問，歡...
摘要：在上一篇，介紹一下漸進式離線的文章中，我們討論了典型的應該是什么樣子的并且同時也介紹了。暴露了一個異步，以避免阻塞的加載。但一些研究表明，在某些情況下，它是阻塞的。打開并且添加如下代碼清除緩存并重新加載。 在上一篇，介紹一下漸進式 Web App(離線) - Part 1的文章中，我們討論了典型的pwa應該是什么樣子的并且同時也介紹了 server worker。到目前為止，我們已經緩...
摘要：在上一篇，介紹一下漸進式離線的文章中，我們討論了典型的應該是什么樣子的并且同時也介紹了。暴露了一個異步，以避免阻塞的加載。但一些研究表明，在某些情況下，它是阻塞的。打開并且添加如下代碼清除緩存并重新加載。 在上一篇，介紹一下漸進式 Web App(離線) - Part 1的文章中，我們討論了典型的pwa應該是什么樣子的并且同時也介紹了 server worker。到目前為止，我們已經緩...
摘要：在上一篇，介紹一下漸進式離線的文章中，我們討論了典型的應該是什么樣子的并且同時也介紹了。暴露了一個異步，以避免阻塞的加載。但一些研究表明，在某些情況下，它是阻塞的。打開并且添加如下代碼清除緩存并重新加載。 在上一篇，介紹一下漸進式 Web App(離線) - Part 1的文章中，我們討論了典型的pwa應該是什么樣子的并且同時也介紹了 server worker。到目前為止，我們已經緩...
摘要：在年成為最大贏家，贏得了實現的風暴之戰。和他的競爭者位列第二沒有前端開發者可以忽視和它的生態系統。他的殺手級特性是探測功能，通過檢查任何用戶的功能，以直觀的方式讓開發人員檢查所有端點。 2016 JavaScript 后起之秀 本文轉載自：眾成翻譯譯者：zxhycxq鏈接：http://www.zcfy.cc/article/2410原文：https://risingstars2016...
閱讀 1752·2021-10-13 09:39
閱讀 1321·2019-08-30 13:58
閱讀 1415·2019-08-29 16:42
閱讀 3563·2019-08-29 15:41
閱讀 2996·2019-08-29 15:11
閱讀 2482·2019-08-29 14:10
閱讀 3413·2019-08-29 13:29
閱讀 2093·2019-08-26 13:27
