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

В этой статье мы расскажем, как создать наш первый проект PWA с фреймворком Vue.js, выполнив минимальные требования PWA, настроив Webpack для создания работника служб кэширования для офлайн-поддержки и запустив инструмент аудита Google Lighthouse для определения точек улучшения.

Создание рабочего пространства

В любом месте вашего компьютера давайте создадим каталог с именем pwa-vue-app-1.

Вся работа будет выполняться в этом каталоге, поэтому с помощью предпочтительного выбора редактора и терминала откройте этот каталог.

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

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

В этом проекте мы сохраним простую структуру. В корневом каталоге мы создадим каталоги dist, src и static.

  • dist - каталог, который содержит файлы распространения и будет размещен на внешнем хостинге, например, Google Firebase.
  • src - каталог, содержащий исходный код не созданного приложения, например файлы JS и Vue.
  • static - каталог содержит статические файлы, используемые в приложении. В процессе сборки эти файлы копируются в папку dist. Примеры файлов: изображения, значки, сторонние библиотеки, манифест PWA и сервис-воркер.

Кроме того, мы создадим каталог components внутри каталога src. Каталог компонентов содержит все отдельные виды компонентов, стили и логику, которые использует наше приложение.

Установка зависимостей NPM

Вторая задача перед настройкой - инициализировать наш проект с помощью NPM и установить зависимости.

Чтобы инициализировать наш проект с помощью NPM, в каталоге pwa-vue-app-1 выполните в терминале команду:

$ npm init

В процессе инициализации будет задано несколько вопросов о проекте. Для этой статьи значения по умолчанию подходят. После завершения создается файл package.json. Значения можно настроить позже из файла package.json.

После инициализации мы можем приступить к установке сборки и сторонних зависимостей. Для зависимостей сборки мы выполним следующую команду в корневом каталоге:

$ npm i -D @babel/core @babel/preset-env babel-loader clean-webpack-plugin copy-webpack-plugin css-loader html-webpack-plugin vue-loader vue-style-loader vue-template-compiler webpack webpack-cli webpack-dev-server

Зависимости сборки состоят из:

  • Preset-env Babel и Babel - используется для преобразования нового кода ECMAScript в версию с обратной совместимостью для поддержки старых браузеров.
  • Webpack, плагины и загрузчики Webpack - используются в качестве сборщика модулей.
  • Компилятор шаблонов Vue - предварительно компилирует наши шаблоны Vue в функции рендеринга, чтобы исключить компиляцию во время выполнения.

Затем сторонние зависимости, которые используются кодом приложения, будут установлены с помощью следующей команды в корневом каталоге:

$ npm i vue vue-router

Настройка Webpack

В корневом каталоге нашего проекта создайте файл с именем webpack.config.js и добавьте содержимое конфигурации, размещенной ниже. Это позволит нам создать и предварительно просмотреть наше приложение.

Я выделю несколько параметров, которые важно знать, но не охватит все детали конфигурации.

  • entry - это свойство, содержащее файлы, с которых запускается Webpack при объединении. В этом примере app.js в качестве нашей точки входа. Если имя или путь к файлу записи настроены, это свойство необходимо обновить. Вы можете увидеть эту опцию в строке 12 примера файла конфигурации.
entry: './src/app.js',
  • Плагин CleanWebpackPlugin используется для удаления каталога dist перед каждой сборкой, для удаления старых и неиспользуемых файлов. Вы можете увидеть эту опцию в строке 55 примера файла конфигурации.
new CleanWebpackPlugin(['dist']),
  • resolve.alias - свойство, упрощающее запись путей импорта. В этом примере добавлен псевдоним @, чтобы сократить путь к нашему исходному коду. Вы можете увидеть эту опцию в строке 50 примера файла конфигурации.
'@': path.resolve(__dirname, 'src')

Написание примера кода

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

index.html

Сначала создайте файл index.html в каталоге static с приведенным ниже содержимым.

