跳到主要内容

如何将 React 专案转换为 PWA

· 5 分钟阅读
Eric Cheng

什么是 PWA​

全名：Progressive Web Apps，中文翻成「渐进式网路应用程式」，不过讲中文可能没有人听的懂

简单说这是 google 制定的一个标准，可能让你的 web 专案，看起来像是一个手机 App，它有两个核心

Manifest​

一些看起来很像 Android 的 AndroidManifest.xml 的设定，让 web 专案可以提供捷径，从手机或电脑直接读取，就是一些伪装成 App 的 UI

Service Worker​

设定一些像 cache、离线还能读取、监听一些 event 然后可以自行设定或手动写要做什么事情

这篇文章不打算详细的说明 PWA​

这里不打算详细的说明 PWA，毕竟有点复杂，不是一篇文章就能讲清楚的，这篇文章的目的是说明如何快速的在 React 专案导入 PWA

新专案​

Mainfest​

建置 React 专案应该主要的都是用 create-react-app 这个工具，不再多说明，我们先下个指令，建立一个新专案

npx create-react-app test-react-pwa

然后启动专案

cd test-react-pwa
npm run start

Chrome DevTools 测试​

按「F12」叫出 Chrome DevTools，点选「Application」⇒ 「Manifest」，已经有资料了

Chrome DevTools 测试 0

点选「Service Workers」，可以看出是空的没有设定

Chrome DevTools 测试 1

程式码​

看一下程式码，在 index.html 中有这一行，指向 manifest.json 这个档案

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

manifest.json 也已经先写好了预设值

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

甚至 index.html 还已经针对 IOS 写好设定

<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

浏览器测试​

使用「更多工具」⇒ 「建立捷径」

浏览器测试 0

可以建立捷径，只要勾选「在视窗中开启」，就可以达到 PWA 的 Manifesh 将 Web 专案伪装成 App 的功能了

浏览器测试 1

从以上测试，只要用 create-react-app 建立的新专案，其实已经符合 Manifest 了，不需要做任何的事情

Service Workers​

用 create-react-app 建的专案预设已经有 Manifest，但是没有 Service Workers，从官网可以看到有一个叫做 cra-template-pwa 的 template

https://create-react-app.dev/docs/making-a-progressive-web-app/

在建立专案的时候，将指令改为

npx create-react-app test-react-pwa --template cra-template-pwa

程式码​

在 index.js 有看到一段 code

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://cra.link/PWA
serviceWorkerRegistration.unregister();

将 unregister() 改成 register() 后，执行建置专案然后启动

npm run build
serve -s build

Chrome DevTools 测试​

Chrome DevTools 测试

这时候看 Service Workers 的状态就是 activated and is running

旧专案​

以上测试，如果是建新专案的话，只需要使用 cra-template-pwa 就可以简单的建置出有 PWA 的专案，但如果是已经存在的旧专案呢？

我们用 git 比对一下，使用 cra-template-pwa 和没有使用 cra-template-pwa 差别在哪里

差异点一：package.json​

多了 workbox 的 dependencies

	"workbox-background-sync": "^5.1.4",
    "workbox-broadcast-update": "^5.1.4",
    "workbox-cacheable-response": "^5.1.4",
    "workbox-core": "^5.1.4",
    "workbox-expiration": "^5.1.4",
    "workbox-google-analytics": "^5.1.4",
    "workbox-navigation-preload": "^5.1.4",
    "workbox-precaching": "^5.1.4",
    "workbox-range-requests": "^5.1.4",
    "workbox-routing": "^5.1.4",
    "workbox-strategies": "^5.1.4",
    "workbox-streams": "^5.1.4"

差异点二：多了两支档案​

多了两个档案：service-worker.js、serviceWorkerRegistration.js

cra-template-pwa 比对

差异点三：index.js​

index.js 多了两行

import * as serviceWorkerRegistration from './serviceWorkerRegistration';

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://cra.link/PWA
// serviceWorkerRegistration.unregister();
serviceWorkerRegistration.register();

手动复制两支新的档案，修改 package.json 和 index.js，重新执行 npm install，测试成功，旧的专案也有 PWA 了

版权声明

，转载请注明出处
本文键接: https://tech.havocfuture.tw/zh-hans/blog/converting-react-pwa



這是 google 廣告