[譯]介紹一下漸進式 Web App(即時載入) – Part 2

naice發表於2019-02-25

在上一篇，介紹一下漸進式 Web App(離線) – Part 1的文章中，我們討論了典型的pwa應該是什麼樣子的並且同時也介紹了 server worker。到目前為止，我們已經快取了應用殼。在 index.html和latet.html頁面中，我們的應用已經實現了離線載入快取資料。在重複訪問時，它們的載入速度更快。在本教程第一部分的結尾，我們能夠離線載入latest.html，但在使用者離線時無法顯示獲得動態資料。這次學習我們將：

當使用者離線時候顯示在latest頁面快取 app的資料
利用localStorage去儲存 app 的資料
當使用者連線到Internet時，替換 app 舊的資料並獲取更新新的資料。

離線儲存

在構建PWA時，需要考慮各種儲存機制：

IndexedDB：這是一個事務型資料庫系統，用於客戶端儲存資料。IndexedDB允許您儲存和檢索用鍵索引的物件，以便對儲存在其中的資料進行高效能搜尋。IndexedDB暴露了一個非同步API，以避免阻塞DOM的載入。但一些研究表明，在某些情況下，它是阻塞的。使用IndexedDB時我推薦使用一些第三方庫，因為在JavaScript中操縱它可能非常冗長複雜。例如：localForage、idb 和 idb-keyval這些第三方模組都是很好滴。

indexDB在瀏覽器的相容性

Cache API：這是儲存URL地址資源的最佳選擇。和Service worker配合是非常好滴。
PouchDB：是CouchDB的開源JavaScript資料庫。它使應用程式能夠在本地儲存資料，離線，然後同步與CouchDB和相容的伺服器應用程式時重新上線，保持使用者資料同步，不管他們下一次在哪裡登入。PouchDB支援所有現代瀏覽器，使用IndexedDB引擎失敗的話就降級到WebSQL，對Firefox 29+ (包括 Firefox OS and Firefox for Android), Chrome 30+, Safari 5+, Internet Explorer 10+, Opera 21+, Android 4.0+, iOS 7.1+ 和 Windows Phone 8+等等都是相容的。
Web Storage 例如 localStorage：它是同步的，是阻止DOM載入的，在瀏覽器中最多使用5MB，它有簡單的 api去操作儲存鍵值對資料。

Web Storage 的瀏覽器相容表

WebSQL：這是瀏覽器的關係型資料庫解決方案。它是已經被廢棄，因此，瀏覽器將來可能不支援它。

根據PouchDB的維護者 Nolan Lawson說，在使用資料庫時，最好問自己這些問題：

這個資料庫是在記憶體中還是在磁碟上？(PouchDB, IndexedDB)?
什麼需要儲存在磁碟上？應用程式關閉或崩潰時應該儲存哪些資料？
需要什麼索引才能執行快速查詢？我可以使用記憶體索引而不是磁碟的嗎？
我應該怎樣構造我的記憶體資料相對於我的資料庫資料？我在這兩者之間的對映策略是什麼？
我的應用程式的查詢需求是什麼？展現檢視真的需要獲取完整的資料，還是隻需要獲取它所需要的一小部分呢？我可以延遲載入任何東西嗎？

您可以檢視考慮如何選擇資料庫，以便更全面地瞭解主題內容。

廢話少扯，讓我們實現即時載入

在我們的 web app 中，我們將用localStorage，由於我在本教程前面強調的侷限性，我建議你不要在生產環境中使用localStorage。我們正在構建的應用程式非常簡單，所以是使用了localStorage。

開啟你的js/latest.js檔案，我們更新fetchCommits方法去儲存從Github API拉取的資料，儲存在localStorage。程式碼如下：


 function fetchCommits() {
    var url = `https://api.github.com/repos/unicodeveloper/resources-i-like/commits`;

    fetch(url)
    .then(function(fetchResponse){ 
      return fetchResponse.json();
    })
    .then(function(response) {
        console.log("Response from Github", response);

        var commitData = {};

        for (var i = 0; i < posData.length; i++) {
          commitData[posData[i]] = {
            message: response[i].commit.message,
            author: response[i].commit.author.name,
            time: response[i].commit.author.date,
            link: response[i].html_url
          };
        }

        localStorage.setItem(`commitData`, JSON.stringify(commitData));

        for (var i = 0; i < commitContainer.length; i++) {

          container.querySelector("" + commitContainer[i]).innerHTML = 
          "<h4> Message: " + response[i].commit.message + "</h4>" +
          "<h4> Author: " + response[i].commit.author.name + "</h4>" +
          "<h4> Time committed: " + (new Date(response[i].commit.author.date)).toUTCString() +  "</h4>" +
          "<h4>" + "<a href=`" + response[i].html_url + "`>Click me to see more!</a>"  + "</h4>";

        }

        app.spinner.setAttribute(`hidden`, true); // hide spinner
    })
    .catch(function (error) {
      console.error(error);
    });
};
複製程式碼