В этом файле есть два важных момента.

  1. Элемент div внутри тела имеет идентификатор app. Инициализатор Vue использует этот идентификатор в качестве цели для рендеринга. Если идентификатор изменен, параметры инициализатора Vue также должны быть обновлены. Мы рассмотрим инициализатор в файле app.js.
  2. Теги скрипта для загрузки кода JavaScript приложения жестко не запрограммированы в этом файле. Этот файл используется HtmlWebpackPlugin в качестве шаблона в процессе сборки. Плагин автоматически вставляет теги сценария и помещает сгенерированный файл index.html в каталог dist.

app.js

В папке src создайте файл app.js и добавьте содержимое ниже.

Файл app.js - это файл записи нашего приложения, который инициализирует экземпляр нашего приложения Vue.

Во время создания экземпляра мы передаем целевой элемент, маршруты, доступные компоненты и шаблоны. Я остановлюсь на элементах и ​​вариантах маршрутизатора.

  • el - это строка селектора или элемент HTML для существующего элемента DOM. Приложение будет подключено к этому элементу. В нашем примере мы передали строку селектора #app. Как упоминалось ранее, если идентификатор в index.html был изменен, этот параметр также необходимо обновить.
  • router - это экземпляр VueRouter, который содержит сопоставление маршрутов с компонентами.

router.js

В папке src создайте файл router.js и добавьте содержимое ниже.

Этот файл содержит набор известных URL-маршрутов и сопоставлен с соответствующим компонентом. Мы также предоставили запасной компонент для неизвестных маршрутов. Это обрабатывает вариант использования «Страница не найдена».

App.vue

В папке src создайте файл App.vue и добавьте содержимое ниже.

Этот файл является базовым шаблоном приложения. Он состоит из router-link (ов) и одного router-view. После щелчка по ссылке router-link связанный компонент загружается в элемент router-view.

Страницы компонентов

Создайте следующие три файла в каталоге src/components/ с соответствующим содержимым. Эти файлы служат заполнителями, чтобы предоставить рабочий пример маршрутизации. Разница между этими файлами заключается в тексте и цвете заголовка.

  • src / components / Home.vue
  • src / components / Page1.vue
  • src / components / PageNotFound.vue

Предварительный просмотр и аудит для PWA в Chrome

Теперь, когда мы закончили добавление кода в проект, мы можем предварительно просмотреть и проверить приложение.

Чтобы сравнить свой код с рассмотренным материалом, вы можете просмотреть исходный код на GitHub.

Примечание.
Чтобы узнать о покрытых материалах до этого момента, обязательно просмотрите ветку no-pwa.



erisu / pwa-vue-app-1
Приложение PWA Vue 1. Участвуйте в разработке erisu / pwa-vue-app-1, создав учетную запись на GitHub. github.com



Чтобы предварительно просмотреть приложение, нам нужно сначала добавить сценарии NPM. В файле package.json обновите свойство scripts следующим образом:

"scripts": {
 "dev": "webpack-dev-server --progress"
},

Сценарий dev использует зависимость webpack-dev-server для запуска веб-сервера разработки.

Давайте проверим приложение, запустив команду npm run dev в корневом каталоге проекта. Он должен автоматически открыть в браузере по умолчанию https://localhost:9000. Если вам нужно изменить порт, вы можете изменить конфигурации сервера в файле webpack.config.js.

Сервер разработки Webpack идеально подходит для просмотра и тестирования кода приложения во время разработки!

Google Chrome - Lighthouse Audits

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

Одним из требований PWA является то, что приложение размещается и обслуживается по протоколу HTTPS с действующими сертификатами SSL. Мы настроили bpack-dev-server на использование самостоятельно назначенного сертификата, но он по-прежнему не соответствует требованиям PWA. Этот инструмент предназначен исключительно для разработки и тестирования, и в нем всегда будут отсутствовать функции и настройки, которые предоставляет готовый к работе веб-сервер.

Чтобы запустить Google Lighthouse для аудита, нам нужно открыть DevTools. Если вы пользователь Mac, вы можете использовать следующую команду быстрого доступа Command+Option+I. Если вы используете Window, вы можете нажать либо F12, либо Control+Shift+I. Затем щелкните вкладку Audits вверху. Вы должны увидеть что-то вроде этого:

