[譯]介紹一下漸進(jìn)式 Web App(離線) - Part 1

  if ("serviceWorker" in navigator) {
    navigator.serviceWorker
             .register("./sw.js")
             .then(function() { console.log("Service Worker Registered"); });
  }

// Install Service Worker
self.addEventListener("install", function(event) {

    console.log("Service Worker: Installing....");

    event.waitUntil(

        // Open the Cache
        caches.open(cacheName).then(function(cache) {
            console.log("Service Worker: Caching App Shell at the moment......");

            // Add Files to the Cache
            return cache.addAll(filesToCache);
        })
    );
});

filesToCache變量代表的所有文件要緩存數(shù)組
cachename指給緩存存儲(chǔ)的名稱(chēng)

// Fired when the Service Worker starts up
self.addEventListener("activate", function(event) {

    console.log("Service Worker: Activating....");

    event.waitUntil(
        caches.keys().then(function(cacheNames) {
            return Promise.all(cacheNames.map(function(key) {
                if( key !== cacheName) {
                    console.log("Service Worker: Removing Old Cache", key);
                    return caches.delete(key);
                }
            }));
        })
    );
    return self.clients.claim();
});

self.addEventListener("fetch", function(event) {

    console.log("Service Worker: Fetch", event.request.url);

    console.log("Url", event.request.url);

    event.respondWith(
        caches.match(event.request).then(function(response) {
            return response || fetch(event.request);
        })
    );
});

在寫(xiě)代碼的時(shí)候。我們需要注意一下Chrome, Opera、Firefox是支持service workers  的，但是Safari 和 Edge 還沒(méi)有兼容到service workers

index.html

  
  
  
  
  


    

      

        
          
        

        PWA - Home
      

      

        

        

          
Home
          
Latest
      

      


      


        

          
 Stay Up to Date with R-I-L 
          
        

        
        

      
    

latest.html

  
  
  
  
  


    

      

        
          
        
        PWA - Commits
      

      

        

        

          
Home
          
Latest
        
      

      


      

        
Latest Commits!



        

            


            
            


            
            


            
            


            
            


            
        
      

       

          
        

      
      
      
    



  
  
  
  
  

創(chuàng)建一個(gè) css 文件夾，并且在這個(gè)文件下載創(chuàng)建一個(gè)style.css文件(可以點(diǎn)擊這里查看)，創(chuàng)建一個(gè)js文件夾，并在這個(gè)文件下創(chuàng)建app.js, menu.js, offline.js, latest.js，toast.js。

js/offline.js

(function () {
  "use strict";

  var header = document.querySelector("header");
  var menuHeader = document.querySelector(".menu__header");

  //After DOM Loaded
  document.addEventListener("DOMContentLoaded", function(event) {
    //On initial load to check connectivity
    if (!navigator.onLine) {
      updateNetworkStatus();
    }

    window.addEventListener("online", updateNetworkStatus, false);
    window.addEventListener("offline", updateNetworkStatus, false);
  });

  //To update network status
  function updateNetworkStatus() {
    if (navigator.onLine) {
      header.classList.remove("app__offline");
      menuHeader.style.background = "#1E88E5"; 
    }
    else {
      toast("You are now offline..");
      header.classList.add("app__offline");
      menuHeader.style.background = "#9E9E9E";
    }
  }
})();

上面的代碼幫助用戶(hù)在 ui視覺(jué)上區(qū)分離線和在線狀態(tài)。

js/menu.js

(function () {
  "use strict";

  var menuIconElement = document.querySelector(".header__icon");
  var menuElement = document.querySelector(".menu");
  var menuOverlayElement = document.querySelector(".menu__overlay");

  //Menu click event
  menuIconElement.addEventListener("click", showMenu, false);
  menuOverlayElement.addEventListener("click", hideMenu, false);
  menuElement.addEventListener("transitionend", onTransitionEnd, false);

   //To show menu
  function showMenu() {
    menuElement.style.transform = "translateX(0)";
    menuElement.classList.add("menu--show");
    menuOverlayElement.classList.add("menu__overlay--show");
  }

  //To hide menu
  function hideMenu() {
    menuElement.style.transform = "translateX(-110%)";
    menuElement.classList.remove("menu--show");
    menuOverlayElement.classList.remove("menu__overlay--show");
    menuElement.addEventListener("transitionend", onTransitionEnd, false);
  }

  var touchStartPoint, touchMovePoint;

  /*Swipe from edge to open menu*/

  //`TouchStart` event to find where user start the touch
  document.body.addEventListener("touchstart", function(event) {
    touchStartPoint = event.changedTouches[0].pageX;
    touchMovePoint = touchStartPoint;
  }, false);

  //`TouchMove` event to determine user touch movement
  document.body.addEventListener("touchmove", function(event) {
    touchMovePoint = event.touches[0].pageX;
    if (touchStartPoint < 10 && touchMovePoint > 30) {          
      menuElement.style.transform = "translateX(0)";
    }
  }, false);

  function onTransitionEnd() {
    if (touchStartPoint < 10) {
      menuElement.style.transform = "translateX(0)";
      menuOverlayElement.classList.add("menu__overlay--show");
      menuElement.removeEventListener("transitionend", onTransitionEnd, false); 
    }
  }
})();

