如何讓你的 PWA 離線工作

已發表: 2020-01-10

您可能已經知道 Progressive Web App 及其改變行業的功能已經是什麼了，但是為了迭代，讓我們再次重複一下可能徹底改變 Web 體驗的驚人的、獨特的 PWA 功能，那就是它的離線功能.

 推薦閱讀：什麼是 PWA？

與只能通過連接查看內容的普通 Web 不同，Progressive Web App 的不同之處在於，一旦服務工作者（一種負責 PWA 的許多漸進式功能的內置機制）加載了必要的文件，離線查看將成為可能，用戶即使在離線時也可以與應用程序交互。

漸進式 Web 應用程序和離線可用性

要了解 PWA 的所有大驚小怪——尤其是它的離線功能，也許是時候親身體驗一下我們的主網站的離線查看了，這也是 PWA 的定義。

使用 PWA 離線查看內容

使用 Progressive Web Apps，整個離線體驗與您的典型連接體驗沒有什麼不同——這就是它的美妙之處。此功能對於需要不間斷瀏覽體驗的電子商務商店特別有用，即使在沒有連接的情況下也是如此。

注意：每個 PWA 站點都需要先對基本資源進行初始緩存，然後才能為用戶提供離線查看功能。

如何讓你的 PWA 離線工作

深入了解構建一個功能齊全、支持離線的漸進式 Web 應用程序的所有細節會很複雜，這就是為什麼今天我們首先從基礎開始。我們的目標是製作一個可以離線工作的準系統 Progressive Web App 。

先決條件

一個普通的網站/網絡應用程序。一個index.html ，一個index.js和一個style.css的任何東西都可以。

準備好所有先決條件後，就該讓準系統 PWA 離線工作了！

創建一個基本的服務工作者

首先，您需要創建sw.js ，其中包含功能性服務工作者的所有必要代碼。

 // sw.js
self.addEventListener("fetch", event => {
    console.log("你取到了" + event.url);
});

一旦你創建了你的 service worker，讓我們檢查你的瀏覽器是否支持它並在你的index.js中引用它：

 // index.js
if（導航器中的“serviceWorker”）{
    navigator.serviceWorker
        .register("sw.js")
        .then(() => console.log("已註冊服務人員！"));
}
// 頁面的其餘代碼...

上面的代碼應該足夠簡單。它會檢查您的瀏覽器是否支持服務工作者，如果支持，則返回一個“已註冊的服務工作者！ ”。通過註冊服務工作人員，您實際上是在告訴瀏覽器使用sw.js作為服務工作人員的指令，進而將新的服務工作人員與您的站點相關聯。

現在，回到sw.js ，添加以下代碼：

 // sw.js
self.addEventListener("fetch", event => {
    console.log("你取到了" + event.url);
});

該代碼添加了一個EventListener ，這對我們的進一步操作至關重要。事實上，包括 Chrome 在內的許多瀏覽器都不允許安裝您的 PWA，除非註冊了fetch listener。

上面代碼中的addEventListener有兩個參數：要監聽的事件和接受事件對象的回調。一旦此事件到位，您的服務工作者現在將開始偵聽fetch事件，其中包括對您網站的 HTML、CSS、JS、音頻、圖像的請求以及對 API/其他網站的任何其他請求。

SimiCart 服務人員 — *可以使用 Chrome DevTools 檢查 Service Worker*

緩存你的資源

為了讓您的 PWA 具備離線功能，服務人員需要為內容提供部分費用，但您還需要緩存頁面的資源。

要緩存頁面的資源，首先需要規劃緩存存儲的大小，因為它是有限制的。

緩存存儲限制

每個瀏覽器都有不同的處理緩存存儲的方式。然而，幾乎所有這些都對緩存存儲的大小有限制——這個限制通常是為什麼你看不到像亞馬遜這樣的大型肥胖網站使用服務工作者緩存他們的整個商店。