Затем нажмите кнопку Run audits внизу и посмотрите, как она работает. После завершения аудита будут выявлены области, нуждающиеся в улучшении для получения более высокого балла PWA, а также производительность, доступность, передовые методы и поисковая оптимизация.

Сравнивая два скриншота выше, мы видим, что наше приложение на Firebase имеет более высокие показатели PWA, производительности и лучших практик, чем локально. Хостинг Firebase заботится о некоторых требованиях на стороне сервера, таких как перенаправление HTTP на HTTPS.

Ниже приведен список пунктов, в которых приложение не соответствовало требованиям для высокого балла PWA.

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

Реализация минимальных требований PWA

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

manifest.json

Сначала мы добавим файл manifest.json в каталог static со следующим содержимым:

Этот файл содержит необходимую информацию для установки на главный экран, создания настраиваемого экрана-заставки и сведения о приложении.

Затем добавьте в тег head файла index.html следующую строку:

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

Значок

В файле manifest.json мы определили значки наших приложений. В документации по основам веб-разработки Google рекомендуется использовать как значок 512 x 512 пикселей, так и значки 192 x 192 пикселей. Эти значки используются для главного экрана, уведомления об установке и настраиваемого экрана-заставки.

В этом примере я сделал значки в Photoshop и поместил их в каталог static. Вы можете получить мою отсюда:

Сервисный работник

Чтобы упростить создание нашего сервис-воркера для кеширования, мы будем использовать плагин Webpack sw-precache-webpack-plugin. Этот плагин автоматически создает файл сервис-воркера с коллекцией путей к файлам, которые были созданы Webpack.

  • Установить новую зависимость разработки

В корневом каталоге проекта запустите команду.

npm i -D sw-precache-webpack-plugin
  • Обновить webpack.config.js

Добавьте в верхнюю строку:

const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin')

Добавьте в массив опций plugins использование плагина:

new SWPrecacheWebpackPlugin({
  cacheId: 'my-pwa-vue-app',
  filename: 'service-worker-cache.js',
  staticFileGlobs: ['dist/**/*.{js,css}', '/'],
  minify: true,
  stripPrefix: 'dist/',
  dontCacheBustUrlsMatching: /\.\w{6}\./
})

Ниже плагин:

new CopyWebpackPlugin([{
  from: path.resolve(__dirname, 'static'),
  to: path.resolve(__dirname, 'dist'),
  toType: 'dir'
}]),

Добавление скрипта

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

Чтобы исправить это:

Откройте файл static/index.html и добавьте в строку элемента body:

<noscript>To run this application, JavaScript is required to be enabled.</noscript>

Установить фон адресной строки

Откройте файл static/index.html и добавьте в строку элемента head:

<meta name="theme-color" content="#FFFFFF" />

Второй аудит маяка

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

Чтобы сравнить код реализации PWA с рассмотренным материалом, вы можете просмотреть исходный код на GitHub.

Примечание. Текущий материал находится в ветке pwa.



erisu / pwa-vue-app-1
Приложение PWA Vue 1. Участвуйте в разработке erisu / pwa-vue-app-1, создав учетную запись на GitHub. github.com



Заключение

Как видите, создать проект PWA с помощью фреймворка Vue.js очень просто. Первоначальная настройка рабочего пространства, зависимостей и конфигураций сборки занимает всего пару минут нашего времени, а после этого - весь код приложения.

Кроме того, с помощью системы аудита Google Lighthouse мы можем периодически тестировать наше приложение, чтобы выявить области, требующие внимания, и получить доступ к ресурсам, которые подробно объясняют каждую проблему и возможные решения.

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

Надеюсь, вы найдете это полезным и станет отличной отправной точкой для вашего первого проекта PWA.

Обновление 2019/09/02: все зависимости и связанные webpack конфигурации в примере проекта были обновлены. Это включало использование последней версии vue и vue-router.