API-интерфейс showNotification не работает над приложением create-реагировать - PullRequest
Новая
       121

API-интерфейс showNotification не работает над приложением create-реагировать

0 голосов
/ 22 апреля 2020

Я использую create-реагировать-приложение 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, чтобы избежать проблемы с локальным хостом:

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, и у меня нет доступа. Если кто-то имеет опыт работы с этим topi c и может указать мне, почему уведомление не работает.

My 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 apis можно найти в документации Google:

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

...