Progressive Web App и Angular

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

Ранее я уже писал про PWA в статье Progressive Web — будущее веба. Теперь я расскажу более подробно о технической части. Для того, чтобы ваше приложение воспринималось браузером как прогрессивное, необходимо соответствовать основным критериям:

Приложение должно содержать manifest файл
Необходим Service Worker, который будет кешировать ресурсы
Быть доступным по https

Помимо основных требований, есть куча критериев. Узнать подробнее и проверить соответствие им можно, установив расширение для браузера Chrome — Lighthouse.

Далее подразумевается, что у вас уже существует Angular 2 приложение.

Шаг 1. manifest.json

Файл manifest.json содержит в себе перечень используемых ресурсов для корректной работы приложения. От его содержимого будет зависеть, как будет выглядеть приложение после установки.

Прежде всего создадим файл manifest.json с базовым содержимым:

{
    "short_name": "AngularApp",
    "name": "Angular 4 PWA",
    "start_url": "/",
    "theme_color": "#f48c5b",
    "background_color": "#ffffff",
    "display": "standalone",
    "orientation": "portrait"
    /// Тут будут добавлены иконки
}

Поместим его в папку /src и подключим его в файле index.html между тегами head.

<head>
  <!-- ваш существующий код -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="msapplication-starturl" content="/">
  <meta name="theme-color" content="#f48c5b">
  <link rel="manifest" href="/manifest.json">
</head>

Далее необходимо создать пакет иконок и подключить их в manifest. Самому нарезать картинки не стоит, есть множество сервисов, которые сгенерируют все необходимое из png файла. Я, например, пользуюсь этим сервисом. После загрузки сгенерированного пакета иконок, распакуем новые иконки в папку /src/assets/images/icons/ и подключим их. В архиве будет находиться собственный manifest.json. Из него можно скопировать код с иконками и вставить в наш файл, заменив при этом пути к иконкам.

Пример:

"icons": [
      {
        "src": "/assets/images/icons/icon-72x72.png",
        "sizes": "72x72",
        "type": "image/png"
      },
      {
        "src": "/assets/images/icons/icon-96x96.png",
        "sizes": "96x96",
        "type": "image/png"
      },
      /// и т.д.
    ]

Теперь осталось уведомить angular cli о том, что у нас появился новый файл в папке src.

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico",
        "manifest.json",    // <-- добавить manifest тут
      ],
  }
  /// ...
]

Проверить корректность manifest.json можно открыв ваш апп в браузере Chrome: Devtools -> application -> Manifest.

Шаг 2. Service Worker

Для генерации скрипта воркера мы воспользуемся пакетом sw-precache-webpack-plugin, который установим с помощью npm.

npm install sw-precache-webpack-plugin --save-dev

Теперь создадим в корне проекта файл precache-config.js. В этом файле будет конфиг для генерации воркера.

var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
module.exports = {
    navigateFallback: '/index.html',
    navigateFallbackWhitelist: [/^(?!\/__)/], // <-- эту строку добавлять, если используете firebase
    stripPrefix: 'dist',
    root: 'dist/',
    plugins: [
        new SWPrecacheWebpackPlugin({
          cacheId: 'firestarter',
          filename: 'service-worker.js',
          staticFileGlobs: [
            'dist/index.html',
            'dist/**.js',
            'dist/**.css'
          ],
          stripPrefix: 'dist/assets/',
          mergeStaticsConfig: true
        }),
      ]
  };

Остается подключить генерируемый service worker в index.html перед закрывающим тегом </body>.

<body>
  <!-- ваш код -->
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/service-worker.js')
      .then((registration) => {
        console.log('SW registered');
      })
      .catch((err) => {
        console.log('SW error', err);
      });
    }
  </script>
</body>

Воркер необходимо генерировать консольной командой, после билда продакшн версии Angular приложения. В нашем случае Angular приложение билдится командой ng build --prod, а воркер sw-precache --root=dist --config=precache-config.js. Для удобства их можно записать в конфиг package.json в виде кастомной задачи.

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e",
  "pwa": "ng build --prod && sw-precache --root=dist --config=precache-config.js" // <--- custom build command
}

Теперь достаточно прописать npm run pwa и мы получим готовый Progressive Web App.

Шаг 3. HTTPS протокол

Для работы сервис воркеров и push-уведомлений Progressive Web App должен быть доступен по https протоколу. Вы можете либо сами получить сертификат и привязать его к хостингу, на котором расположено Angular приложение. Либо воспользоваться хостингом, который сам предоставляет ssl сертификат, например firebase хостинг. Подробнее про firebase и их хостинг можно узнать на официальном сайте.

При использовании firebase, после выполнения команды npm run pwa остается выполнить firebase deploy --only hosting. После деплоя протестировать приложение можно с помощью ранее упоминавшегося плагина Lighthouse.

На этом все. Теперь ваше Angular приложение будет гордо определяться как Progressive Web App.

Шаг 1. manifest.json

Шаг 2. Service Worker

Шаг 3. HTTPS протокол

Подписывайтесь