Progressive Web App – от А до Я: что это? Как создать прогрессивное веб приложение?

Progressive Web App – это веб приложение, которое обладает рядом преимуществ, использует передовые возможности браузеров, и может быть добавлено как ярлык на ваш рабочий стол. Его поведение в целом напоминает нативные приложения.

В этом уроке мы будем рассматривать все моменты которые стоить знать о Progressive Web App (дальше PWA). Шаг за шагом, с примерами кода и демо приложением. Как пример, мы будем создавать приложение для создания селфи.

Progressive Web App – что это?

В своей сущности, PWA ничем не отличается от привычных веб сайтов. Прогрессивное веб приложение также создано используя HTML, CSS, JavaScript. Оно легко открывается в браузере. Что отличает PWA от сайта? Мы рассмотрим концепцию из 10 ключевых моментов. Вот эти пункты, взяты из ресурса Google Developers.

Безопасность — PWA должен быть создан на основании HTTPS протокола, чтобы избежать утечек данных.
Прогрессивность — Рабочее для каждого пользователя и платформы. Так как каждый современный браузер, способен запускать такие приложения.
Резиновый дизайн (responsive) – должно помещаться на дисплей любого устройства: десктоп, мобильный, планшет и все что появится в будущем.
Независимое от подключения к интернету — такое приложение оборудуется специальным обработчиком (Service Worker), который способствует работе приложения без подключения к сети или на низкой скорости передачи данных.
Визуально похожее на приложение — PWA должно быть стилизованно как приложения привычные для пользователя. Все кнопки, навигация, сообразны с типичной моделью приложений.
Обновляемое — благодаря вышеупомянутому Service Worker, наше приложение будет обновляться.
Идентифицируемое — приложение будет определятся браузерами благодаря стандартизации (W3C манифесту), а также Service Worker. Поисковики смогут видеть и находить ваше приложение.
Вовлекаемое — вы сможете создавать push уведомления, которые будут возвращать пользователя в приложение.
Устанавливаемое — позволяет пользователю сохранять все полезные для него приложения на главный экран мобильного, без перехода в Play Market и App Store.
Имеет URL – вы сможете с легкостью поделиться приложением, просто переслав URL другому человеку.

Следуя этим указаниям убедитесь, что ваше приложение работает хорошо не только в браузере но и без участия интернета, запущенное через ярлычок. Может показаться, что все сложно и слишком много требований от Google. Не отчаивайтесь, мы объясним все требования одно за другим ниже.

Чем Progressive Web App НЕ является?

Концепция прогрессивного веб приложения ничем не связанна с следующими платформами:

Cordoba приложения
React Native
NativeScript
Electron и NW.js

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

PWA не потребуют инсталляции и не доступны Google Play Market и Apple Store (на данный момент). Чтобы установить PWA вам нужно посетить сайт, затем просто сохранить ярлык на рабочий стол.

Безопасность

Большинство прогрессивных веб приложений работают с нативыми API и сервисами. Это технологии которые работают с трепетными данными и должны обрабатываться осторожно. Вот почему PWA должно быть предоставлено через HTTPS протокол.

Если вы не имеете возможности запустить сервер с SSL сертификатом, вы можете использовать страницы GitHub и аналогичные сайты. Любой репозиторий GitHub доступен по HTTPS и может быть использован бесплатно для публичного доступа.

Для тестов приложения на локальном сервере, можно использовать Ngrok. Это не сложный инструмент, который создает тоннель соединения через публичный безопасный URL. Ngrok бесплатный и совместим с Windows, Mac, Linux.

Прогрессивность

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

Для примера, в нашем селфи приложении мы используем метод getUserMedia() чтобы получить доступ к камере устройства. Поддержка такового не доступна во всех браузерах — Safari не поддерживает это вообще, другие браузеры требуют префиксы.

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

navigator.getMedia = ( 
    navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia ||
    navigator.msGetUserMedia
);

Мы также покажем ошибку, если никакой из префиксов не сработал:

if (!navigator.getMedia) {
    displayErrorMessage("Your browser doesn't have support for the navigator.getUserMedia interface.");
}
else {
    // Use Camera API
}

Такой подход должен быть предоставлен везде в коде приложения. Также это касается HTML и CSS кода.

Резиновый дизайн (Responsive)

Приложение должно выглядеть красиво, не важно на каком устройстве оно запущено. В нашем случае UI весьма простой. Поэтому мы использовали несколько media запросов, чтобы управлять размером шрифта, отступами и т. д.

Вы можете использовать привычные всем библиотеки и фреймверки, такие как Bootstrap. Так как это упростит вам создание сеток, изменение размеров шрифтов и вообще упростит создание резинового дизайна.

Независимое от подключения к интернету

Это один из ключевых принципов. Используя Service Worker API, вы сможете сделать приложение работоспособным без подключения к интернету.

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

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

Внимание! Это приблизительный пример использования Service Worker. Пользуйтесь этим API осторожно, особенно в коммерческих проэктах.

Прежде всего создадим отдельный JS файл и опишем всю логику в нем:

sw.js

