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

И вот оно! Вы создали свое первое прогрессивное веб-приложение. Разве это не было просто?