国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

【譯】漸進(jìn)式 Web App 的離線存儲(chǔ)

Joyven / 1525人閱讀

摘要：離線存儲(chǔ)數(shù)據(jù)的建議對(duì)尋址資源，使用這是的一部分。在到達(dá)儲(chǔ)量限制之前，兩種存儲(chǔ)機(jī)制都會(huì)一直進(jìn)行存儲(chǔ)。則沒(méi)有對(duì)存儲(chǔ)量做出限制，只是在之后會(huì)彈出提醒。是異步的基于回調(diào)函數(shù)，但它同樣不支持。也是異步的基于回調(diào)函數(shù)，在和中可以工作雖然使用的是同步。

拖拖拉拉好久，終于把個(gè)人博客整出來(lái)了。鳴謝 @pinggod。

厚著臉安利一下，地址是 http://www.wemlion.com/。歡迎訪問(wèn)，歡迎收藏。

本文轉(zhuǎn)載自：眾成翻譯
譯者：文藺
鏈接：http://www.zcfy.cc/article/1067
原文：https://medium.com/@addyosmani/offline-storage-for-progressive-web-apps-70d52695513c

2016 很可能成為網(wǎng)絡(luò)彈性（network resilience）元年。

網(wǎng)絡(luò)連接很可能不靠譜（flakey），或者根本就連不上，這也是為什么在 漸進(jìn)式 Web App（譯者注：Progressive Web App，以下簡(jiǎn)稱(chēng) PWA） 中，支持離線和性能可靠都很重要。本文總結(jié)了關(guān)于 PWA 離線數(shù)據(jù)存儲(chǔ)的一些創(chuàng)意。想想那些提供有意義的離線體驗(yàn)所需要的 JSON 數(shù)據(jù)、圖片以及其他的靜態(tài)數(shù)據(jù)。

離線存儲(chǔ)數(shù)據(jù)的建議：

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

常見(jiàn)問(wèn)題解答：

IDB 和 Cache API 兩者的 API 都是異步的（IDB 基于事件，Cache API 基于 Promise）。它們都可以在 Web Worker、Window 以及 Service Worker 三種環(huán)境下工作。

IDB 到處都支持（譯者注：原文如此，作者的意思請(qǐng)自行揣摩）。 Service Workers 和 Cache API 只在 Chrome、Firefox、Opera 中支持， Edge 中尚在開(kāi)發(fā)。

IDB 不支持 Promise，但有一些強(qiáng)大的庫(kù)提供了 Promise 包裝。后面會(huì)給出建議。這些庫(kù)會(huì)盡可能抹平 API 之間的強(qiáng)制復(fù)雜性（事務(wù)處理，schema 版本控制）。

原生的 IDB Promise 以及 observer 已得到提議。

有多大的存儲(chǔ)量？Chrome 和 Opera 中，是按域計(jì)算存儲(chǔ)的（而不是按 API 計(jì)算）。在到達(dá)儲(chǔ)量限制之前，兩種存儲(chǔ)機(jī)制都會(huì)一直進(jìn)行存儲(chǔ)。通過(guò) Quota Management API 可以檢查用量（譯者注：這個(gè) API 還在提案階段）。Firefox 則沒(méi)有對(duì)存儲(chǔ)量做出限制，只是在 50 MB 之后會(huì)彈出提醒。移動(dòng)版 Safari 最多可以存 50 MB；桌面版 Safari沒(méi)有限制（滿(mǎn)5 MB 之后有提醒）；IE 10+ 最多能存 250 MB，超過(guò) 10 MB 之后彈出提醒。以上數(shù)據(jù)來(lái)源于 PouchDB 對(duì) IDB 存儲(chǔ)行為的跟蹤。朝著未來(lái)的方向看，如果應(yīng)用需要更多持久化存儲(chǔ)，請(qǐng)看正在進(jìn)行中的 Durable Storage。

Safari 在最新的 Tech Previews 中修復(fù)了許多長(zhǎng)期存在的 IDB bug。即便如此，Safari 10 的 IDB 并未完全通過(guò) PouchDB 的測(cè)試套件，已經(jīng)有人碰到了穩(wěn)定性問(wèn)題。在更多研究完成之前，可能會(huì)遇到各種不同的情況。請(qǐng)務(wù)必測(cè)試并提交 bug，讓 webkit 的同學(xué)和相關(guān)支持庫(kù)的作者們看看。

