Understand Progressive Web App and implement in Next.js

以前一直都有留意PWA，因為成日都會見到佢嘅蹤影。多數都係講PWA可以大大咁改善用戶體驗，為咗可以學多啲野，我就諗住係宜家呢個Blog到實作一下。

痛點

所有的科技創新永遠都離不開對於現狀的不滿，了解痛點可以讓我們更能體現新技術的優點。網頁在電腦興起的幾十年裡一直都是用戶最常接觸到的，即使現在我們都不會認為網頁或瀏覽器會被取代。但是隨著手機和手機軟件的普及，用戶使用瀏覽器上網的成本越來越高；不是我們的技術跟不上，而是手機軟件的優勢是瀏覽器比不了的。例如使用上的流暢感、輕易打開、離線使用等等。這樣讓手機軟件與網頁的距離越拉越遠。這樣很大程度降低了用戶在網頁版應用的黏著度，所以很多公司都會想盡辦法去開發手機軟件以此希望用戶能一直留在他們的生態圈上。

然而，並不是所有公司都有成本去另外開發手機軟件，尤其是手機系統和平台種類繁多，要持續維護和解決兼容問題必定會耗費很大的精力。去改善上述的問題，大佬們就一直嘗試讓手機網頁的體驗更接近原生軟件。就像響應式設計，動態渲染等的技術，

Progressive Web App

雖然上述技術很大程度改善了使用者體驗，但是沒有解決用戶需要每次打開瀏覽器去使用服務的痛點。再加上瀏覽器的運行效率也沒有本地應用高。為了解決這些問題，像是Google這些巨頭就帶頭開發相關的技術去希望改善這些痛點。不過與其是說改善問題，我覺得更像是利用網頁的優勢去帶給使用者更好的體驗。

PWA是指利用特定的技術去開發出結合了原生軟件和網頁雙方優點的應用，所以其實PWA是一個想要提升網頁應用體驗的理念。

優勢

網頁應用更容易安裝，因其體積小。
可以在離線時使用；也能在有網絡時更新內容。
確保了有網絡時，用戶可以運行最新的版本。
比起在瀏覽器上打網址，可以在手機主頁裡打開應用。

要素

可以安裝在設備上，像一般的設備應用。
可以在離線時使用。
可以在各版本的瀏覽器上使用。
在任何尺寸的熒幕設備都有響應式的設計。
用戶與服務器之間的連接是安全的。
可以被搜索引擎發現
可以簡單通過URL分享

實現PWA的流程

首先我們需要一個 manifest.json 的文件，其作用是提供網頁應用的描述和資訊。例如我們可以在裡面設定PWA應用在手機上的名稱、圖示、網頁連結、主題顏色等等。瀏覽器引擎就可以識別你的網頁是可以跑PWA，然後根據在 manifest.json 裡的設定去處理網頁應用。

再來就是 Service Worker 的部分，上面的 manifest.json 只是讓瀏覽器識別你網站兼容PWA；Service Worker 才是PWA的核心，它是完全獨立於瀏覽器的後台運行腳本。由於有獨立的線程，所以可以提供後台同步、離線使用和推送通知等的功能。

小知識：因為安全性考量，Service Worker 只能在 https 下跑。

Service Worker原理

為了實現離線使用，我們需要把資料緩存在本地，而 Service Worker 正是擔當了本地設備和網頁伺服器的中間人。Service Worker 把網絡請求攔截，然後會看本地是否有相關資料的緩存，沒有的話才會向伺服器請求，並儲存於緩存以便下次請求時使用。

在Next.js上實作

我們可以先從簡單的入手，對於 manifest.json 呢，在網上可以找到很多生產工具幫我們快速搭建模板，我使用了這個。這個網站會幫你整理出幾個尺寸的圖示，讓你直接把這些資源放進 Next.js 的 public 目錄就可以了。

看了 Service Worker 的純js做法後，感覺用 Next.js 的套件來做是相對簡單不少的。先下載套件 next-pwa ，然後直接使用放進 next.config.js 就可以了。

# Install package
npm i next-pwa

# next.config.js

const withPWA = require('next-pwa')({
  dest: 'public',
  disable: process.env.NODE_ENV === 'development',
  register: true,
  skipWaiting: true
})

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  ...
}

module.exports = withPWA(nextConfig)

當我們運行 npm run build 時，這個套件就會自動生成 Service Worker 的腳本，這個時候網站就是在跑PWA了。我們可以先在chrome裡看一下，在DevTool裡的Application頁面中可以看到 manifest.json 裡面的資訊。接着可以跑Lighthouse去看看是否符合Google對於PWA的標準。

這個時候就可以把網頁安裝到電腦或手機裡測試，只要在有網絡的情況下下載了緩存，關掉網絡後會發現網頁應用還能運行。這樣就完成了一個漸進式網頁應用了！