React - 漸進式網路應用程式(PWA)

注意

由於 create-react-app 已棄用，請到這裡來看如何使用vite來創建pwa專案。

前言

甚麼是 漸進式網路應用程式(PWA) ，簡單來說就是讓 Web 的介面變成像是原生 App 一樣，並且可以下載至主畫面，且 PWA 有兩個吸引我的地方:

1. 可離線操作: 由於 PWA 會將 Web 的資料 Cache 在 Local 端，在網路受限的情況下可以繼續做使用。
2. 仿原生 App: 就像上述提到的可以將 Web 變成類 App 的樣子，而且可以省去上架至 Google Play & Apple Store 的步驟和 開發者帳號的費用 實現時時更新不用重新下載。

今天的文章會介紹如何讓 React 專案快速變成 PWA。

步驟 1

新專案直接使用下面代碼即可

console
1npx create-react-app react-pwa --template cra-template-pwa-typescript

若是在原有的專案下新增 PWA，由於 React 目前沒有提供此機制，建議使用上面代碼創建專案後將

service-worker.ts 和 serviceWorkerRegistration.ts 兩個檔案複製到src/下。

步驟 2

接著開啟 src/index.tsx ，輸入以下代碼

tsx
1import * as serviceWorkerRegistration from "./serviceWorkerRegistration";
2
3serviceWorkerRegistration.register();

步驟 3

開啟 public/manifest.json 輸入

json
1{
2  "short_name": "React PWA",
3  "name": "React PWA",
4  "icons": [
5    {
6      "src": "favicon.ico",
7      "sizes": "64x64 32x32 24x24 16x16",
8      "type": "image/x-icon"
9    },
10    {
11      "src": "logo192.png",
12      "type": "image/png",
13      "sizes": "192x192"
14    },
15    {
16      "src": "logo512.png",
17      "type": "image/png",
18      "sizes": "512x512"
19    }
20  ],
21  "start_url": ".",
22  "display": "standalone",
23  "theme_color": "#000000",
24  "background_color": "#ffffff"
25}

步驟 4

最後打開 public/index.html 輸入

html
1<meta name="viewport" content="width=device-width, initial-scale=1" />
2<meta name="apple-mobile-web-app-capable" content="yes" />
3<meta
4  name="apple-mobile-web-app-status-bar-style"
5  content="black-translucent"
6/>

1. viewport: 告訴瀏覽器載入後寬度為設備寬且不進行縮放。
2. apple-mobile-web-app-capable: 在 ios 添加到主畫面時是否全屏運行，這很重要，若是沒有設定 ios 上會沒有 pwa 效果。
3. apple-mobile-web-app-status-bar-style: ios 上狀態欄的顏色，使用 black-translucent 可以讓狀態欄等於背景顏色。

使用vite創建pwa

此部分於 2024-10-29 更新

創建專案

前往這裡使用vite來新增專案。

下載套件

npm install -D vite-plugin-pwa workbox-window

設置vite

修改 /vite.config.ts

ts
1import { defineConfig } from "vite";
2import react from "@vitejs/plugin-react-swc";
3import { VitePWA } from "vite-plugin-pwa";
4
5export default defineConfig({
6  plugins: [react(), VitePWA()],
7});

新增manifest

跟原步驟一樣至 public 下新增 manifest.json

新增service-worker

新增一個檔案 src/service-worker.js

js
1import { precacheAndRoute } from "workbox-precaching";
2
3precacheAndRoute(self.__WB_MANIFEST);

註冊service worker

修改 app.tsx

tsx
1...
2
3useEffect(() => {
4    if ("serviceWorker" in navigator) {
5      window.addEventListener("load", () => {
6        navigator.serviceWorker
7          .register("/service-worker.js")
8          .then((registration) => {
9            console.log("SW registered: ", registration);
10          })
11          .catch((registrationError) => {
12            console.log("SW registration failed: ", registrationError);
13          });
14      });
15    }
16  }, []);
17
18...

最後

完成上述步驟後 React 專案就支援 PWA 了，這裡是我做一個小作品支援 PWA 有興趣的各位可以去看看，我們下次見~