// Install the service worker.
this.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open('v1').then(function(cache) {
            // The cache will fail if any of these resources can't be saved.
            return cache.addAll([
                // Path is relative to the origin, not the app directory.
                '/pwa-photobooth/',
                '/pwa-photobooth/index.html',
                '/pwa-photobooth/assets/css/styles.css',
                '/pwa-photobooth/assets/fonts/MaterialIcons-Regular.woff2',
                '/pwa-photobooth/assets/js/script.js',
                '/pwa-photobooth/assets/icons/ic-face.png',
                '/pwa-photobooth/assets/icons/ic-face-large.png',
                '/pwa-photobooth/manifest.json'
            ])
            .then(function() {
                console.log('Success! App is available offline!');
            })
        })
    );
});

// Define what happens when a resource is requested.
// For our app we do a Cache-first approach.
self.addEventListener('fetch', function(event) {
    event.respondWith(
        // Try the cache.
        caches.match(event.request)
        .then(function(response) {
            // Fallback to network if resource not stored in cache.
            return response || fetch(event.request);
        })
    );
});

Затем нужно связать service worker с нашим HTML.

index.html

<script>
// Register Service Worker.

if ('serviceWorker' in navigator) {
    // Path is relative to the origin, not project root.
    navigator.serviceWorker.register('/pwa-photobooth/sw.js')
    .then(function(reg) {
        console.log('Registration succeeded. Scope is ' + reg.scope);
    })
    .catch(function(error) {
        console.error('Registration failed with ' + error);
    });
}
</script>

Теперь все необходимые файлы проекта будут сохранены браузером на устройство. Все JS переменные и обьекты также должны быть сохранены в localStorage или IndexDB, по возможности.

На данный момент Service Worker поддерживается Chrome, FireFox, и Opera. Safari и Edge работают над поддержкой, и мы надеемся что в ближайшем будущем это будет кроссбраузерное API.

Визуально похожее на приложение

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

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

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

Обновляемое

Однажды закэшированное приложение, всегда будет загружаться из кэша. Хотя, если мы обновим наш sw.js, то в следующий раз, все файлы должны обновиться и новая версия будет сохранена на устройство.

this.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open('v1.0.1').then(function(cache) {
            // ...
        })
    );
});

Используя ServiceWorker мы можем обновлять реурсы, удалять из кэша старые, или поменять всю логику работы приложения. Изучайте больше методов Service Worker.

Идентифицируемое

Добавив Web Manifest в наше приложение, мы можем предоставить много информации о нашем приложении. Также в нем описано некое поведение приложения. Он позволяет сохранять приложение с вашим ярлычком, и запускать его в новой вкладке браузера. Это полезные вещи.

Web Manifest это привычный JSON файл с руководствами:

manifest.json

{
  "name": "Progressive Web App: PhotoBooth",
  "short_name": "PhotoBooth",
  "description": "Simple Progressive Web App for taking selfies.",
  "icons": [{
      "src": "assets/icons/ic-face.png",
      "type": "image/png",
      "sizes": "72x72"
    }, {
      "src": "assets/icons/ic-face-large.png",
      "type": "image/png",
      "sizes": "144x144 256x256" 
    }],
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#fff",
  "theme_color": "#fff",
  "orientation": "portrait"
}

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

Shortname – название нашего приложение, которое будет показано снизу ярлычка.
Icons – массив иконок с разными размерами
Display – определяет каким образом будет запускаться приложение. Мы выбрали standalone, чтобы запустить приложение без вспомогательной навигации и всяких меню браузера. Также приложение будет показано как отдельное в свернутой панели задач.

Чтобы зарегистрировать манифест, нам нужно всего лишь сослаться на него из HTML

<!-- Web Manifest -->
<link rel="manifest" href="manifest.json">

Safari все еще не поддерживает web manifest, но мы можем добавить специальный мета тег, чтобы определял поведение приложения.

<!-- Meta tag for app-like behaviour in iOS -->
<meta name=”apple-mobile-web-app-capable” content=”yes”>

Вовлекаемое

Push сообщения больше не ограничиваются в привычных приложениях. Благодаря Service Worker и Push API, веб приложения также могут рассылать уведомления в Android. Не всем пользователям это нравится, но это весьма полезная вещь для соответствующих приложений.

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

Google Developers, Push Notifications: Timely, Relevant, and Precise
Google Developers, Push Notifications on the Open Web
MDN, Using the Push API
Push.js, Library that provides a cleaner API for handling push notifications

Устанавливаемое

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

К счастью, есть способ быстрой установки приложения. У пользователя появится Pop-Up окно, с предложением сохранить приложение. Чтобы предотвратить надоедание всплывающими окнами, не существует ручного управления функцией. Но, такое окно будет появятся автоматически, если:

Существует валидный Web Manifest
Существует валидный Service Worker
Приложение запускается по безопасному протоколу HTTPS

Мы все это реализовали в нашем демо, поэтому пользователи будут видеть вот такое уведомление на дисплее.

Весь процесс инсталляции приложение происходит через это окно.

Имеет свой URL

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

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

В заключение

Наше PWA теперь готово. Мы можем тестировать его и смотреть рекомендации по улучшению. Для этого есть специальный инструмент от Google, - Lighthouse.

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

Вот и все! Пишите свои вопросы, идеи, замечания в комментариях ниже!

Демо

Скачать исходники (0.05 Mb.)

Источник материала ...

Дальше: jQuery валидация форм и полей в реальном времени

Дискуссия по теме 0 Комментариев

Добавить комментарий

Просмотров: 1335