8-2 將網頁變成手機 Web App

本單元對應的專案分支為：mater。

單元核心#

這個單元的主要目標包含：

  • 開啟 React 中提供的 PWA 功能，讓手機可以下載 App 到桌面

在上一個單元中我們把「臺灣好天氣」發布到 Github Pages 上，現在大家都可以透過網頁的方式瀏覽你的作品。但如果可以把這頁網頁透過 App 的方式安裝到手機上的話有多好呢？

今天就讓我們來看看如何把「臺灣好天氣」變成一個可以下載到手機裝置上的 Web App 吧！完成後的畫面會像這樣，當使用者打開 App 時，會出現像是左側的等待畫面，右側則是進入頁面的實際畫面：

Imgur

把網頁做成手機可安裝的 App#

Progressive Web App (PWA) 中文稱作「漸進式網頁應用程式」，這是 Google 這幾年一直致力在推廣的網頁技術。第一次看到這個詞彙時就和我聽到 Application Programming Interface (API) 一樣一頭霧水。到底「漸進式」指的是什麼！？

簡單來說，PWA 在網頁的基礎上添加了許多功能，可以帶給使用者更好的瀏覽體驗，特別是在手機裝置上的感覺更佳明顯，讓使用者感覺上像是在開一個手機 App 而不是開啟網站。 PWA 的功能非常豐富，而漸進式的意思就是指你不用把這些功能一次全部到位，可以漸漸地一點一點加進去就可以。因為詳細的功能非常多，更多的說明可以參考 Google 和 MDN 的文件。

把即時天氣 App 包成 PWA#

當我們透過 Create React App 來建立 React 應用程式時，Create React App 已經幫我們把許多 PWA 需要使用的工具都已經放進去了，只是需要我們手動開啟它。

首先進到專案中的 ./src/index.js 這支檔案， 將 PWA 中的 Service Worker 功能打開，只需把原本的 serviceWorker.unregister() 改成 serviceWorker.register() 即可：

imgur

Service Worker 算是在 PWA 中蠻核心的功能，它可以把網頁應用程式暫存（cache）下來，讓使用者下次點開的時候速度有感提升，並且可以讓這個網頁就像 App 一樣不用透過 App Store 就安裝在手機上，有需要的時候甚至可以在離線狀況下存取這個網站（但是當然就不能更新資料）。

PWA 使用的圖示#

因為我們要讓使用者像是使用手機 App 一樣，安裝後顯示該 App 在手機上，所以會需要提供 App 的圖示。這些和 App 有關的圖示，在專案一開始建立時，就已經請讀者們下載並放在專案的 public 中，讀者只需確認這些圖示仍然存在：

imgur

定義 PWA 的說明檔 - manifest.json#

在這裡並不會用到太多其他的 PWA 功能，而是希望可以讓它看起來更像個原生的 App，並且可以下載到手機上使用。在專案建立好時 ./public 資料夾中已經有一支 manifest.json，這裡會定義和這個 PWA 有關的說明，讓瀏覽器知道下載下來時要使用什麼 Logo、顯示什麼顏色等等。

這支檔案的內容會長像這樣：

// ./public/manifest.json
{
"short_name": "臺灣好天氣",
"name": "臺灣好天氣-即時縣市天氣",
"icons": [
{
"src": "icon@x48.png",
"type": "image/png",
"sizes": "48 × 48"
},
{
"src": "icon@96.png",
"type": "image/png",
"sizes": "96x96"
}
// ...
],
"start_url": ".",
"display": "standalone",
"orientation": "portrait-primary",
"theme_color": "#1f2022",
"background_color": "#1f2022"
}
  • short_name 和 name 欄位都是用來定義此 App 的名稱
  • icons 欄位定義此 App 相關的圖示，因為裝置螢幕尺寸不同的緣故，一般會同時提供多個不同尺寸的圖示檔
  • start_url 使用者點開此 App 時要打開頁面的相對路徑
  • display 欄位使用 standalone 時，表示使用者打開此 App 時最上方不要出現網址列
  • orientation 用來說明這個 App 主要是直式或橫式
  • theme_color 和 background_color 則是定義 App 在載入時顯示的顏色

為了不佔用書中額外的篇幅，讀者可以本單元對應的 Github 分支中，找到 public/manifest.json 這支檔案：

Imgur

或透過下方連結複製完整的 manifest.json 檔後，貼上到 ./public/manifest.json 中：

https://github.com/pjchender/learn-react-from-hook-realtime-weather-app/blob/master/public/manifest.json

Imgur

最後因為有些 PWA 的設定在 iOS 裝置上需要額外撰寫，會需要把它們設定在 ./public/index.html 中，讀者們一樣可以參考在 master 分支中的 ./public/index.html，複製貼上到本機的 ./public/index.html 檔案中：

Imgur

發布應用程式#

當我們都做好設定後，一樣只需要在使用 npm 的指令就可以發布到 Github 上了：

# 在專案資料夾下
$ npm run deploy

在電腦上安裝#

發布完之後，當你用瀏覽器 Chrome 開啟「臺灣好天氣」，瀏覽器會自動偵測這個網站是否符合 PWA 的規範，若符合的話會自動跳出提示來詢問使用者是否要安裝：

imgur

安裝後就會出現在應用程式列表中：

imgur

打開來就像一個原生的 App，但其實是包著 App 外皮的網頁：

imgur

看起來超棒的！

在手機上安裝#

同樣的，讓我們來看看手機的畫面。當手機進入到這個頁面時，瀏覽器同樣會偵測到有符合 PWA 的規範，因此會跳出下載的按鈕或提示：

imgur

當我們把它安裝到手機後，它就像一般的手機 App 一樣，打開的時候會有一個漸變的啟動畫面。使用者若想移除這個「網頁」，同樣需要透過解除安裝的方式將它移除：

Imgur

實際上，PWA 中的應用不僅止於此，還提供了訊息推播、離線運作、畫面與資料快取（cache）、背景執行等等，在本單元 Github 分支（master）說明頁有附上參考連結，有興趣的讀者也可以再進一步了解。

換你了！試著把網頁包成 PWA 讓使用者安裝#

要把網頁變成 PWA 的方式非常簡單，只需要透過一些設定檔，讓它符合 PWA 的規範後，瀏覽器判斷後就會產生對應的安裝按鈕。現在你可以：

  • 在 ./src/index.js 把 serviceWorker.register(); 開啟
  • 修改 ./public/manifest.json 檔
  • 修改 ./public/index.html 檔
  • 使用 npm run deploy 重新發布到 Github Pages 上

大功告成了！給自己掌聲鼓勵吧！

Edit this page