В качестве игрушечного проекта я создал веб-приложение реагирования с помощью приложения create-реагировать. Затем я изменил "serviceworker.unregister ()" на "serviceworker.register ()" в индексе. js. Проект игрушек находится на Github здесь: https://github.com/verybadcat/CreateReactAppPwa. Затем я попробовал аудит Google на маяке с помощью двух разных способов запуска приложения.
Если я запустил его с «npm start», маяк был недоволен несколькими вещами. На данный момент меня интересуют три:
Current page does not respond with a 200 when offline
start_url does not respond with a 200 when offline
Does not register a service worker that controls page and start_url
Он также жаловался, что я не использовал https. Сейчас я хочу отложить это в сторону.
С другой стороны, если я запустил его с помощью "npm run build" и скопировал URL-адрес этой команды в мой браузер, Маяк пожаловался только на https.
Теперь о реальном проекте. Настоящий проект - приложение реакции netcoreapp3.0. На данный момент это по сути шаблонный проект Microsoft. У него есть индекс файла. js, который выглядит следующим образом:
import 'bootstrap/dist/css/bootstrap.css';
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
const rootElement = document.getElementById('root');
ReactDOM.render(
<BrowserRouter basename={baseUrl}>
<App />
</BrowserRouter>,
rootElement);
// Uncomment the line above that imports the registerServiceWorker function
// and the line below to register the generated service worker.
// By default create-react-app includes a service worker to improve the
// performance of the application by caching static assets. This service
// worker can interfere with the Identity UI, so it is
// disabled by default when Identity is being used.
//
registerServiceWorker();
Вызванный мной комментарий registerServiceWorker переходит к файлу из проекта по умолчанию, который выглядит так:
export default function register () {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
return;
}
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
// This is running on localhost. Lets check if a service worker still exists or not.
checkValidServiceWorker(swUrl);
} else {
// Is not local host. Just register service worker
registerValidSW(swUrl);
}
});
}
}```
Проблема в том, что в каждом случае, который я пробовал, поведение такое же, как и в «отладочной» версии игрушечного приложения. Это включает в себя как отладку, так и сборку проекта. Маяк, похоже, не видит обслуживающего работника. Я вижу две вещи, которые я могу предположить, может быть проблемой, но я действительно не знаю:
- Я делаю все на localhost. Файл реестра имеет проверку на локальный хост и другое поведение, если мы находимся на локальном хосте.
- Структура папок отличается от игрушечного приложения. В игрушечном приложении index. js и index. html находятся в одной папке. В реальном приложении index. js находится в папке "sr c", а index. html - в папке "publi c". Оба "sr c" и "publi c" являются потомками одного и того же родителя. НО не ясно, как это можно изменить, поскольку я помню, что у do c этот индекс. js должен иметь точное имя файла и путь, и если я пытаюсь импортировать что-то вне папки, я получаю сообщение об ошибке, в котором говорится, что импорт вне папки не поддерживается.