URL尋址資源通常是指可以那些通過(guò) URL 訪問(wèn)的靜態(tài)資源。對(duì) PWA 而言，你可以通過(guò) Cache API 緩存那些組成你的應(yīng)用 shell 的靜態(tài)文件（JS/CSS/HTML），并通過(guò) IndexedDB 向離線頁(yè)面填充數(shù)據(jù)。對(duì)此沒(méi)有硬性規(guī)定，PWA 僅靠 Cache API 就能玩得轉(zhuǎn)。

Chrome (Application tab)、Opera、Firefox (Storage Inspector)、Safari (Storage tab) 都已經(jīng)支持 IndexedDB 調(diào)試。

值得一看的 IndexedDB 庫(kù)

localForage： 約 8 KB，Promise，對(duì)傳統(tǒng)瀏覽器支持良好

idb-keyval：小于 500 字節(jié)，Promise，提供 key-value 支持

idb：約 1.7 KB，Promise, 可迭代、索引

Dexie：約 16 KB, Promises，復(fù)雜查詢(xún)、輔助索引

PouchDB：約 45 KB ，支持定制版本，同步的（？）

Lovefield：相關(guān)的內(nèi)容

LokiJS：內(nèi)存中的

ydn-db：類(lèi)似 dexie，可以使用 WebSQL

值得一看的 Service Worker 庫(kù)

sw-toolbox：動(dòng)態(tài)或運(yùn)行時(shí)請(qǐng)求的離線緩存

sw-precache：靜態(tài)資源或應(yīng)用 shell 的離線預(yù)緩存

Webpack 用戶(hù)可以直接使用上面的，或者可以看看 offline-plugin

其他存儲(chǔ)機(jī)制

Web Storage (e.g LocalStorage) 是同步的，不支持 Web Worker，且有大小限制（只能存儲(chǔ)字符串）。盡管之前異步 LocalStorage 的想法已有人提出來(lái)，但目前的焦點(diǎn)還是 IndexedDB 2.0。我個(gè)人就愿意使用 IDB 加上一個(gè)工具庫(kù)。

Cookies 自有其用途，但卻是同步的，不支持 Web Worker，還有大小限制。在之前的項(xiàng)目中我使用了 js-cookie（gzip 后約 800 字節(jié)） 處理 cookie。目前已經(jīng)有人勾勒出 Async Cookies API 的支持了，有一個(gè)可用的 polyfill。

WebSQL 是異步的（基于回調(diào)函數(shù)），但它同樣不支持 Web Worker。Firefox 和 Edge 也不支持它。如果某一天它完全消失，我不會(huì)覺(jué)得驚訝的。

File System API 也是異步的（基于回調(diào)函數(shù)），在 Web Worker 和 window 中可以工作（雖然使用的是同步 API）。不幸的是，除 Chrome 之外它并無(wú)更多興趣，而且是運(yùn)行在沙盒中的（這意味著我們無(wú)法獲取原生的文件訪問(wèn)權(quán)）。

File API 正在由 File and Directory Entries API 和 File API 規(guī)范完善。Github 上有一個(gè) File API 庫(kù)；關(guān)于保存文件，作為權(quán)宜之計(jì)，我一直在使用 FileSaver.js。可寫(xiě)文件的提案最終可能會(huì)為我們提供本地文件無(wú)縫交互的標(biāo)準(zhǔn)解決方案。

離線存儲(chǔ)的現(xiàn)在與將來(lái)

如果對(duì)離線緩存感興趣，下面這些成果值得關(guān)注。我個(gè)人對(duì) IndexedDB 原生的 Promise 支持非常感興趣。

Durable Storage: 將存儲(chǔ)與瀏覽器的清除策略隔開(kāi)

Indexed Database API 2.0: 先進(jìn)的 key-value 數(shù)據(jù)管理

Promisified IndexedDB: 原生支持 Promise 的 IndexedDB 版本

IndexedDB Observers: 原生的 IndexedDB observer 支持

Async Cookies API: 異步的 cookie API

Quota Management API: 檢查應(yīng)用、域的存儲(chǔ)占用量

writable-files: 允許網(wǎng)站與本地文件之間進(jìn)一步的無(wú)縫交互

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?

