[譯] 將網站轉換為漸進式 Web 應用程式之簡易教程

Bamboo發表於2019-02-18
網站Web

什麼是漸進式 Web 應用程式？

基本上來說，PWA 是一個網站，當用手機訪問時，網站可以儲存在手機，並且體驗就像一個原生應用程式一樣。它會有一個載入顯示，你可以刪除 Chrome 的介面，如果網路連線斷開，它仍然可以正常顯示內容。最重要的是它提高了使用者的參與度：在 Android 上的 Chrome 瀏覽器（不確定其他移動端瀏覽器上行為是否一致）如果檢測到網站是 PWA，它會提示使用者使用你選擇的圖示將其儲存在裝置的主螢幕上。

為何它如此重要？

PWA 對客戶端上的業務有好處。 中國的亞馬遜，阿里巴巴注意到由於瀏覽器“安裝”網站的提示，使用者的參與度提高了 48%（來源）。

這說明 PWA 完全值得為之努力奮鬥！

這極大可能要歸功於一種叫 Service Workers 的技術，它允許你在使用者系統中儲存靜態資源（html、css、javascript、json…），同時還有一個 manifest.json 檔案，指定網站如何像一個已安裝的應用一樣執行。

例子

這些都是我用本教程裡描述的相同的方法做的網站：

更多例子可以在這裡看到：pwa.rocks

設定

將網站變成 PWA 可能聽上去很複雜（Service workers？是什麼？），但其實並不難。

1. 要求：https 而不是 http

最困難的部分就是 PWA 只能在安全域的網站上執行（也就是在 https:// 後，而不是 http://）。

通常這些很難手動設定，但是如果你有自己的伺服器，你可以使用 letsencrypt 很簡單並自動化的完成這個步驟，並且完全免費。

2. 工具

2.1 lighthouse 測試

  • lighthouse 測試 是由 Google 建立並維護的自動化測試工具，它通過三個標準來測試網站：漸進性、效能、可訪問性。它會對每一項給出一個百分比分數，並提出優化建議，是個非常好用的學習工具。
  • Lighthouse test result for didiermotte.be
  • realfavicongenerator.net
  • UpUp.js 庫

2.2 realfavicongenerator.net

realfavicongenerator.net 注重你的 PWA 的視覺層。它會生成上面提到的 manifest.json 檔案，以及網站儲存到任意移動裝置上時所需要的各個版本的圖示檔案，以及新增到頁面 <head> 標籤的一段 html 程式碼。

建議：雖然 RFG 將你的資源放在子資料夾中，但這會使得啟用 PWA 更困難。所以為了簡單方便，將所有圖片等資源全部放在根目錄下即可。

2.3 通過 upup.js 使用 service workers

Service workers 是一項 JavaScript 技術，對我疲倦而急躁的大腦來說很難理解。但幸運的是，一位聰明的德國女孩告訴我 Tal Atler，她希望推進“離線優先”的理念，所以她建立了一個 JavaScript 庫能夠讓你的網站在掉線的時候依然輕鬆保持正常運作。謝謝你，Ola Gasidlo！

只需要快速瀏覽一下 UpUp 的教程就夠了。

2.4 Manifest 檔案

編輯 RFG 生成的 manifest.json 檔案，它至少應包含這些條目："scope"、"start_url"、"short_name"、"display"。以下是一個示例：

{
    "name": "My PWA Sample App",
    "short_name" : "PWA",
    "start_url": "index.html?utm_source=homescreen",
    "scope" : "./",
    "icons": [
        {
            "src": "./android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "./android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffee00",
    "background_color": "#ffee00",
    "display": "standalone"
}
複製程式碼

更多相關資訊見此處：developers.google.com 。

3. 步驟

  1. 使用 Realfavicongenerator 生成需要的 html 和圖片，將程式碼新增到你的網站程式碼中。
  2. 在你的 https 域上釋出網站。
  3. 做 lighthouse 測試。
  4. 分析結果。
  5. 解決每個問題。
  6. 回到第 3 步重複。
  7. 重複直到你在幾乎所有地方拿到接近 100 的分數，並且在“Progress”一項拿到 100。
  8. 在你的手機上測試看看。有一定機會，你會看到底部彈出視窗，邀請你將網站儲存都手機主螢幕上。
    [譯] 將網站轉換為漸進式 Web 應用程式之簡易教程

如果你想深入瞭解...

這是一個我用 Github Pages 做的 PWA 的例子，我在 BeCode 時給我的後輩現場編寫的，你可以用你的手機來訪問並測試，點選這裡，它的程式碼在這裡。

你可以在下面這本書中找到所有有關 PWA 的資訊：

Building Progressive Web Apps

[譯] 將網站轉換為漸進式 Web 應用程式之簡易教程

以上就是所有內容，PWA 快樂！

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

相關文章