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

時間 2019-11-17

原文原文鏈接

原文地址：The easy way to turn a website into a Progressive Web App

原文做者：Alexandre Plennevaux

譯文出自：掘金翻譯計劃

本文永久連接：github.com/xitu/gold-m…

譯者：bambooom

校對者：MechanicianW tvChan

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

基本上來講，PWA 是一個網站，當用手機訪問時，網站能夠保存在手機，而且體驗就像一個原生應用程序同樣。它會有一個加載顯示，你能夠刪除 Chrome 的界面，若是網絡鏈接斷開，它仍然能夠正常顯示內容。最重要的是它提升了用戶的參與度：在 Android 上的 Chrome 瀏覽器（不肯定其餘移動端瀏覽器上行爲是否一致）若是檢測到網站是 PWA，它會提示用戶使用你選擇的圖標將其保存在設備的主屏幕上。javascript

爲什麼它如此重要？

PWA 對客戶端上的業務有好處。 中國的亞馬遜，阿里巴巴注意到因爲瀏覽器「安裝」網站的提示，用戶的參與度提升了 48%（來源）。css

這說明 PWA 徹底值得爲之努力奮鬥！html

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

例子

這些都是我用本教程裏描述的相同的方法作的網站：java

plancomptablebelge.be （一個單頁網站）
didiermotte.be （一個基於 WordPress 的網站）

更多例子能夠在這裏看到：pwa.rocksandroid

設置

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

1. 要求：https 而不是 http

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

一般這些很難手動設置，可是若是你有本身的服務器，你可使用 letsencrypt 很簡單並自動化的完成這個步驟，而且徹底免費。github

2. 工具

2.1 lighthouse 測試

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

2.2 realfavicongenerator.net

realfavicongenerator.net 注重你的 PWA 的視覺層。它會生成上面提到的 manifest.json 文件，以及網站保存到任意移動設備上時所須要的各個版本的圖標文件，以及添加到頁面 <head> 標籤的一段 html 代碼。web

建議：雖然 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"
}
複製代碼