PWA приложение на Angular

PWA приложение на Angular

PWA приложение – это приложение созданное на базе технологий нативных мобильных приложений. Основная польза от PWA это способность работать (открывать ваш сайт/веб-приложение) без доступа к сети интернет. Кроме этого, pwa не требуют установки и в разы быстрее обычных веб приложений. Эта статья не о том, что прогрессивные веб приложения могут, а чего не могут – это инструкция по запуску pwa на Angular.

Начнем

 

Чтобы показать вам как строиться прогрессивное приложение на Ангуляр, мы сделаем простой вебсайт. Когда он будет готов, мы проверим его с помощью хромовского плагина Lighthouse и выясним результаты теста, насколько наш вебсайт соотноситься с понятием PWA приложение.

Создаем новый проект на Angular

Создадим новый Angular проект используя Angular CLI. Все что нужно, так это установить Angular CLI на вашу машину. Если angular cli не устанавливается, то выполните следующую команду, чтобы установить angular глобально:

//install Angular CLI
npm install -g @angular/cli

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

//create a new Angular project without test files.
ng new ng-pwa --skip-tests

Манифест json

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

Чтобы создать манифест для нашего приложения, просто перейдите в папку src / и создайте файл с именем manifest.json в корне папки. Скопируйте и вставьте содержимое ниже в файл.