上面有這段程式碼，在第一頁載入的時候，這些提交的資料就儲存到localStorage了，現在我們寫另外一個函式去渲染這些localStorage的資料。程式碼如下：


  // Get the commits Data from the Web Storage
  function fetchCommitsFromLocalStorage(data) {
    var localData = JSON.parse(data);

    app.spinner.setAttribute(`hidden`, true); //hide spinner

    for (var i = 0; i < commitContainer.length; i++) {

      container.querySelector("" + commitContainer[i]).innerHTML = 
      "<h4> Message: " + localData[posData[i]].message + "</h4>" +
      "<h4> Author: " + localData[posData[i]].author + "</h4>" +
      "<h4> Time committed: " + (new Date(localData[posData[i]].time)).toUTCString() +  "</h4>" +
      "<h4>" + "<a href=`" + localData[posData[i]].link + "`>Click me to see more!</a>"  + "</h4>";

    }
  };
複製程式碼

這段程式碼將資料從本地儲存並將其渲染 dom 節點。

現在我們需要知道，什麼條件去呼叫fetchCommits函式和fetchCommitsFromLocalStorage函式。

js/latest.js程式碼如下


(function() {
  `use strict`;

  var app = {
    spinner: document.querySelector(`.loader`)
  };

  var container = document.querySelector(`.container`);
  var commitContainer = [`.first`, `.second`, `.third`, `.fourth`, `.fifth`];
  var posData = [`first`, `second`, `third`, `fourth`, `fifth`];

  // Check that localStorage is both supported and available
  function storageAvailable(type) {
    try {
      var storage = window[type],
        x = `__storage_test__`;
      storage.setItem(x, x);
      storage.removeItem(x);
      return true;
    }
    catch(e) {
      return false;
    }
  }

  // Get Commit Data from Github API
  function fetchCommits() {
    var url = `https://api.github.com/repos/unicodeveloper/resources-i-like/commits`;

    fetch(url)
    .then(function(fetchResponse){ 
      return fetchResponse.json();
    })
    .then(function(response) {
        console.log("Response from Github", response);

        var commitData = {};

        for (var i = 0; i < posData.length; i++) {
          commitData[posData[i]] = {
            message: response[i].commit.message,
            author: response[i].commit.author.name,
            time: response[i].commit.author.date,
            link: response[i].html_url
          };
        }

        localStorage.setItem(`commitData`, JSON.stringify(commitData));

        for (var i = 0; i < commitContainer.length; i++) {

          container.querySelector("" + commitContainer[i]).innerHTML = 
          "<h4> Message: " + response[i].commit.message + "</h4>" +
          "<h4> Author: " + response[i].commit.author.name + "</h4>" +
          "<h4> Time committed: " + (new Date(response[i].commit.author.date)).toUTCString() +  "</h4>" +
          "<h4>" + "<a href=`" + response[i].html_url + "`>Click me to see more!</a>"  + "</h4>";

        }

        app.spinner.setAttribute(`hidden`, true); // hide spinner
      })
      .catch(function (error) {
        console.error(error);
      });
  };

  // Get the commits Data from the Web Storage
  function fetchCommitsFromLocalStorage(data) {
    var localData = JSON.parse(data);

    app.spinner.setAttribute(`hidden`, true); //hide spinner

    for (var i = 0; i < commitContainer.length; i++) {

      container.querySelector("" + commitContainer[i]).innerHTML = 
      "<h4> Message: " + localData[posData[i]].message + "</h4>" +
      "<h4> Author: " + localData[posData[i]].author + "</h4>" +
      "<h4> Time committed: " + (new Date(localData[posData[i]].time)).toUTCString() +  "</h4>" +
      "<h4>" + "<a href=`" + localData[posData[i]].link + "`>Click me to see more!</a>"  + "</h4>";

    }
  };

  if (storageAvailable(`localStorage`)) {
    if (localStorage.getItem(`commitData`) === null) {
      /* The user is using the app for the first time, or the user has not
       * saved any commit data, so show the user some fake data.
       */
      fetchCommits();
      console.log("Fetch from API");
    } else {
      fetchCommitsFromLocalStorage(localStorage.getItem(`commitData`));
      console.log("Fetch from Local Storage");
    }   
  }
  else {
    toast("We can`t cache your app data yet..");
  }
})();

複製程式碼

在上面的程式碼片斷，我們正在檢查瀏覽器是否支援本地儲存，如果它支援，我們繼續檢查是否已經快取了提交資料。如果沒有被快取，我們將請求資料，顯示到頁面上並且快取請求的資料。

現在，從新重新整理一遍瀏覽器，確保你做了一個清晰的快取，強制重新整理，否則我們不會看到我們的程式碼更改的結果。

現在，離線並載入最新頁面。將發生了什麼事呢？

Yaaay！！！它載入資料沒有任何問題。

檢視DevTools，你間看到資料已經被快取到localStorage

當使用者離線時，看看它載入的速度！！！

還有一件事

