Web Analytics Made Easy - StatCounter
Главная Блог Разработка прогрессивного веб-приложения (PWA) с помощью React

Разработка прогрессивного веб-приложения (PWA) с помощью React

Разработка прогрессивного веб-приложения (PWA) с помощью React

Что такое прогрессивное веб-приложение (PWA)?

Прогрессивные веб-приложения - прекрасная идея (с ужасным названием). Вы можете создать приложение, которое обслуживает все устройства и все форм-факторы, если вы используете веб-технологии. Он может быть доступен через Интернет, а также отображаться на главном экране вашего устройства Android / iOS. Это приложение может работать в автономном режиме, отображать заставку при запуске и получать уведомления.

PWA могут сэкономить деньги для вашего бизнеса. Альтернативный вариант, если вы хотите, чтобы пользователи работали с приложением, - это создание одного и того же приложения с использованием трех разных технологий (одна для Интернета, одна для Android и одна для iOS).

Когда вы выбираете этот путь, трудно избежать увеличения стоимости и сложности. Это часто приводит к разделению команды, поскольку каждая работает над своим стеком. Как следствие, часто теряется определенная концентрация внимания. Здесь могут помочь PWA. Они являются убедительной альтернативой не только с точки зрения разработчика, но и с точки зрения привлечения ресурсов.

Однако обратная сторона PWA состоит в том, что они сложнее обычных веб-приложений; написать его с нуля просто не так просто. Но есть простые пути к созданию PWA, которые помогут вам на пути к успеху. В этом посте будет освещена одна из них - как вы можете перейти от нуля к собственному PWA, используя React и TypeScript.

Обратите внимание, что этот пост предполагает знание:

  • React
  • TypeScript
  • Node.js

Создание PWA с помощью приложения create-react-app

Чтобы создать наш PWA, мы собираемся использовать приложение create-react-app. Этот отличный проект уже давно имеет встроенную поддержку создания PWA. В последние месяцы эта поддержка достигла очень удовлетворительного уровня. Чтобы создать приложение TypeScript React с помощью create-react-app, введите в консоли эту команду npx:

npx create-react-app pwa-react-typescript --template typescript

Это создает веб-приложение React, созданное с помощью TypeScript. Его можно протестировать локально с помощью:

cd pwa-react-typescript
yarn start

Из веб-приложения в PWA с помощью Workbox

Из веб-приложения в PWA невероятно просто - вопрос лишь в том, чтобы переключиться на работу в автономном режиме. Если вы откроете файл index.tsx во вновь созданном проекте, вы найдете этот код:

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Как подсказывает подсказка, замените serviceWorker.unregister () на serviceWorker.register (), и теперь у вас есть PWA. Что это значит? Процитируем документацию create-react-app.dev:

  • Все статические ресурсы сайта кэшируются, поэтому ваша страница загружается быстро при последующих посещениях, независимо от подключения к сети (например, 2G или 3G). Обновления загружаются в фоновом режиме.
  • Ваше приложение будет работать независимо от состояния сети, даже если оно отключено. Это означает, что ваши пользователи смогут использовать ваше приложение на высоте 10 000 футов и в метро.

… Он позаботится о создании файла сервис-воркера, который будет автоматически предварительно кэшировать все ваши локальные ресурсы и поддерживать их в актуальном состоянии по мере развертывания обновлений. Сервисный работник будет использовать стратегию «сначала кэш» Cache, falling back to network для обработки всех запросов на локальные ресурсы, включая запросы навигации First, what are navigation requests? для вашего HTML, гарантируя, что ваше веб-приложение постоянно работает быстро, даже в медленной или ненадежной сети.

Под капотом приложение create-react-app достигает этого за счет использования технологии под названием Workbox. Workbox описывает себя как «набор библиотек и модулей Node, которые упрощают кэширование ресурсов и в полной мере используют функции, используемые для создания прогрессивных веб-приложений PWA».

Хорошие люди в Google знают, что написание собственного PWA может быть непростым делом. Есть много нового поведения, которое нужно настроить и о котором нужно знать; легко ошибаться. Workbox призван упростить продвижение вперед за счет реализации стратегий по умолчанию для кэширования / автономного поведения, которыми можно управлять с помощью конфигурации.

Обратной стороной использования Workbox в приложении create-react-app является то, что (как и в большинстве случаев в приложении create-react-app) мало возможностей для настройки самостоятельно, если настройки по умолчанию не служат вашим целям. Это может измениться в будущем - действительно, есть открытый пиар, который добавляет эту поддержку Added options to allow for overrides to workbox-webpack-plugin.

Настройка PWA с помощью React

Но PWA делает это не только оффлайн. Другими важными факторами являются:

  • Приложение может быть добавлено на главный экран (A2HS, также известное как «установлено»).
  • У приложения есть имя и значок, которые можно настроить.
  • Что при запуске приложения пользователю отображается экран-заставка.