現在，這個限制會有所不同，因為它取決於最終用戶的設備；但通常它應該是用戶最大磁盤空間的 20% 左右。有關更多信息，您可以參考下面的圖表或 Google 的關於漸進式 Web 應用程序離線存儲的官方指南。

現在我們已經解決了這個緩存存儲限制，讓我們繼續實際緩存您的資源。

要緩存頁面的資源，我們需要一個包含我們要存儲的所有資產的全局數組：

 /* 
  這是我們要保存在緩存中的所有內容。
  為了使應用程序可以離線工作/可安裝，
  我們不僅要保存圖像，還要保存我們的 HTML、JS 和 CSS
  以及 - 我們想在離線時使用的任何東西。
*/
常量資產 = [
    "https://i.imgur.com/Kbkqr2n.png",
    "https://i.imgur.com/lgLaG0x.png",
    "https://i.imgur.com/0iL8mxP.png",
    "https://i.imgur.com/KDsdYeS.png",
    "https://i.imgur.com/mK50fqL.png",
    "https://i.imgur.com/KYGH2Qa.png",
    "/style.css",
    "/index.html",
    "/offline.html",
    “/”
];

這是存儲您要離線使用的所有內容的地方。在上面的示例中，前幾張圖像是 Imgur 的路徑，其中存儲了各種 SimiCart 的徽標。

通過這一步，我們離線使用的必要資源列表現已準備就緒。讓我們使用服務工作者緩存它們。

在 sw.js 的頂部添加這個頂部：

 // sw.js

讓 cache_name = "SimiCart"; // 用於標識我們的緩存的字符串

self.addEventListener("安裝", 事件 => {
    console.log("正在安裝...");
    事件.waitUntil(
        緩存
            .open（緩存名稱）
            .then（緩存 => {
                返回 cache.addAll(assets);
            })
            .catch(err => console.log(err))
    );
});

本質上，此代碼指示瀏覽器等待（使用waitUntil()調用）我們的緩存。

通過使用緩存 API，特別是addAll() ，我們的資產數組可以毫不費力地添加到緩存中，準備好由服務人員提供服務。好吧，再想一想，它還沒有準備好。我們仍然需要稍微修改我們的fetch事件處理程序。

這就是它現在的樣子：

 self.addEventListener("fetch", event => {
    if (event.request.url === "https://www.simicart.com/") {
        // 或者你的應用的 URL 是什麼
        event.respondWith(
            fetch(event.request).catch(err =>
                self.cache.open(cache_name).then(cache => cache.match("/offline.html"))
            )
        );
    } 別的 {
        event.respondWith(
            fetch(event.request).catch(err =>
                caches.match(event.request).then(response => response)
            )
        );
    }
});

現在在上面的代碼中應該很清楚，即使應用程序處於離線狀態，我們也會嘗試緩存資源。邏輯如下：

首先，如果獲取失敗（使用respondWith() ），應用程序會嘗試在線獲取資源並使用緩存的資源進行響應。
在respondWith()中，我們調用fetch(event.request)來嘗試從網絡中獲取資源，並且由於 fetch 是基於Promise的，如果無法連接到網絡， Promise將拒絕，進而觸發catch()聲明。
在catch()語句中是您想要調用緩存資源的地方。

就是這樣。您的 PWA 現在應該可以離線工作了！很容易，不是嗎？

結論

技術世界中的事情發展得非常快，您等待轉換為 PWA 或將重要功能（例如離線功能）集成到您的 PWA 中的時間越長，您和您的業務的機會成本就越高。

儘管如此，仍然有現成的解決方案提供商，例如 SimiCart，可以滿足您的所有需求。如果您碰巧是一名在線商家並正在尋找全方位完美的Magento PWA解決方案，那麼您來對地方了。我們是 Magento 電子商務網站的知名解決方案提供商，在 PWA 和原生應用方面擁有超過 5 年的專業知識。

使用 SimiCart自定義您的 PWA