離線存儲(chǔ)并沒(méi)有那么神奇，對(duì)潛在 API 的理解有助于你最大程度地利用現(xiàn)有的資源。無(wú)論你想直接使用這些 API，還是使用對(duì)它們進(jìn)行抽象庫(kù)文件，花一些時(shí)間來(lái)熟悉你的選擇。

希望本文對(duì)你的 PWA 離線體驗(yàn)有所幫助。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/87874.html

相關(guān)文章

  • 【譯】漸進(jìn)式 Web App 的離線存儲(chǔ)

    摘要：離線存儲(chǔ)數(shù)據(jù)的建議對(duì)尋址資源，使用這是的一部分。在到達(dá)儲(chǔ)量限制之前，兩種存儲(chǔ)機(jī)制都會(huì)一直進(jìn)行存儲(chǔ)。則沒(méi)有對(duì)存儲(chǔ)量做出限制，只是在之后會(huì)彈出提醒。是異步的基于回調(diào)函數(shù)，但它同樣不支持。也是異步的基于回調(diào)函數(shù)，在和中可以工作雖然使用的是同步。 拖拖拉拉好久，終于把個(gè)人博客整出來(lái)了。鳴謝 @pinggod。 厚著臉安利一下，地址是 http://www.wemlion.com/。歡迎訪問(wèn)，歡...

    Charlie_Jade 評(píng)論0 收藏0

  • [譯]介紹一下漸進(jìn)式 Web App(即時(shí)加載) - Part 2

    摘要：在上一篇，介紹一下漸進(jìn)式離線的文章中，我們討論了典型的應(yīng)該是什么樣子的并且同時(shí)也介紹了。暴露了一個(gè)異步，以避免阻塞的加載。但一些研究表明，在某些情況下，它是阻塞的。打開(kāi)并且添加如下代碼清除緩存并重新加載。 在上一篇，介紹一下漸進(jìn)式 Web App(離線) - Part 1的文章中，我們討論了典型的pwa應(yīng)該是什么樣子的并且同時(shí)也介紹了 server worker。到目前為止，我們已經(jīng)緩...

    doodlewind 評(píng)論0 收藏0

  • [譯]介紹一下漸進(jìn)式 Web App(即時(shí)加載) - Part 2

    摘要：在上一篇，介紹一下漸進(jìn)式離線的文章中，我們討論了典型的應(yīng)該是什么樣子的并且同時(shí)也介紹了。暴露了一個(gè)異步，以避免阻塞的加載。但一些研究表明，在某些情況下，它是阻塞的。打開(kāi)并且添加如下代碼清除緩存并重新加載。 在上一篇，介紹一下漸進(jìn)式 Web App(離線) - Part 1的文章中，我們討論了典型的pwa應(yīng)該是什么樣子的并且同時(shí)也介紹了 server worker。到目前為止，我們已經(jīng)緩...

    godlong_X 評(píng)論0 收藏0

  • [譯]介紹一下漸進(jìn)式 Web App(即時(shí)加載) - Part 2

    摘要：在上一篇，介紹一下漸進(jìn)式離線的文章中，我們討論了典型的應(yīng)該是什么樣子的并且同時(shí)也介紹了。暴露了一個(gè)異步，以避免阻塞的加載。但一些研究表明，在某些情況下，它是阻塞的。打開(kāi)并且添加如下代碼清除緩存并重新加載。 在上一篇，介紹一下漸進(jìn)式 Web App(離線) - Part 1的文章中，我們討論了典型的pwa應(yīng)該是什么樣子的并且同時(shí)也介紹了 server worker。到目前為止，我們已經(jīng)緩...

    YJNldm 評(píng)論0 收藏0

  • (譯 & 轉(zhuǎn)載) 2016 JavaScript 后起之秀

    摘要：在年成為最大贏家，贏得了實(shí)現(xiàn)的風(fēng)暴之戰(zhàn)。和他的競(jìng)爭(zhēng)者位列第二沒(méi)有前端開(kāi)發(fā)者可以忽視和它的生態(tài)系統(tǒng)。他的殺手級(jí)特性是探測(cè)功能，通過(guò)檢查任何用戶(hù)的功能，以直觀的方式讓開(kāi)發(fā)人員檢查所有端點(diǎn)。 2016 JavaScript 后起之秀 本文轉(zhuǎn)載自：眾成翻譯譯者：zxhycxq鏈接：http://www.zcfy.cc/article/2410原文：https://risingstars2016...

    darry 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<