上面的代碼作用于菜單省略號(hào)按鈕的動(dòng)畫(huà)。

js/toast.js

(function (exports) {
  "use strict";

  var toastContainer = document.querySelector(".toast__container");
 
  //To show notification
  function toast(msg, options) {
    if (!msg) return;

    options = options || 3000;

    var toastMsg = document.createElement("div");
    
    toastMsg.className = "toast__msg";
    toastMsg.textContent = msg;

    toastContainer.appendChild(toastMsg);

    //Show toast for 3secs and hide it
    setTimeout(function () {
      toastMsg.classList.add("toast__msg--hide");
    }, options);

    //Remove the element after hiding
    toastMsg.addEventListener("transitionend", function (event) {
      event.target.parentNode.removeChild(event.target);
    });
  }

  exports.toast = toast; //Make this method available in global
})(typeof window === "undefined" ? module.exports : window);

上面的代碼是是一個(gè) tost 的提示信息框

latest.js 和 app.js 現(xiàn)在還是空的。

現(xiàn)在，使用本地服務(wù)器啟動(dòng)你的應(yīng)用程序，例如 http-server模塊可以幫組你啟動(dòng)本地服務(wù)，您的Web應(yīng)用程序應(yīng)該如下所示：

Side menu

Index Page

Latest Page

Application Shell

您的應(yīng)用殼也在上面突出顯示。現(xiàn)在尚未實(shí)現(xiàn)加載動(dòng)態(tài)內(nèi)容，下一步，我們需要從 Github"s API獲取最新的提交。

打開(kāi)js/latest.js增加下面的代碼

(function() {
  "use strict";

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

  var container = document.querySelector(".container");


  // 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) {

        var commitData = {
            "first": {
              message: response[0].commit.message,
              author: response[0].commit.author.name,
              time: response[0].commit.author.date,
              link: response[0].html_url
            },
            "second": {
              message: response[1].commit.message,
              author: response[1].commit.author.name,
              time: response[1].commit.author.date,
              link: response[1].html_url
            },
            "third": {
              message: response[2].commit.message,
              author: response[2].commit.author.name,
              time: response[2].commit.author.date,
              link: response[2].html_url
            },
            "fourth": {
              message: response[3].commit.message,
              author: response[3].commit.author.name,
              time: response[3].commit.author.date,
              link: response[3].html_url
            },
            "fifth": {
              message: response[4].commit.message,
              author: response[4].commit.author.name,
              time: response[4].commit.author.date,
              link: response[4].html_url
            }
        };

        container.querySelector(".first").innerHTML = 
        "
 Message: " + response[0].commit.message + "
" +
        "
 Author: " + response[0].commit.author.name + "
" +
        "
 Time committed: " + (new Date(response[0].commit.author.date)).toUTCString() +  "
" +
        "
" + "Click me to see more!"  + "
";

        container.querySelector(".second").innerHTML = 
        "
 Message: " + response[1].commit.message + "
" +
        "
 Author: " + response[1].commit.author.name + "
" +
        "
 Time committed: " + (new Date(response[1].commit.author.date)).toUTCString()  +  "
" +
        "
" + "Click me to see more!"  + "
";

        container.querySelector(".third").innerHTML = 
        "
 Message: " + response[2].commit.message + "
" +
        "
 Author: " + response[2].commit.author.name + "
" +
        "
 Time committed: " + (new Date(response[2].commit.author.date)).toUTCString()  +  "
" +
        "
" + "Click me to see more!"  + "
";

        container.querySelector(".fourth").innerHTML = 
        "
 Message: " + response[3].commit.message + "
" +
        "
 Author: " + response[3].commit.author.name + "
" +
        "
 Time committed: " + (new Date(response[3].commit.author.date)).toUTCString()  +  "
" +
        "
" + "Click me to see more!"  + "
";

        container.querySelector(".fifth").innerHTML = 
        "
 Message: " + response[4].commit.message + "
" +
        "
 Author: " + response[4].commit.author.name + "
" +
        "
 Time committed: " + (new Date(response[4].commit.author.date)).toUTCString() +  "
" +
        "
" + "Click me to see more!"  + "
";

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

  fetchCommits();
})();

此外在你的latest.html引入latest.js

增加 loading 在你的latest.html

....

      

在latest.js你可以觀察到，我們從GitHub的API獲取到數(shù)據(jù)并將其附加到DOM中來(lái)，現(xiàn)在獲取后的頁(yè)面長(zhǎng)這樣子了。

