postMessage из навигатора в componentDidMount возвращает неопределенное - PullRequest
Новая
       14

postMessage из навигатора в componentDidMount возвращает неопределенное

0 голосов
/ 27 февраля 2020

Я пытаюсь реализовать некоторую предварительную выборку с помощью сервисного работника, которая будет запускаться, когда монтируется компонент React и у него есть данные, необходимые работнику для обращения к API и возврата / кэширования следующего набора запросов, которые может выполнить пользователь.

Например, пользователь находится на странице с набором продуктов, и я хочу go извлечь и предварительно выбрать данные для x количества страниц продукта.

Вот текущая ошибка:

Uncaught (в обещании) TypeError: Невозможно прочитать свойство 'postMessage' с неопределенным значением 

componentDidMount() {
        const { products } = this.props.data;
        let partNumbersArr = [];
        // pull out partNumbers for PDP prefetch, limit to 6 [not using .map bc cannot break and in prod upto arrays of 120]
        for (let i = 0; i < 6; i++) {
            partNumbersArr.push(products[i].partNumber);
        }
        if ('serviceWorker' in navigator && typeof window !== 'undefined') {
            const { serviceWorker } = navigator;

            serviceWorker.register('service-worker.js')
                .then((worker) => {
                    console.log('sw: registration', worker)
                    worker.controller.postMessage({partNumbersArr})
                })
            }
        }

В этом примере мой код достигает sw: registration console.log, но он возвращает рабочий экземпляр без сообщения postMessage.

worker instance console logged

Часть моего работника службы. js (Я могу опубликовать все это, но оно создано через конфигурацию webpack, так несколько файлов) 

// Prefetch
    self.addEventListener('message', function (event) {
        console.log('sw: sw message event', event);
   });

Мой подход в компоненте React неверен? Как я могу дополнительно отладить работника сервиса и понять, почему контроллер не возвращает ожидаемый метод. Любой совет помогает:)

1 Ответ

0 голосов
/ 27 февраля 2020

Конечно, напишите весь пост и сразу же выясните его - волхвы StackOverFlow c. 

if ('serviceWorker' in navigator && typeof window !== 'undefined') {
            const { serviceWorker } = navigator;

            serviceWorker.register('service-worker.js')
                .then((worker) => {
                    console.log('sw: registration', worker)
                    worker.active.postMessage({partNumbersArr})
                })
            }
        }

То, что изменилось, было worker.controller.postMessage на worker.active.postMessage

enter image description here

Теперь мы находимся в бизнесе.

OG Сообщение, в котором указана моя ошибка

Ошибка работника службы PostMessage

...