// src/manifest.json
{
   "name": "Angular Progressive Web App",
   "short_name": "Ng-PWA",
   "start_url": "./",
   "theme_color": "#008080",
   "background_color": "#008B8B",
   "display": "standalone",
   "description": "A PWA that is built with Angular",
   "icons": [
       {
           "src": "/assets/images/icons/icon-16x16.png",
           "sizes": "16x16",
           "type": "image/png"
       },
       {
            "src": "/assets/images/icons/icon-32x32.png",
            "sizes": "32x32",
            "type": "image/png"
        },
        {
            "src": "/assets/images/icons/icon-150x150.png",
            "sizes": "150x150",
            "type": "image/png"
        },
        {
            "src": "/assets/images/icons/icon-180x180.png",
            "sizes": "180x180",
            "type": "image/png"
        },
        {
            "src": "/assets/images/icons/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/assets/images/icons/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
   ]

}

В нашем манифесте веб-приложения мы определили имя, которое будет прикреплено к иконке нашего приложения на главном экране пользователя, и short_name, которое заменит его, если оно слишком длинное. Мы также указали целевую страницу приложения при запуске с главного экрана с помощью start_url. Theme_color задает цвет для UI браузера пользователя во время посещения вашего сайта пользователем. Свойство background_color управляет цветом фона, на котором будет отображаться иконка приложения при запуске с главного экрана. Параметр display определяет показывать пользователям UI браузера или нет при посещении вашего сайта.

Вполне вероятно ожидать, что пользователи будут посещать наш сайт с различных типов устройств с различными размерами экрана, поэтому необходимо сделать дубликаты иконок приложений в нескольких размерах. realfavicongenerator.net поможет автоматизировать этот процесс.

Когда с этим покончено, можно перейти в файл index.html и добавить:

<!-- src/index.html -->
...
<link rel="manifest" href="/manifest.json"> 
<meta name="theme-color" content="#008080">
...

в хэдер

Чтобы ангуляр смог собрать наше приложение с манифестом, необходимо добавить json файл манифеста в папку assets.

// .angular-cli.json
...
"apps": [
    {
     ...
      "assets": [
       ...
        "manifest.json"
      ],
...
 

Service Workers

Service workers являются основой прогрессивных веб-приложений. Написанные на Javascript, они помогают кэшировать важные активы и файлы, чтобы держать “динозавров” (имелось ввиду динозавров, которых показывает chrome браузер на веб странице, когда у вас пропал интернет – прим. автора)  в страхе и сделать наше приложение функциональным, когда покрытие сети плохое и нестабильное . Помимо всего прочего, service workers могут перехватывать запросы и управлять ответами с сервера.

Создать сервис воркер в Angular достаточно простая задача, неоднозначная. Это потому, что мы должны собрать наше приложение с webpack, прежде чем пушить его в производство и наш service worker должен быть в состоянии отслеживать и кэшировать файлы сборки. В помощь нам подойдет npm пакет sw-precache-webpack-plugin это все, что нам нужно сделать, это установить service worker и настроить его. Затем мы можем выполнить простую команду, которая автоматически сгенерирует Service worker в папке build.

Выполните команду npm install для установки пакета.

//install sw-precache-webpack-plugin as a development dependency
npm install --save-dev sw-precache-webpack-plugin

После установки пакета перейдите в корневой каталог приложения и создайте файл с именем precache-config.js . Скопируйте и вставьте приведенный ниже код в файл.

// pre-cache.config.js

var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');

module.exports = {
    navigateFallback: '/index.html',
    navigateFallbackWhitelist: [],
    stripePrefix: 'dist',
    root: 'dist/',
    plugins:[
        new SWPrecacheWebpackPlugin({
            cacheId: 'ng-pwa',
            filename: 'service-worker.js',
            staticFileGlobs: [
                'dist/index.html',
                'dist/**.js',
                'dist/**.css'
            ],

        })
    ],
    stripePrefix: 'dist/assets',
    mergeStaticsConfig: true
};

The precache-config.js file configures the sw-precache-webpack-plugin using literal objects key-value pairs.

В precache-config.js файле настраивается SW-precache-webpack-plugin с помощью пар “ключ-значение” литеральных объектов.

Angular в качестве интерфейсной платформы для построения одностраничных приложений использует маршрутизацию URL-адресов на стороне клиента и поэтому может создавать произвольные URL-адреса, которые не кэшируются автоматически созданным service worker’ом. В таких ситуациях мы определим HTML, с которой будет сопоставлен запрошенный URL, и navigateFallback это обработает. HTML запись должна быть в состоянии обеспечить необходимыми ресурсами (наше приложение является SPA, и индекс.html является точкой входа. Он может обрабатывать произвольные URL) и должен быть среди файлов, выбранных для кэширования в массиве staticFileGlobs.

navigateFallbackWhitelist может быть пустым или содержать регулярное выражение, определяющее Тип / шаблон URL-адреса, для которого будет использоваться navigateFallback.

Чтобы завершить настройку Service worker, мы создадим пользовательский сценарий/команду npm, которая будет использоваться для построения нашего приложения и автоматического создания файла Service worker в папке build. В package.json-файл достаточно добавить следующий скрипт:

 // package.json
 ...
 "scripts": {
    ...
    "pwa": "ng build --prod && sw-precache --root=dist --config=precache-config.js"
  },
 ...

Представление

В нашем примере на view слое мы имеем всего одно представление, так как наше основное внимание сосредоточено на процессе создания прогрессивных веб-приложений с Angular.

<!-- src/app/app.component.html -->

<div class="container">
  <h1>
    A Progressive Web App Built with Angular.
  </h1>
  <img width="300" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=" alt="Angular logo">

  <h2>Get Started With Progressive Web Apps: </h2>
  <ul>
    <li>
      <h4><a target="_blank" rel="noopener" href="https://developers.google.com/web/fundamentals/primers/service-workers/">Service Workers</a></h4>
    </li>
    <li>
      <h4><a target="_blank" rel="noopener" href="https://developers.google.com/web/fundamentals/web-app-manifest/">Web App Manifest</a></h4>
    </li>
    <li>
      <h4><a target="_blank" rel="noopener" href="https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/">Code Lab (PWA)</a></h4>
    </li>
  </ul>

</div>

Не забудьте поставить атрибут rel="noopener т.к. он имеет важное значение в прогрессивных веб-приложениях, если целевой атрибут элемента привязки имеет значение _blank по соображениям безопасности и производительности.

Ниже приведен CSS код

/* src/styles.css */

body{
    background-color: teal;
}

.container{
    text-align: center;
}

ul{
    list-style: none;
}

h1, h2, a {
    color: white;
}

Размещение

Service worker – это сердце любого прогрессивного веб-приложения. Однако для того, чтобы сервис воркер работал правильно, наше приложение должно обслуживаться через безопасное соединение. Следовательно, мы будем развертывать наше приложение в Firebase, потому что приложения, размещенные на Firebase, обслуживаются через безопасное соединение. Далее шаг за шагом мы настроим размещение на firebase

Чтобы начать работу посетите firebase.google.com. Если у вас еще нет учетной записи, создайте ее, чтобы получить доступ к консоли. Из консоли, создайте новый проект FireBase проекта.

После создания нового проекта Firebase перейдите в командный терминал и перейдите в папку прогрессивного веб-приложения. Запустите npm install -g firebase-toolsдля глобальной установки firebase инструментов. Пакет firebase-tools позволит нам тестировать запуск и развертывать приложения в Firebase из командной строки терминала.

После завершения установки npm пакета, мы должны собрать наше приложение в процессе подготовки к деплою. Чтобы создать наше приложение Angular и автоматически сгенерировать Service worker, запустите npm run pwa. Эта команда запускает наш скрипт, который мы создали ранее, и делает наше приложение готовым к продакшену.

Время, чтобы ввести Firebase в наше приложение. Выполните команду firebase login для входа в Firebase. Запустите команду firebase init для инициализации Firebase в проекте. Затем ответьте на вопросы следующим образом:

  • Вы готовы продолжить? (Y/n) = Y
  • Какие функции интерфейса командной строки Firebase вы хотите настроить для этой папки? = Hosting
  • Выберите проект Firebase по умолчанию для этого каталога = Имя-Вашего-Firebase-Проекта
  • Что вы хотите использовать в качестве общедоступного каталога? = путь до каталога
  • Настройте как одностраничное приложение (перепишите все URL-адреса в /index.html)? (y/N) = Y
  • Файл dist / index.html уже существует. Переписать? (y / N) = N

Наше приложение готово к развертыванию. Запустите firebase deploy, чтобы задеплоить приложение в Firebase.

Наконец, запустите firebase open hosting: site, чтобы увидеть наше новое приложение в действии.

Lighthouse PWA Тест

Lighthouse is a Chrome extension made by Google. It can be used to test how compliant a progressive web app is to the progressive web app standard, in addition to other tests. The highest score is 100% and the PWA score for this app is 91% (There is room for improvement, obviously).

Lighthouse является расширением для Chrome, сделанный самим Google’ом. Его можно использовать для проверки соответствия прогрессивного веб-приложения стандарту PWA в дополнение к другим тестам. Самый высокий балл составляет 100% и оценка PWA для этого приложения составляет 91% (хороший результат, но есть куда расти).

Вывод

Прогрессивные веб-приложения – это приложения будущего, поскольку они предоставляют пользователям взаимодействовать с вашим сайтом будто бы это нативное приложение на android или ios. Так или иначе PWA  легковесное и достаточно гибкое решение для вашего проекта. Несомненно, Angular является одним из самых популярных front-end фреймворков и мы надеемся, что относительная простота создания прогрессивных веб-приложений с Angular, показанная в этой статье, побудит большее число angular разработчиков перевести свои приложения на PWA. Спасибо!

Отставить отзыв

Ваш e-mail не будет опубликован. Обязательные поля помечены *