Создание PWA с помощью Angular 5. Часть 2: Развитие приложения

Это продолжение моей предыдущей статьи, в которой мы создали наше первое приложение на Angular 5. И я надеюсь, что у всех есть успешно размещенный проект на github-страницах.

Но если вы только присоединяетесь к нам - ничего страшного. Чтобы выполнить следующие шаги, вам понадобится только производственная версия любого веб-приложения, созданного с помощью Angular 5, размещенного на любом веб-сервере или локально.

Шаг 1. Первая проверка.

Так. Нам нужно выяснить, как работает наше приложение и где происходят наши недельные баллы. И все, что нам нужно сделать, это открыть наши Chrome DevTools и перейти на вкладку Audits, где мы можем найти такой мощный инструмент, как Lighthouse - лучшая диагностика веб-страниц.

Нажмите большую синюю кнопку «Выполнить аудит», чтобы узнать, что мы можем сделать.

Lighthouse предложит четыре варианта для тестирования, и я рекомендую пройти их все хотя бы в первый раз. Готово, уверенно, проведите аудит!

Мои результаты пока не столь впечатляющие:

Кажется, что с моей доступностью все в порядке, и я следую лучшим практикам, но мое приложение, как PWA, с ** к.

К счастью, я вижу, что не так:

Также у моих пользователей уходит слишком много времени, чтобы хоть что-то увидеть:

С этими числами и сгенерированным списком «исправить» у нас есть отправная точка. Итак, приступим.

Шаг 2. Добавление оболочки приложения

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

2.1 Загрузчик

Наиболее распространенным примером оболочки приложения является загрузчик (или счетчик), который виден пользователям, пока приложение и данные не будут готовы.

В качестве примера ресурса вы можете перейти на codepen.io, найти что-то вроде простой css spinner и выбрать то, что вам нравится. Скопируйте разметку и стили прямо в файл index.html. Css переходит к тегу ‹style› (было бы полезно минимизировать код css), html вашего загрузчика - внутри элемента ‹app-root› (он будет автоматически удален, когда приложение angular будет готово к работе).

<app-root>
  <div id="spinner"></div>
</app-root>

2.2 Заголовок

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

<app-root>
  <nav 
    style="background-color: #673ab7; height: 56px; width: 100%">
  </nav>
  <div id="loading"></div>
</app-root>

2.3 Откат JS

В некоторых предупреждениях Lighthouse говорится, что мы не предоставляли никакого контента, если скрипты недоступны. Чтобы справиться с этим, мы можем использовать тег HTML ‹noscript›. Например:

<noscript>
  <h3 style="color: #673ab7; font-family: Helvetica; margin: 2rem;">
      Sorry, but app is not available without javascript
  </h3>
</noscript>

2.4 Разное. исправления

Просмотрите результаты аудита и внимательно прочтите все предупреждения. Я уверен, что вы найдете некоторые вещи, которые можно улучшить или исправить за пределами мира pwa.

Для меня это было:

Проблема в статической ширине карточки изображения, которую я установил недавно. Css медиа-запросы решит мою проблему.

Давайте построим наш проект снова. Также я рекомендую вам сделать несколько коммитов во время процесса, чтобы иметь возможность просмотреть наши шаги в будущем. Отправьте обновления в ветку страниц github и через минуту обновите вкладку браузера приложения (❗️ не забудьте закрыть инструменты разработчика - аудит можно повторно запустить только после закрытия панели инструментов разработчика). Убедитесь, что изменения были применены, откройте инструменты разработчика и снова запустите контрольный тест (вы можете снять флажки специальные возможности и лучшие практики, чтобы ускорить его)

Мои свежие результаты:

Мы потеряли несколько очков в производительности, но в целом картина выглядит лучше.

Шаг 3. Добавление манифеста

Как видно из результатов аудита, 3 красных предупреждения говорят нам о том, что нам нужно нечто, называемое «манифестом».

Манифест веб-приложения - это файл внутри нашего приложения, который предоставляет некоторую описательную информацию. Из документов MDN:

Манифест веб-приложения предоставляет информацию о приложении (например, имя, автор, значок и описание) в текстовом файле JSON. Цель манифеста - установить веб-приложения на домашний экран устройства, обеспечивая пользователям более быстрый доступ и более удобные возможности.

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

