使用React实践PWA入门

2 年 ago

清, 宇

2 minutes

首先

2023年3月27日，iOS16.4发布，iPhone的PWA现在可以接收推送通知。推送通知的解禁使得PWA越来越受关注。然而，具体来说，PWA是什么？它是如何在技术上实现的？因为这些方面并不透明，所以我打算边动手实践边加深理解。

环境准备

~/develop/HITOTSU$ npx create-react-app pwa-react-typescript --template cra-template-pwa-typescript

Creating a new React app in /Users/kouji/develop/HITOTSU/pwa-react-typescript.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-pwa-typescript...


added 1425 packages in 2m

235 packages are looking for funding
  run `npm fund` for details

Initialized a git repository.

Installing template dependencies using npm...

added 40 packages, and changed 2 packages in 12s

235 packages are looking for funding
  run `npm fund` for details

We detected TypeScript in your project (src/App.test.tsx) and created a tsconfig.json file for you.

Your tsconfig.json has been populated with default values.

Removing template package using npm...


removed 1 package, and audited 1465 packages in 1s

235 packages are looking for funding
  run `npm fund` for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Created git commit.

Success! Created pwa-react-typescript at /Users/kouji/develop/HITOTSU/pwa-react-typescript
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd pwa-react-typescript
  npm start

Happy hacking!

只需要一个选项，将以下内容以中文母语方式改写：
注册 ServiceWorker

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import * as serviceWorkerRegistration from './serviceWorkerRegistration';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// 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();　// ここでserviceWorkerを未登録にしている。

默认情况下，serviceWorker处于未注册状态。因此，让我们将其更改为注册处理！！

// serviceWorkerRegistration.unregister();　// これをコメントアウトして
serviceWorkerRegistration.register() //　これを追加する

→现在serviceWorker已经注册完成。为了确认是否成功注册，让我们记录日志。

manifest.json
清单.json

接下来我们将编辑manifest.json文件。manifest.json文件定义了在将应用程序安装到本地时的行为。暂时，我们将修改name和short_name。

{
//  "short_name": "React App",
    "short_name": "Sample PWA",
//  "name": "Create React App Sample",
    "name": "Sample PWA",
  "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"
}