Все вышеперечисленное находится «в коробке» с приложением create-react-app. Приступим к настройке.

Прежде всего, мы дадим нашему приложению имя. Запустите index.html и замените <title> React App </title> на <title> My PWA </title>. (Не стесняйтесь придумывать более оригинальное имя, чем то, которое я предложил.) Затем откройте manifest.json и замените:

"short_name": "React App",
"name": "Create React App Sample",

на

"short_name": "My PWA",
"name": "My PWA",

У вашего приложения теперь есть имя. Вы можете спросить: что это за файл manifest.json? Ну, процитируем хороших людей из Google Add a web app manifest:

Манифест веб-приложения Web app manifests - это простой файл JSON, который сообщает браузеру о вашем веб-приложении и о том, как оно должно себя вести при «установке» на мобильное устройство или рабочий стол пользователя. Для отображения подсказки «Добавить на главный экран» Add to Home Screen prompt Chrome требуется наличие манифеста.

Типичный файл манифеста включает информацию об имени приложения, значках, которые оно должно использовать, start_url, с которого оно должно начинаться при запуске, и т. д.

Таким образом, manifest.json - это, по сути, метаданные о вашем приложении. Вот как это должно выглядеть сейчас:

{
  "short_name": "My PWA",
  "name": "My PWA",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Вы можете использовать указанные выше свойства (и другие, еще не настроенные) для управления поведением вашего приложения. Например, если вы хотите заменить значки, которые использует ваше приложение, это просто:

  • Размещение новых файлов логотипа в папке public,
  • Обновление ссылок на них в manifest.json,
  • Наконец, для старых устройств Apple: обновление <link rel = "apple-touch-icon" ... /> в index.html.

Создание нескольких URL-адресов в вашем PWA

Пока что у нас есть базовое PWA. Это можно установить. Вы можете запустить его локально и развить с начала пряжи. Вы можете собрать его для развертывания с помощью yarn build.

Однако это не веб-приложение в том смысле, что оно не поддерживает разные страницы / URL-адреса. Обычно мы хотим разбить наше приложение таким образом. Давай сделаем это сейчас. Мы собираемся использовать react-router, де-факто решение маршрутизации для React. Чтобы добавить его в наш проект (и необходимые определения типов для TypeScript), мы используем:

yarn add react-router-dom @types/react-router-dom

Теперь давайте разделим наше приложение на несколько страниц. Мы заменим существующий App.tsx следующим:

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import About from "./About";
import Home from "./Home";

const App: React.FC = () => (
  <Router>
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
    </nav>
    <Switch>
      <Route path="/about">
        <About />
      </Route>
      <Route path="/">
        <Home />
      </Route>
    </Switch>
  </Router>
);

export default App;

Это будет наша корневая страница. Он отвечает за использование response-router для рендеринга страниц, которые мы хотим обслуживать, а также за предоставление ссылок, которые позволяют пользователям переходить на эти страницы. Внося наши изменения, мы нарушим наш тест (который проверял наличие удаленной ссылки), поэтому мы исправим его следующим образом.

Замените App.test.tsx следующим:

import React from 'react';
import { render } from '@testing-library/react';
import App from './App';

test('renders about link', () => {
  const { getByText } = render(<App />);
  const linkElement = getByText(/about/i);
  expect(linkElement).toBeInTheDocument();
});

Вы заметили, что в наш новый App.tsx мы импортируем два новых компонента (или страницы): About и Home. Давайте создадим их. Во-первых, About.tsx:

import React from "react";

const About: React.FC = () => (
  <h1>This is a PWA</h1>
);

export default About;

Затем Home.tsx:

import React from "react";

const Home: React.FC = () => (
  <h1>Welcome to your PWA!</h1>
);

export default Home;

Разделение кода вашего PWA

Теперь, когда мы разделили наше приложение на несколько разделов, мы также собираемся разделить код. Хороший способ сократить время загрузки PWA - убедиться, что код не встроен в большие файлы. На данный момент наше приложение создает однофайловый js. Если вы запустите yarn build, вы увидите, как это выглядит:

  47.88 KB  build/static/js/2.89bc6648.chunk.js
  784 B     build/static/js/runtime-main.9c116153.js
  555 B     build/static/js/main.bc740179.chunk.js
  269 B     build/static/css/main.5ecd60fb.chunk.css

Обратите внимание на файл build/static/js/main.bc740179.chunk.js. Это наш single-file.js. Он представляет собой скомпилированный результат построения файлов TypeScript, составляющих наше приложение. Он будет расти и расти по мере роста нашего приложения, что в конечном итоге станет проблематичным с точки зрения скорости загрузки пользователя.

Приложение create-response-app построено на основе webpack. В webpack есть отличная поддержка разделения кода, и поэтому приложение create-response-app поддерживает его по умолчанию. Применим его к нашему приложению. Опять же, мы собираемся изменить App.tsx.

Где у нас раньше было:

import About from "./About";
import Home from "./Home";

Заменим его на:

const About = lazy(() => import('./About'));
const Home = lazy(() => import('./Home'));

Это синтаксис для ленивой загрузки компонентов в React. Вы заметите, что он внутренне использует dynamic import() syntax, который webpack использует как «точку разделения».

Давайте также дадим React что-нибудь для рендеринга, пока он ожидает разрешения динамического импорта. Внутри нашего компонента <Router> мы также добавим компонент <Suspense>:

  <Router>
    <Suspense fallback={<div>Loading...</div>}>
    {/*...*/}
    </Suspense>
  </Router>

Компонент <Suspense> отобразит <div> Loading ... </div>, ожидая динамической загрузки кода маршрута. Итак, наш последний компонент App.tsx в итоге выглядит так:

import React, { lazy, Suspense } from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
const About = lazy(() => import("./About"));
const Home = lazy(() => import("./Home"));

const App: React.FC = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>
      <Switch>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Suspense>
  </Router>
);

