reactjs - showNotification api 不适用于 create-react-app

Question

我正在使用 create-react-app v2。

我注册我serviceWorker的index.js：

serviceWorker.register();

在App.js我请求通知许可时：

const requestPermission = () => {
  Notification.requestPermission((status) => {
    console.log('Notification permission status', status)
  })
}

一旦获得用户的许可（这是有效的），我想显示一条虚拟消息（这无效）

function displayNotification() {
  if (Notification.permission == 'granted') {
    navigator.serviceWorker.getRegistration().then(function(reg) {
      if (reg) {
        console.log('navigator', navigator)
        console.log('navigator.serviceWorker', navigator.serviceWorker)
        console.log('reg', reg)
        reg.showNotification('Hello world!');
      } else {
        console.log('no reg', reg)
      }
    })
  }
}

我的应用程序/组件是独立于 CRA 的，我只是调用这两个函数：

import React from 'react';
import logo from './logo.svg';
import './App.css';

function displayNotification() {
  if (Notification.permission == 'granted') {
    navigator.serviceWorker.getRegistration().then(function(reg) {
      if (reg) {
        console.log('navigator', navigator)
        console.log('navigator.serviceWorker', navigator.serviceWorker)
        console.log('reg', reg)
        reg.showNotification('Hello world!');
      } else {
        console.log('no reg', reg)
      }
    })
  }
}

const requestPermission = () => {
  Notification.requestPermission((status) => {
    console.log('Notification permission status', status)
  })
}

function App() {
  requestPermission()
  displayNotification()

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

我在 heroku 上部署虚拟应用程序以避免 localhost 问题：

https://powerful-mesa-67529.herokuapp.com/

我可以看到我service-worker的被激活了。令我惊讶的是，当我检查注册对象时，我没有看到showNotification函数：

// navigator.serviceWorker.getRegistration().then(function(reg) 

这是 reg 对象：

ServiceWorkerRegistration {scope: "https://powerful-mesa-67529.herokuapp.com/", updateViaCache: "imports", active: ServiceWorker, installing: null, navigationPreload: NavigationPreloadManager, …}
scope: "https://powerful-mesa-67529.herokuapp.com/"
updateViaCache: "imports"
active: ServiceWorker {scriptURL: "https://powerful-mesa-67529.herokuapp.com/service-worker.js", state: "activated", onerror: null, onstatechange: null}
installing: null
navigationPreload: NavigationPreloadManager {}
sync: SyncManager {}
waiting: null
onupdatefound: ƒ ()
backgroundFetch: BackgroundFetchManager {}
paymentManager: PaymentManager {instruments: PaymentInstruments, userHint: ""}
periodicSync: PeriodicSyncManager {}
pushManager: PushManager {}
__proto__: ServiceWorkerRegistration

我不确定如何调试它，因为这是一个内置 API，我没有访问权限。如果有人对此主题有经验并且可以指出为什么通知不起作用。

我的packageg.json：

{
  "name": "web-pushy",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Web api 可以在 Google 文档中找到：

https://developers.google.com/web/ilt/pwa/introduction-to-push-notifications

标签： reactjsservice-workercreate-react-appprogressive-web-appsweb-push