Latest.html 頁(yè)面

為了確保我們的app快速加載和離線工作,我們需要緩存app shell 通過(guò) service worker

首先，在根目錄中創(chuàng)建一個(gè) service worker文件。它的名字sw.js

第二，打開(kāi)app.js文件和添加這段代碼來(lái)實(shí)現(xiàn)service worker注冊(cè)使用

app.js

  if ("serviceWorker" in navigator) {
     navigator.serviceWorker
             .register("./sw.js")
             .then(function() { console.log("Service Worker Registered"); });
  }

打開(kāi)sw.js文件并添加這段代碼

sw.js

var cacheName = "pwa-commits-v3";

var filesToCache = [
    "./",
    "./css/style.css",
    "./images/books.png",
    "./images/Home.svg",
    "./images/ic_refresh_white_24px.svg",
    "./images/profile.png",
    "./images/push-off.png",
    "./images/push-on.png",
    "./js/app.js",
    "./js/menu.js",
    "./js/offline.js",
    "./js/toast.js"
];

// Install Service Worker
self.addEventListener("install", function(event) {

    console.log("Service Worker: Installing....");

    event.waitUntil(

        // Open the Cache
        caches.open(cacheName).then(function(cache) {
            console.log("Service Worker: Caching App Shell at the moment......");

            // Add Files to the Cache
            return cache.addAll(filesToCache);
        })
    );
});


// Fired when the Service Worker starts up
self.addEventListener("activate", function(event) {

    console.log("Service Worker: Activating....");

    event.waitUntil(
        caches.keys().then(function(cacheNames) {
            return Promise.all(cacheNames.map(function(key) {
                if( key !== cacheName) {
                    console.log("Service Worker: Removing Old Cache", key);
                    return caches.delete(key);
                }
            }));
        })
    );
    return self.clients.claim();
});


self.addEventListener("fetch", function(event) {

    console.log("Service Worker: Fetch", event.request.url);

    console.log("Url", event.request.url);

    event.respondWith(
        caches.match(event.request).then(function(response) {
            return response || fetch(event.request);
        })
    );
});

就像我在這篇文章的前面部分所解釋的，我們所有的靜態(tài)資源都放到filesToCache數(shù)組里面，當(dāng)service worker被安裝時(shí)，它在瀏覽器中打開(kāi)緩存并且數(shù)組里面所有文件都被緩存到pwa-commits-v3這個(gè)緩存里面。一旦 service worker已經(jīng)安裝，install事件就會(huì)觸發(fā)。此階段確保您的service worker在任何應(yīng)用殼文件更改時(shí)更新其緩存。fetch事件階段應(yīng)用殼從緩存中獲取數(shù)據(jù)。
注意：為了更容易和更好的方式預(yù)先高速緩存你的資源。檢查谷歌瀏覽器的 sw-toolbox 和 sw-precachelibraries

現(xiàn)在重載你的 web app 并且打開(kāi) DevTools，到Application 選項(xiàng)去查看Service Worker面板，確保Update on reload這個(gè)選項(xiàng)是勾選的。如下圖

現(xiàn)在，重新加載Web頁(yè)面并檢查它。有離線瀏覽么？

Index Page Offline

Yaaay!!! 首頁(yè)終于離線也是可以瀏覽了，那么latest頁(yè)面是不是顯示最新的提交呢？

Latest Page Offline

Yaaay!!!latest已是離線服務(wù)。但是等一下！數(shù)據(jù)在哪里？提交在哪里？哎呀!我們的 app試圖請(qǐng)求Github API當(dāng)用戶(hù)與Internet斷開(kāi)連接時(shí)，它失敗了。

Data Fetch Failure, Chrome DevTools

我們?cè)撛趺崔k？處理這個(gè)場(chǎng)景有不同的方法。其中一個(gè)選項(xiàng)是告訴service worker提供離線頁(yè)面。另一種選擇是在第一次加載時(shí)緩存提交數(shù)據(jù)，在后續(xù)請(qǐng)求中加載本地保存的數(shù)據(jù)，然后在用戶(hù)連接時(shí)獲取最新的數(shù)據(jù)。提交的數(shù)據(jù)可以存儲(chǔ)在IndexedDB或local Storage。

好了，我們現(xiàn)在就此結(jié)束！

附上：

原文地址: https://auth0.com/blog/introduction-to-progressive-apps-part-one/

項(xiàng)目代碼地址：https://github.com/unicodeveloper/pwa-commits

博客文章：https://blog.naice.me/articles/5a31d20a78c3ad318b837f59

如果有那個(gè)地方翻譯出錯(cuò)或者失誤，請(qǐng)各位大神不吝賜教，小弟感激不盡

期待下一篇: 介紹一下漸進(jìn)式 Web App(即時(shí)加載) - Part 2