// src/manifest.json
{
  "name": "Progressive Web Cat",
  "short_name": "PWCat",
  "description": "A funny cat image generator",  
  "icons": [{
    "src": "assets/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    }, {
      "src": "assets/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    }, {
      "src": "assets/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    }, {
      "src": "assets/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }],
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#673ab7"
}

Создайте manifest.json в папке src и скопируйте / вставьте приведенный выше код. Откройте файл .angular-cli.json и добавьте манифест в раздел assets:

// .angular-cli-json
...
"assets": [
  "assets",
  "favicon.ico",
  "manifest.json"
]
...

Как видно из конфига, нам нужно включить в наш проект иконки разных размеров. Для нашего учебного процесса просто погуглите - выберите любой, который вам нравится. (Подсказка: перейдите на вкладку результатов поиска Google Изображение, найдите кнопку Инструменты и на сдвинутой вниз панели инструментов откройте размер . Выберите точный размер, чтобы уточнить поисковый запрос). Загрузите изображения и переместите их в нашу папку активы.

❗️ Важно использовать изображения в формате .png для значков приложений (спасибо Аймерик Тибере за разъяснения)

Перейдите в файл index.html, добавьте в заголовок следующие теги:

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

Вот и все. Создавайте и развертывайте наши обновления. Время для нового аудиторского теста.

Не торопитесь и наслаждайтесь прогрессивным числом 🙂

Шаг 4. Сервисный работник

Последний. Мы на финише. Последние 3 ошибки связаны с отсутствием так называемого Service Worker.

Определение Google:

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

Определение MDN:

Сервисные работники по сути действуют как прокси-серверы, которые находятся между веб-приложениями, браузером и сетью (если они доступны). Они предназначены для обеспечения эффективного взаимодействия в автономном режиме, перехвата сетевых запросов и принятия соответствующих мер в зависимости от доступности сети и наличия обновленных активов на сервере.

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

Как мы поняли, нам понадобится какой-нибудь js-скрипт. К счастью, команда Angular проделала для нас огромную работу и предоставила готовый сценарий программного обеспечения, который мы можем установить в одну строку:

npm install @angular/service-worker --save

Также нам понадобится файл конфигурации ngsw (извините за так много ручной работы. Вы не будете делать это все время. Я покажу вам простой способ позже. Вы сидите до тех пор, хорошо?) .

touch src/ngsw-config.json

Скопируйте / вставьте туда следующий код:

// src/ngsw-config.json
{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html"
      ],
      "versionedFiles": [
        "/*.bundle.css",
        "/*.bundle.js",
        "/*.chunk.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }]
}

Затем нам нужно включить sw для нашего проекта в файле .angular-cli.json:

// .angular-cli.json
...
{ 
  "apps": [{ 
    ..., 
    "serviceWorker": true
  }]
}
...

Чтобы зарегистрировать SW в приложении, добавьте в app.module.ts следующую строку:

// src/app.module.ts
...
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
@NgModule({
  ...
  imports: [
    ... ,
    environment.production ? ServiceWorkerModule.register('ngsw-worker.js') : []
  ],
})
...

Зафиксируйте свои изменения, создайте приложение и отправьте на gh-страницы

ng build --prod --base-href "/PWCat/"
ngh

❗️Очень важно использовать флаг prod. base-href необходим, если вы работаете с gh-страницами.

Мы преодолели очередной барьер! Поздравляю! :)

Легкий путь

Вышеуказанные шаги являются обязательными и в большинстве случаев избыточными, потому что angular CLI может сделать всю работу за нас на этапе сборки. Вы помните, как мы создавали наше приложение в Части 1? Когда мы только начинали, мы ничего не слышали о сервис-воркерах, поэтому не добавили для него следующий волшебный флаг:

ng new PWCat --service-worker

Вот и все. Этот флаг будет установить модуль sw npm, включить sw в .angular-cli.json, register sw для нашего приложения и сгенерируйте файл конфигурации ngsw с некоторыми значениями по умолчанию.

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

Перезапустите аудит и поздравьте себя с отличным результатом:

Используйте его как родное приложение

Откройте приложение на телефоне через браузер Chrome. Обратите внимание на всплывающее окно внизу вкладки.

После нажатия синей кнопки вы найдете значок приложения на свободном месте на рабочем столе.

И теперь вы можете использовать его как обычное приложение, вам больше не нужен браузер и поиск по URL.

Автономное состояние

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

Чтобы исправить это, нам нужно немного изменить логику контроллера img-карты, сделав нашу кнопку более настраиваемой. Я хочу, чтобы моя кнопка «Получить нового кота» была отключена, когда мы не в сети, и рассказывала пользователю о ситуации. Давайте разберемся, какие атрибуты можно установить с помощью js:

// src/img-card/img-card.component.html
...
<button 
  color="{{ button.color }}" 
  (click)="generateSrc()" 
  disabled="{{ button.disabled }}"
  mat-button 
  mat-raised-button>
    {{ button.text }}
</button>
...

Создайте новый класс и определите его типы для каждого свойства:

// src/img-card/img-card.component.ts
...
class Button { 
  text: string;
  disabled: boolean;
  color: string;
}
...

Затем создайте новое общедоступное свойство ImgCardComponent типа Button:

// src/img-card/img-card.component.ts
...
public button: Button = {
  text: 'Give me another cat',
  color: 'primary',
  disabled: false
};
...

Мы можем проверить, находимся ли мы в сети с помощью глобального объекта навигатора:

// src/img-card/img-card.component.ts
...
ngOnInit() {
  this.src = this.image.api + this.image.message + 
    '?size=' + this.image.fontsize;
  if (!navigator.onLine) {
    this.button.text = 'Sorry, you\'re offline';
    this.button.disabled = true;
  }
}
...

Последнее, что нам нужно сделать, это сказать сервис-воркеру, что нужно кэшировать изображение кошки. В разделе ресурсов конфигурации sw добавьте свойство urls

// src/ngsw-config.json
...
{
  "name": "assets",
  "installMode": "lazy",
  "updateMode": "prefetch",
  "resources": {
    "files": [
      "/assets/**"
    ],
    "urls": [
      "https://cataas.com/**"
    ]
  }
}

Опять же, зафиксируйте, перестройте и нажмите. Обновите приложение, выключите Wi-Fi и снова загрузите вкладку. Больше никаких дауназавров - только милые котики :)