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.
Подписывайтесь
Для получения уведомлений о новых публикациях — подписывайтесь на мой блог или страницы в соц. сетях: Twitter, Facebook.