現在，我們可以立即從本地儲存獲取資料。但是我們如何獲得最新的資料？當使用者線上時，我們需要一種仍然獲得新資料的方法。

so easy，讓我們新增一個重新整理按鈕，觸發一個請求到GitHub獲得的最新資料。

開啟latest.html檔案，並且新增一個重新整理按鈕到<header>標籤

<button id="butRefresh" class="headerButton" aria-label="Refresh"></button>
複製程式碼

新增的按鈕後<header>標籤應該是這樣的：


<header>
  <span class="header__icon">
    <svg class="menu__icon no--select" width="24px" height="24px" viewBox="0 0 48 48" fill="#fff">
      <path d="M6 36h36v-4H6v4zm0-10h36v-4H6v4zm0-14v4h36v-4H6z"></path>
    </svg>
  </span>
  <span class="header__title no--select">PWA - Commits</span>
  <button id="butRefresh" class="headerButton" aria-label="Refresh"></button>
</header> 
複製程式碼

最後，讓我們在按鈕上附加一個單擊事件並新增功能。開啟js/latest.js並且新增如下程式碼：

document.getElementById(`butRefresh`).addEventListener(`click`, function() {
    // Get fresh, updated data from GitHub whenever you are clicked
    toast(`Fetching latest data...`);
    fetchCommits();
    console.log("Getting fresh data!!!");
});
複製程式碼

清除快取並重新載入。現在，你的latest.html頁面看起來應該像這樣：

每當使用者需要最新資料時，他們只需單擊重新整理按鈕即可。

附加：

點選檢視下面連結

上一篇: [譯]介紹一下漸進式 Web App(離線) – Part 1

原文地址

專案程式碼地址

個人部落格地址

如果有那個地方翻譯出錯或者失誤，請各位大神不吝賜教，小弟感激不盡

期待下一篇: 介紹一下漸進式 Web App(訊息推送) – Part 3

[譯]介紹一下漸進式 Web App(訊息推送) – Part 3
2019-03-01
WebAPP
漸進式web應用開發---service worker 原理及介紹(一)
2019-07-06
Web
「譯」MotionLayout介紹 (part III)
2019-03-04
「譯」MotionLayout 介紹 (part II)
2019-03-04
【譯】更多關於漸進式圖片載入的實現
2018-07-01
使用 React.js 的漸進式 Web 應用程式：第 2 部分 – 頁面載入效能
2019-02-27
ReactJSWeb
Redis 漸進叢集介紹
2022-07-12
Redis
漸進式Web應用（PWA）入門教程（下）
2018-05-25
Web
[譯] part 20: golang 併發介紹
2019-04-01
Golang
[譯]LINQ TO SQL 介紹(定義資料模型類) – Part.2
2021-09-09
SQL模型
[譯] React Hook 介紹 — React 系列教程 Part 1
2018-11-08
ReactHook
[譯] GitHub Actions 介紹，瞭解一下？
2018-11-06
Github
圖片漸進式載入最佳化實踐指南
2024-11-21
SAP Spartacus - Progressive Web Applications，漸進式 Web 應用程式
2021-08-23
WebAPP
rate-limit 一款 java 開源漸進式分散式限流框架使用介紹
2022-12-17
MITJava分散式框架
【譯】2分鐘介紹Rx
2018-09-12
漸進式Web應用程式的深入概述
2018-09-14
Web
「譯」 MotionLayout 介紹 (Part IV) 深入理解關鍵幀
2018-12-25
使用SQIP工具和交叉點觀察器進行漸進式影像載入
2019-02-12
使用SQIP工具和交叉點觀察器進行漸進式影象載入
2018-03-30
[譯] 將網站轉換為漸進式 Web 應用程式之簡易教程
2019-02-18
網站Web
漸進式Web應用程式（PWA）的深入概述
2019-02-16
Web
漸進式web應用開發---promise式資料庫(五)
2019-07-22
WebPromise資料庫
Laravel Eloquent中的懶載入VS即時載入
2019-02-16
Laravel
介紹一下opentcs
2024-05-04
介紹一下catoiOS
2024-06-17
iOS
漸進式圖片載入：提升前端使用者體驗的藝術
2024-11-04
前端
vuex 漸進式教程
2018-11-24
Vue
Flink 類載入機制介紹
2023-03-13
[譯] part 14: golang 函式
2019-04-27
Golang函式
[譯] part 19: golang 介面 2
2019-04-09
Golang
Prepack 介紹（譯）
2018-12-25
前端測試：Part1 （介紹）
2019-02-27
前端
在30天內學習漸進式Web應用開發
2022-06-05
Web
循序漸進 Redis 分散式鎖（以及何時不用它）
2022-06-20
Redis分散式
vuex 漸進式教程（一）
2018-11-24
Vue
[譯]寫給初學者的Tensorflow介紹[2]
2019-03-27
【Ionic2系列】一、入門介紹
2021-09-09

[譯]介紹一下漸進式 Web App(即時載入) – Part 2

離線儲存

廢話少扯，讓我們實現即時載入

還有一件事

相關文章