export default App;

Теперь это приложение с разделением кода. Как мы можем сказать? Если мы снова запустим yarn build, мы увидим что-то вроде этого:

  47.88 KB          build/static/js/2.89bc6648.chunk.js
  1.18 KB (+428 B)  build/static/js/runtime-main.415ab5ea.js
  596 B (+41 B)     build/static/js/main.e60948bb.chunk.js
  269 B             build/static/css/main.5ecd60fb.chunk.css
  233 B             build/static/js/4.0c85e1cb.chunk.js
  228 B             build/static/js/3.eed49094.chunk.js

Обратите внимание, что теперь у нас есть несколько файлов * .chunk.js: наш начальный main. *. Chunk.js, затем 3. *. Chunk.js, представляющие Home.tsx, и 4. *. Chunk.js, представляющие About.tsx.

По мере того, как мы продолжаем создавать наше приложение с этого момента, у нас будет отличный подход, гарантирующий, что пользователи загружают файлы по мере необходимости и что эти файлы не должны быть слишком большими - отличная производительность, которая будет масштабироваться.

Развертывание вашего PWA

Теперь, когда у нас есть базовая PWA, давайте развернем ее, чтобы внешний мир мог ее оценить. Мы собираемся использовать для этого Netlify.

Исходный код нашего PWA находится здесь на GitHub.

Мы собираемся войти в Netlify, нажать на параметр «Создать новый сайт» и выбрать GitHub в качестве поставщика. Нам нужно будет авторизовать Netlify для доступа к нашему GitHub.

Развертывание вашего PWA

Возможно, вам потребуется нажать кнопку «Настроить Netlify на GitHub», чтобы предоставить Netlify разрешения на доступ к вашему репо, например:

Развертывание вашего PWA

Затем вы можете выбрать свое репо из Netlify. Все настройки по умолчанию, которые предоставляет Netlify, должны работать для нашего варианта использования:

Развертывание вашего PWA

Давайте нажмем волшебную кнопку "Развернуть сайт"! Через несколько минут вы обнаружите, что Netlify развернул наш PWA.

Развертывание вашего PWA

Если мы перейдем по URL-адресу, предоставленному Netlify, мы сможем увидеть развернутый PWA в действии. (У вас также есть возможность настроить собственное доменное имя, которое, как правило, требуется за пределами простой демонстрации, такой как эта.) Важно отметить, что это будет обслуживаться через HTTPS, что позволит нашему сервисному работнику работать.

Теперь, когда мы это знаем, давайте посмотрим, насколько то, что мы создали, по мнению профессионалов. Мы собираемся запустить аудит Google Chrome DevTools для нашего PWA:

Развертывание вашего PWA

Это хорошее начало для нашего PWA!

Полная видимость разработки приложения на React

Отладка приложений React может быть сложной, особенно когда пользователи сталкиваются с проблемами, которые трудно воспроизвести. Если вы заинтересованы в мониторинге и отслеживании состояния Redux, автоматическом обнаружении ошибок JavaScript, а также в отслеживании медленных сетевых запросов и времени загрузки компонентов, попробуйте LogRocket.

Развертывание вашего PWA

LogRocket похож на цифровой видеорегистратор для веб-приложений, записывая буквально все, что происходит в вашем приложении React. Вместо того, чтобы гадать, почему возникают проблемы, вы можете агрегировать и сообщать о том, в каком состоянии находилось ваше приложение, когда возникла проблема. LogRocket также отслеживает производительность вашего приложения, составляя отчеты с такими показателями, как загрузка ЦП клиента, использование памяти клиента и т. Д.

Пакет промежуточного программного обеспечения LogRocket Redux добавляет дополнительный уровень видимости ваших пользовательских сеансов. LogRocket регистрирует все действия и состояние из ваших хранилищ Redux.

источник

Раз в неделю мы отправляем дайджест с самыми популярными статьями. Подпишитесь на наши новости и мы сделаем для вас бесплатно аудит вашего сайта.