PWA新手教程：手把手教你製作自己的網頁「小程序」

編者按：在一般互聯網用戶看來，PWA就是網頁小程序（如下圖）。PWA即「漸進式網頁應用」（Progressive Web App）。我們可以說，PWA是介於「網頁」和「APP」之間的小程序，它基於頁面運作，可以被拖拽到手機主頁（如下圖），功能有點像APP，甚至能與APP「一較高下」，但又有別於APP。medium.com上的一位開發人員uve發表了名為「A beginner』s guide to making Progressive Web Apps」的PWA製作的新手教程，讓一般用戶也可以制定屬於自己的「小程序」，體驗一把「程序猿」的樂趣。

準備工作

PWA以網頁為載體，因此我們首先需要創建自己的網頁。 HTML5 UP和Start Bootstrap就是兩個很好的HTML模板資源站點。我們可以從中挑選並下載自己喜愛的主題包。下載完畢后，打開主題包，找到index.html文件點開，把裡面所有內容都換成自己想要的樣子。有經驗的朋友們也不妨嘗試運用CSS語言改變頁面中的各種顏色布局。

第一步：測試PWA

Lighthouse是Chrome瀏覽器上的拓展程序，能夠幫助我們測試PWA，並提供相關的改善方案。

在瀏覽器上安裝好Lighthouse以後，在瀏覽器右上方找到這個拓展程序，點擊 Generate report 按鈕（如下圖）以針對當前打開的頁面運行 Lighthouse 測試。

在完成審查后，Lighthouse 將打開一個新標籤，並在頁面的結果上顯示一個報告（如下圖）。

如果感覺信息量太大，看著麻煩，可以直接關注頁面頂部的四個主要指標（如下圖）。現在我們的PWA基本上還什麼都沒有，所以得個36分也很正常。

第二步：製作PWA的圖標

PWA可以拖拽到手機主屏幕，因此需要一個像APP那樣的圖標。這個圖標的比例必須是1:1，也就是正方形。

大家可以登陸the noun project（如下圖），這是一個強大的圖標製作網站，裡面幾乎囊括了「世間萬物」的圖標。

做好圖標以後，就要把圖標放到頁面上去了。大家可以採用Favicon & App Icon Generator。把新做的圖標上傳到這個網站，它就會生成幾個不同大小的圖標以及一些HTML代碼。然後，我們需要進行以下操作：

• 下載該網站提供的文件並解壓

• 把圖標放進WPA頁面當中的一個文件夾

• 把該網站提供的代碼添加到index.html文件的

• 確保圖標的路徑不出錯。如果把圖標放在了子文件夾，則需要在每一行都加上「icons/」（如下圖）

第三步：創建WPA的manifest文件

manifest文件包含了一個網站的名字、主要顏色以及圖標等數據。我們在Favicon & App Icon Generator上也可以生成manifest文件，但我們還要對manifest文件做一些額外的改動。

登陸Web App Manifest Generator，輸入我們創建的PWA的各種信息。如果有不確定的，可以不填，系統會自動選擇默認項。

複製頁面右手邊的JSON數據（如下圖）並將其粘貼到manifest.json文件當中的頂部。要注意別打亂格式，有時候會需要加個逗號或刪除一個括弧。最終完成的manifest文件是這樣的：僅供參考。

重啟Lighthouse，就可以知道manifest文件是否創建成功。

第四步：添加service worker

什麼是service worker呢？有了它，網站就可以在離線狀態下運行。它是一段運行在瀏覽器後台進程里的腳本，可獨立於當前頁面，提供了那些不需要與web頁面交互的功能在網頁背後悄悄執行的能力。在將來，基於它可以實現消息推送，靜默更新以及地理圍欄等服務，但是目前它首先要具備的功能是攔截和處理網路請求的功能，包括可編程的消息緩存管理能力。

service worker的作用主要有：1）網路代理，轉發請求，偽造響應；2）離線緩存；3）消息推送；4）後台消息傳遞

創建service worker的過程主要分三步：

（1）把以下代碼添加到index.html文件的當中：

（2）把sw-toolbox添加到我們的項目。我們只需要把這個文件添加到根目錄中。

（3）新建一個文件，將其命名為sw.js並把以下內容複製、粘貼到該文件內。

『use strict』;
importScripts(『sw-toolbox.js』); toolbox.precache([「index.html」,」style/style.css」]); toolbox.router.get(『/images/*』, toolbox.cacheFirst); toolbox.router.get(『/*』, toolbox.networkFirst, { networkTimeoutSeconds: 5});

這三步都完成以後，我們需要確認文件的路徑、編輯預緩存（precache ）並列出所有我們想要在離線狀態下儲存的文件。本文作者uve在他的頁面僅僅使用了index.html和style.css兩個文件，而我們也考可以另外添加別的文件或頁面。

然後，我們就可以再次打開Lighthouse，進行測試。以下是添加了service worker以後在本地主機（localhost）的測試結果：

除了保存頁面之外，如果想讓service worker實現別的功能（比如在沒有網路的情況下，顯示特定離線頁面），我們可以登錄pwabuilder，這裡有一些不同的service worker腳本（script）可供使用。

第五步：交給GitHub Pages託管

PWA創建成功后，是時候與全世界分享你的作品了！根據本文作者uve解釋，發布PWA頁面最簡單的方法就是登錄 GitHub Pages。

GitHub Pages是一個面向開源及私有軟體項目的託管平台，完全免費，因為只支持Git作為唯一的版本庫格式進行託管，故名 GitHub。

通過使用GitHub的GUI（圖形用戶界面），我們可以輕鬆地把我們的代碼交給GitHub管理，創建一個庫（repository），把我們的代碼放進去。

這一步完成以後，我們就要在Github上找到我們的PWA網站，進入設定頁面，向下滾動滑鼠，滑至頁面下方，選擇主分支（master branch），從而激活GitHub頁面。

這樣，你的PWA頁面就有了一個有效的（live）URL。

這時候再打開Lighthouse，就會發現測試結果大大不同了。

現在，你終於可以把自己的PWA頁面和朋友們分享啦！或者，你也可以下載這個PWA頁面，添加到你的手機主頁。

作者uve本人的作品實例

上圖就是作者的PWA頁面在手機上的效果。（查看作者的代碼，請戳這裡）

這是作者為了寫這個科普貼子而特地製作的PWA頁面，名為「Web Community Leads UK and IE」，是一個促進人們互相交流web技術的平台。

（關於該平台的詳情，可關注Daniel的貼子，也可以直接瀏覽該頁面。）

雖然這個和作者剛開始建立PWA的時候看起來一樣，但是在Samsung Internet（三星自帶的瀏覽器）上瀏覽它的時候，地址欄會變成主題色（淡紫）。而且，頁面上還會出現「+」的符號，點擊它，我們就可以把這個PWA頁面添加到手機主屏幕。點擊主屏幕當中的PWA圖標，就可以使它全屏顯示，並且我們還可以在離線狀態下使用。

編譯組出品。編輯：郝鵬程