Прогрессивные веб-приложения: от вкладки до панели задач

1. Добро пожаловать

В этой лабораторной работе вы возьмёте существующее веб-приложение и сделаете его устанавливаемым. Это четвёртая из серии сопутствующих практических работ для семинара Progressive Web App . Предыдущая лабораторная работа была посвящена IndexedDB . В этой серии ещё четыре практических работы.

Чему вы научитесь

  • Напишите Service Worker вручную
  • Добавить Service Worker в существующее веб-приложение
  • Используйте Service Worker и API Cache Storage, чтобы сделать ресурсы доступными в автономном режиме.

Что вам следует знать

  • Базовый HTML и JavaScript

Что вам понадобится

2. Подготовка

Начните с клонирования или загрузки начального кода, необходимого для выполнения этой лабораторной работы:

Если вы клонируете репозиторий, убедитесь, что вы находитесь на ветке pwa04--tab-to-taskbar . ZIP-архив также содержит код для этой ветки.

Для этой кодовой базы требуется Node.js 14 или выше. После того, как код будет готов, выполните команду npm ci из командной строки в папке с кодом, чтобы установить все необходимые зависимости. Затем выполните npm start , чтобы запустить сервер разработки для этой кодовой лаборатории.

Файл README.md исходного кода содержит пояснения ко всем распространяемым файлам. Кроме того, ниже перечислены основные существующие файлы, с которыми вы будете работать в ходе этой лабораторной работы:

Ключевые файлы

  • index.html — HTML-код основного приложения

3. Создайте манифест веб-приложения

Файлы манифеста веб-приложения описывают ваше PWA, чтобы вместе с работающим Service Worker браузер знал, что ваше веб-приложение можно установить, и, что важно, как оно будет отображаться на устройстве, на которое будет установлено. Однако сначала его необходимо создать. Добавьте файл manifest.json в public папку вашего веб-приложения и добавьте в него следующее:

{
  "name": "PWA Edit",
  "short_name": "PWA Edit",
  "start_url": "/?source=pwa",
  "display": "standalone",
  "icons": [
    {
      "type": "image/png",
      "sizes": "192x192",
      "src": "/images/icons/logo-192.png"
    },
    {
      "type": "image/png",
      "sizes": "48x48",
      "src": "/images/icons/logo-48.png"
    },
    {
      "type": "image/png",
      "sizes": "72x72",
      "src": "/images/icons/logo-72.png"
    },
    {
      "type": "image/png",
      "sizes": "128x128",
      "src": "/images/icons/logo-128.png"
    },
    {
      "type": "image/png",
      "sizes": "384x384",
      "src": "/images/icons/logo-384.png"
    },
    {
      "type": "image/png",
      "sizes": "512x512",
      "src": "/images/icons/logo-512.png"
    },
    {
      "type": "image/png",
      "sizes": "96x96",
      "src": "/images/icons/logo-96.png"
    },
    {
      "type": "image/png",
      "sizes": "1024x1024",
      "src": "/images/icons/maskable-1024.png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#282c34",
  "background_color": "#282c34",
  "description": "A PWA markdown editor",
  "categories": ["productivity", "utilities"]
}

Не забудьте добавить значок Apple Touch для устройств iOS. Добавьте следующую строку кода сразу после тега <title> в <head> в index.html

<link rel="apple-touch-icon" href="/images/icons/apple-touch.png" />

Объяснение

Этот манифест включает обязательные, рекомендуемые и рекламные поля, так что здесь происходит много всего. Во-первых, обязательные поля, в которых определяются имя PWA, начальный URL, режим отображения и значки. Обратите внимание, что последний значок — маскируемый, что позволяет отображать несколько значков в зависимости от пользовательского интерфейса устройства. Далее следуют поля рекомендуемой темы и цвета фона. Наконец, есть рекламные поля, описание и категории, к которым относится этот PWA. При прикреплении этого манифеста к PWA эти поля будут управлять отображением и управлением установленного приложения PWA.

4. Прикрепить манифест к PWA

После создания файла манифеста его необходимо прикрепить, чтобы связать с PWA. Для этого откройте index.html и добавьте следующий код прямо под тегом <title> в разделе <head> :

<link rel="manifest" href="/manifest.json" />

Объяснение

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

5. Добавьте ярлыки

Один из отличных способов сделать ваше PWA более интегрированным с устройством — предоставить контекстное меню для быстрого доступа к определённым функциям приложения. Переключатель «Ночной режим» в PWA позволяет выбрать режим, установив параметр запроса mode на night или day . Создайте два ярлыка в manifest.json , которые выполняют следующие действия:

  • Запускает PWA в night или day режиме
  • Для значка используется /images/logo.svg размером 150x150

6. Поздравляем!

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

Следующая лабораторная работа в серии — «Установка подсказок и измерений».