Так что же такое PWA?
Когда я впервые услышал о PWA и решил попробовать создать его, я безрезультатно искал в Интернете ответы.
Многие статьи содержат бессвязные подробности, описывающие, что такое PWA. Но, в конечном счете, я искренне верю, что для этого просто нет однозначного определения. Не зная, что это такое, как вы должны его построить?
Что ж, к счастью, это все еще можно сделать, не зная точного определения. PWA означает прогрессивное веб-приложение, и, по сути, существуют определенные требования, которым должно соответствовать веб-приложение, чтобы оно могло считаться PWA.
Эти требования могут измениться в будущем, но пока давайте рассмотрим некоторые из этих требований, а затем перейдем к их созданию:
- Независимая платформа
- Отзывчивый
- Работает в автономном режиме (выполняется с помощью сервис-воркеров)
- Безопаснее (поскольку для этого требуется, чтобы приложение обслуживалось по HTTPS)
- Надежно и быстрее
- Устанавливаемый
- Возможность связывания
Реализация
Я быстро расскажу, как создать PWA с помощью приложения по умолчанию, созданного с помощью команды create-react-app
.
Поэтому, если вы новичок в React, вам нужно будет выяснить, как продолжить самостоятельное создание функциональности своего приложения после этого краткого руководства, поскольку я не буду рассказывать о React. Однако, если у вас есть опыт создания приложения React раньше с помощью команды create-react-app
, это будет проще простого.
Установка узла
Во-первых, у вас должен быть установлен Node. Идите и установите, если у вас его еще нет.
Создать новое приложение React
Создать новое приложение React так же просто, как одну строку кода с помощью команды create-react-app
. Просто запустите свой терминал и перейдите в желаемое место. Выполните следующую команду:
npx create-react-app app_name
Не стесняйтесь заменять app_name
чем угодно.
После завершения создания приложения перейдите в app_name
, и вы увидите структуру каталогов, которая выглядит так:
app_name
├── node_modules
├── public
└── src
├── App.css
├── App.js
├── index.css
├── index.js
├── logo.svg
├── serviceWorker.js
└── setupTests.js
Откройте index.js
и просто измените serviceWorker.unregister( )
на serviceWorker.register( )
.
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker';
ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') );
serviceWorker.register(); /* change from unregister to register */
Теперь запустите приложение.
npm start
Затем откройте инструменты разработчика и перейдите к Audits. Нажмите «Создать отчет».
К сожалению, вы увидите, что ваше приложение не является PWA. Но почему? Это потому, что запуск приложения с использованием npm start
- это всего лишь сборка приложения для разработки. Сначала меня это определенно смутило. Чтобы запустить приложение в производственной сборке, просто выполните следующее и перейдите к localhost:5000
в своем браузере.
npm run build
serve -s build
Теперь снова сгенерируйте отчет. Теперь вы увидите, что это полноценный PWA.
Если вы используете Chrome, есть даже симпатичная кнопка установки в виде плюса, которую вы можете увидеть в правом верхнем углу браузера - рядом со значком закладки.
И вот оно! Вы создали свое первое прогрессивное веб-приложение. Разве это не было просто?