Progressive Web App и Angular

По
Volodymyr Golosay
-
990
views

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

Progressive Web App

Ранее я уже писал про 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.

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

Для получения уведомлений о новых публикациях — подписывайтесь на мой блог или страницы в соц. сетях: Twitter, Facebook.

Подписаться на блог по эл. почте

СХОЖИЕ СТАТЬИБОЛЬШЕ ОТ АВТОРА