От сайта Gatsby к прогрессивному приложению

Development | Amber | Комментировать запись

Прогрессивные веб-приложения (PWA) – это технология, которая позволяет разработчикам превращать сайты в мобильные приложения в браузере. Благодаря первоклассной производительности Gatsby.js вы получаете молниеносно быстрый веб-сайт, который выглядит и ведет себя как мобильное приложение.

Читайте также: Сборка прогрессивных приложений в Angular

Требования

Это руководство предполагает, что у вас есть работающий проект Gatsby. Если пока что у вас нет такого проекта, рекомендуем сначала изучить мануал Gatsby v2: с чего начать работу?

1: Манифест веб-приложения

Манифест веб-приложения — это краткий JSON-файл с метаданными об этом приложении. Он предоставляет браузеру базовые инструкции о том, как вести себя при установке на устройство пользователя.

Манифесты веб-приложений в Gatsby добавляются через плагин gatsby-plugin-manifest:

$ npm install --save gatsby-plugin-manifest

Затем мы можем добавить плагин в конфигурацию Gatsby, в файл gatsby-config.js:

module.exports = {
  ...
  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Alligator.io`,
        short_name: `Alligator`,
        start_url: `/`,
        background_color: `#FFF`,
        theme_color: `#FAE042`,
        display: `standalone`,
      },
    },
  ],
}

Теперь давайте рассмотрим некоторые параметры манифеста веб-приложения.

Иконки

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

Автоматический вариант

На самом деле манифест поддерживает две автоматические опции. Первая предоставит Gatsby.js самый большой размер значка, учитывая следующие предварительные условия:

• Размер значка – не менее 512×512.
• Квадратный формат. Если фон не прозрачный, Gatsby автоматически добавит полосы, чтобы сделать его прозрачным.
• Поддерживаются форматы JPEG, PNG, WebP, TIFF, GIF и SVG.

Чтобы настроить иконку приложения, добавьте следующую строку в параметры плагина в gatsby-config.js:

 icon: `src/images/icon.png`,

Gatsby сгенерирует предварительный набор значков из предоставленного источника.

Гибридный вариант

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

icon: `src/images/icon.png`,
icons: [
  {
    src: `/favicons/android-chrome-192x192.png`,
    sizes: `192x192`,
    type: `image/png`,
  },
  {
    src: `/favicons/android-chrome-512x512.png`,
    sizes: `512x512`,
    type: `image/png`,
  },
],

При помощи конфигурации массива icons можно настроить иконки необходимых нам размеров.

Ручной режим

В ручном режиме вы самостоятельно помещаете нужные иконки в папку static, а также сами отвечаете за определение всего манифеста веб-приложения.

В таком случае мы указываем размеры значков в настройках плагина, опуская параметр icon.

icons: [
  {
    src: `/favicons/android-chrome-192x192.png`,
    sizes: `192x192`,
    type: `image/png`,
  },
  {
    src: `/favicons/android-chrome-512x512.png`,
    sizes: `512x512`,
    type: `image/png`,
  },
],

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

2: Создание Service Worker

Теперь, когда у нас есть готовый манифест веб-приложения, давайте посмотрим, как сгенерировать Service Worker для нашего сайта. Для начала установим gatsby-plugin-offline:

$ npm install --save gatsby-plugin-offline

Затем можно добавить в нашу конфигурацию Gatsby следующее:

plugins: [`gatsby-plugin-offline`]

Важно! Чтобы манифест веб-приложения кэшировался, нужно указать gatsby-plugin-manifest перед gatsby-plugin-offline.

Плагин создаст service worker для нашего приложения, используя библиотеку Google Workbox. Приложение получит автоматическое кеширование файлов, что позволяет страницам быть доступными офлайн после первого посещения пользователем.

Если у вашего сайта есть особая потребность, которая требует от service worker немного больше, вы можете переопределить стандартные параметры с помощью этой конфигурации. Однако имейте в виду, что изменение значений по умолчанию может нарушить офлайн поддержку. Обязательно изучите предоставленные выше ссылки для получения дополнительной информации.

Удаление service worker

Если офлайн функции вашего приложения необходимо отключить, вы можете удалить service worker, используя gatsby-plugin-remove-serviceworker.

Для этого нужно сначала установить плагин, а затем удалить gatsby-plugin-offline:

$ npm install gatsby-plugin-remove-serviceworker
$ npm uninstall gatsby-plugin-offline

После этого вы можете обновить конфигурацию Gatsby:

plugins: [
-  `gatsby-plugin-offline`,
+  `gatsby-plugin-remove-serviceworker`,
 ]

Заключение

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