Вам нужно родное приложение. Об этом нам неоднократно говорили с тех пор, как Apple впервые анонсировала iPhone App Store. И, возможно, вы делаете. Родные приложения могут иметь смысл, в зависимости от размера организации и потребностей.
Но как насчет потенциальных клиентов, у которых нет вашего приложения? Или текущие клиенты на настольном компьютере? А как насчет людей с ограниченным пространством на своих телефонах, которые удаляют приложения, чтобы освободить место для других вещей? Каков их опыт?
Именно здесь блестят прогрессивные веб-приложения (иногда их называют PWA). Они сочетают в себе лучшие функции Интернета с возможностями, ранее доступными только для собственных приложений. Прогрессивные веб-приложения можно запустить с помощью значка на домашнем экране или в ответ на push-уведомление. Они загружаются практически мгновенно и могут быть созданы для работы в автономном режиме.
Лучше всего то, что Progressive Web Apps просто работают. Они являются улучшением вашего сайта. Никому не нужно ничего устанавливать для использования Progressive Web App. При первом посещении вашего веб-сайта функции PWA становятся доступны сразу — никаких магазинов приложений (если вы их не хотите). Нет привратников. Нет барьеров.
Вам также может понравиться:
Разработка PWA с использованием Angular 7 .
Требования
Чтобы начать с этого урока, вы должны установить следующее:
-
Стабильный узел версии 8.9 или выше ( https: // nodejs.org/en/download/ ).
-
Пряжа ( https://yarnpkg.com )
-
Git .
В качестве отправной точки для учебника клонируйте этот репозиторий Github:
Оболочка
xxxxxxxxxx
1
git clone https://github.com/petereijgermans11/progressive-web-app
затем перейдите в следующий каталог:
Оболочка
xxxxxxxxxx
1
cd pwa-article/pwa-app-manifest-init
и установите зависимости через:
Оболочка
xxxxxxxxxx
1
npm i && npm start
Откройте ваше приложение на:
http: // localhost: 8080
Каковы технические компоненты PWA?
PWA имеет три важных технических компонента, которые работают вместе, в том числе:
Файл манифеста, Service Worker и PWA должны работать под https.
Файл манифеста
Файл манифеста — это JSON-файл конфигурации, который содержит информацию из вашего PWA, такую как значок, который появляется на начальном экране, когда он установлен, краткое имя веб-приложения или цвет фона. Если файл манифеста присутствует, Chrome автоматически активирует баннер для установки веб-приложения (кнопка «Добавить на главный экран»). Если пользователь соглашается, значок будет добавлен на домашний экран, и PWA будет установлен.
Создать Manifest.json
Файл Manifest.json для PWA выглядит следующим образом:
JSON
xxxxxxxxxx
1
{
2
"name": "Progressive Selfies",
3
"short_name": "PWA Selfies",
4
"icons": [
5
{
6
"src": "/src/images/icons/app-icon-192x192.png",
7
"type": "image/png",
8
"sizes": "192x192"
9
},
10
{
11
"src": "/src/images/icons/app-icon-512x512.png",
12
"type": "image/png",
13
"sizes": "512x512"
14
}
15
],
16
"start_url": "/index.html",
17
"scope": ".",
18
"display": "standalone",
19
"background_color": "#fff",
20
"theme_color": "#3f51b5"
21
}
Расскажите браузеру о своем манифесте
Создайте файл Manifest.json на том же уровне, что и ваш файл index.html .
Создав манифест, добавьте тег link в ваш index.html (между другими тегами links).
HTML
xxxxxxxxxx
1
<link rel=”manifest” href=”/manifest.json”>
Манифест Недвижимость
Вы должны как минимум указать свойство, краткое имя или имя . Короткое имя используется на домашнем экране пользователя. Имя используется в приглашении установки приложения. Когда пользователь добавляет ваш PWA на свой домашний экран, вы можете определить набор значков, которые должен использовать браузер.
Эти значки используются в таких местах, как домашний экран и панель запуска приложений. Свойство start_url сообщает браузеру, где следует запустить приложение. Область действия определяет набор URL-адресов, которые браузер считает находящимися в вашем приложении, и используется для определения того, когда пользователь покинул приложение, и должен быть возвращен обратно на вкладку браузера. Ваше свойство start_url должно находиться в области видимости. Свойство display указывает следующие режимы отображения:
- Полноэкранный режим: все доступное пространство используется для приложения.
- Автономное приложение: приложение имеет внешний вид автономного приложения.
Свойство background_color используется на заставке при запуске приложения.
С этого момента кнопка «Добавить на главный экран» еще не работает. Но вы уже можете экспериментировать с файлом Manifest. В настоящее время существуют различные инструменты, с помощью которых вы можете создать свой файл манифеста, такие как https://app-Manifest.firebaseapp.com/ ..
Добавьте манифест в ваше приложение
Создайте свой собственный манифест и разместите его на том же уровне, что и файл index.html . Проверьте инструменты разработчика Chrome и посмотрите, активен ли ваш манифест. Щелкните правой кнопкой мыши на главной странице приложения Progressive Selfies и выберите « Осмотреть ». Выберите вкладку « Приложение » и выберите « Манифест ». Перезагрузите сервер npm start при необходимости.
Что такое сервисный работник?
Service Worker (SW) — это просто фрагмент JavaScript, который работает как прокси между браузером и сетью. ПО поддерживает push-уведомления, фоновую синхронизацию, кэширование и т. Д. Основная функция, обсуждаемая в этом руководстве, позволяет PWA перехватывать и обрабатывать сетевые запросы, в том числе программно управлять кэшем ответов.
Причина, по которой этот восхитительный API-интерфейс является настолько привлекательным, заключается в том, что он позволяет поддерживать работу в автономном режиме, используя преимущества кэша, предоставляя разработчикам полный контроль над пользовательским интерфейсом.
Сервисный рабочий жизненный цикл
С помощью сервисных работников следующие шаги предпринимаются для базовой настройки:
- Зарегистрируйте свое ПО. Вы должны сначала зарегистрировать это. Если программное обеспечение зарегистрировано, браузер автоматически запускает установку на основе события установки .
- Когда ПО установлено, оно получает событие активации . Это событие активации можно использовать для очистки ресурсов, использовавшихся в более ранних версиях ПО.
Для ПО создайте пустой файл с именем sw.js на том же уровне, что и ваш файл index.html . А в файле index.html добавьте базовый тег (между другими тегами ссылок в разделе <head> ). Это базовый URL для всех ваших относительных ссылок в вашем приложении:
HTML
xxxxxxxxxx
1
<base href=”/”>
Наконец, добавьте код ниже в src / js / app.js, чтобы зарегистрировать SW. Этот код активируется при « загрузке » первой страницы.
Этот код проверяет, доступен ли API SW в свойстве навигатора объекта окна. Объект window представляет окно браузера. (Javascript и свойство navigator являются частью объекта window.). Если ПО доступно в навигаторе, ПО регистрируется сразу после загрузки страницы.
Теперь вы можете проверить, включено ли ПО в Инструментах разработчика Chrome на вкладке Приложение -> Сервисные работники . Обновите страницу для этого!
JavaScript
x
1
window.addEventListener('load', () => {
2
const base = document.querySelector('base');
3
let baseUrl = base && base.href || '';
4
if (!baseUrl.endsWith('/')) {
5
baseUrl = `${baseUrl}/`;
6
}
7
8
if ('serviceWorker' in navigator) {
9
navigator.serviceWorker.register(`${baseUrl}sw.js`)
10
.then( registration => {
11
// Registration was successful
12
console.log('ServiceWorker registration successful with scope: ', registration.scope);
13
})
14
.catch(err => {
15
// registration failed 🙁
16
console.log('ServiceWorker registration failed: ', err);
17
});
18
}
19
});
Почему я не могу зарегистрировать своего сервисного работника?
Это может произойти по нескольким причинам:
- Ваше приложение не может работать под HTTPS. Во время разработки вы можете использовать SW через localhost . Но, если вы развернете его на сайте, вам потребуется настройка HTTPS.
- Путь SW неверен.
- Обновление при перезагрузке должно быть проверено во время разработки!
Мероприятия для обслуживающего персонала
Помимо установки и активации у нас есть событие обмена сообщениями . Это событие происходит, когда сообщение получено от другого скрипта в веб-приложении. Выборки событие срабатывает , когда страница вашего сайта требуется сетевой ресурс. Это может быть новая страница, JSON API, изображение, файл CSS и т. Д.
Толчок
событие вызывается Push API , когда новый толчок событие поступает от внутреннего интерфейса.
Добавьте следующий код в ваше ПО для прослушивания событий жизненного цикла (установите и активируйте):
JavaScript
xxxxxxxxxx
1
self.addEventListener('install', event => {
2
console.log('[Service Worker] Installing Service Worker ...', event);
3
event.waitUntil(self.skipWaiting());
4
});
5
self.addEventListener('activate', event => {
7
console.log('[Service Worker] Activating Service Worker ...', event);
8
return self.clients.claim();
9
});
installОбратный вызов вызов skipWaiting()функции , чтобы вызвать activateсобытие и сообщить службу работнику , чтобы приступить к работе немедленно , не дожидаясь пользователя для навигации или перезагрузить страницу.
В skipWaiting()функции прижимает ожидания Service Worker стать активным Service Worker. Эту self.skipWaiting()функцию также можно использовать вместе с self.clients.claim()функцией, чтобы гарантировать, что обновления базового Service Worker вступают в силу немедленно.
В этом контексте собственное свойство представляет объект окна (т.е. окно вашего браузера).
Кнопка «Добавить на главный экран»
Кнопка «Добавить на главный экран» позволяет пользователю установить PWA на свое устройство. Для фактической установки PWA с помощью этой кнопки необходимо определить обработчик событий выборки в SW. Давайте исправим , что в sw.js .
JavaScript
xxxxxxxxxx
1
self.addEventListener('fetch', event => {
2
console.log('[Service Worker] Fetching something ....', event);
3
// This fixes a weird bug in Chrome when you open the Developer Tools
5
if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin') {
6
return;
7
}
8
event.respondWith(fetch(event.request));
10
});
Проверьте обновление при перезагрузке , отмените регистрацию вашего ПО в инструментах Chrome Dev и обновите экран. Перейдите к своему PWA (на локальном хосте: 8080), нажмите кнопку «Настроить» в Chrome и выберите « Установить Progressive Selfies ....»
После этого отображается « установить баннер ».
Сервисный работник, кэширующий
Сила сервисных работников заключается в их способности перехватывать HTTP-запросы. На этом этапе мы используем эту опцию для перехвата HTTP-запросов и ответов, чтобы предоставить пользователям молниеносный ответ прямо из кэша.
Precaching во время установки рабочего сервиса
Когда пользователь заходит на ваш сайт в первый раз, ПО начинает устанавливать себя. На этом этапе установки вы можете заполнить кэш всеми страницами, сценариями и файлами стилей, которые использует PWA. Заполните файл sw.js следующим образом:
JavaScript
xxxxxxxxxx
1
const CACHE_STATIC_NAME = 'static';
2
const URLS_TO_PRECACHE = [
3
'/',
4
'index.html',
5
'src/js/app.js',
6
'src/js/feed.js',
7
'src/lib/material.min.js',
8
'src/css/app.css',
9
'src/css/feed.css',
10
'src/images/main-image.jpg',
11
'https://fonts.googleapis.com/css?family=Roboto:400,700',
12
'https://fonts.googleapis.com/icon?family=Material+Icons',
13
];
14
self.addEventListener('install', event => {
16
console.log('[Service Worker] Installing Service Worker ...', event);
17
event.waitUntil(
18
caches.open(CACHE_STATIC_NAME)
19
.then(cache => {
20
console.log('[Service Worker] Precaching App Shell');
21
cache.addAll(URLS_TO_PRECACHE);
22
})
23
.then(() => {
24
console.log('[ServiceWorker] Skip waiting on install');
25
return self.skipWaiting();
26
})
27
);
28
});
Этот код использует событие установки и добавляет массив URLS_TO_PRECACHEфайлов на этом этапе. Вы можете видеть, что как только кеш открыт ( caches.open), вы можете добавлять файлы, используя cache.addAll(). В event.waitUntil()методе используется JavaScript обещают знать , сколько времени занимает установка и удалось ли.
Событие установки вызывает self.skipWaiting() активацию ПО напрямую. Если все файлы были успешно кэшированы, ПО будет установлено. Если один из файлов не может быть загружен, этап установки завершается неудачно. В Chrome Developer Tools вы можете проверить, заполнен ли кэш (в Cache Storage) статическими файлами из URLS_TO_PRECACHEмассива.
Но, если вы посмотрите на Networkвкладку (даже после обновления), файлы по-прежнему выбираются по сети. Причина в том, что кэш заполнен и готов к работе, но мы не читаем из него ресурсы. Для этого нам нужно добавить код в следующем листинге нашему сервисному работнику, чтобы начать прослушивание существующего события извлечения .
JavaScript
xxxxxxxxxx
1
self.addEventListener('fetch', event => {
2
console.log('[Service Worker] Fetching something ....', event);
3
event.respondWith(
5
caches.match(event.request)
6
.then(response => {
7
if (response) {
8
console.log(response);
9
return response;
10
}
11
return fetch(event.request);
13
})
14
);
15
});
Мы проверяем, соответствует ли входящий URL-адрес чему-либо, что может существовать в нашем текущем кэше, используя caches.match()функцию. Если это так, мы возвращаем этот кэшированный ресурс, но если ресурс не существует в кэше, мы продолжаем в обычном режиме и выбираем запрошенный ресурс.
После установки и активации Service Worker обновите страницу и Networkснова проверьте вкладку. Сервисный работник теперь перехватывает HTTP-запрос и мгновенно загружает соответствующие ресурсы из кеша, а не отправляет сетевой запрос на сервер.
Теперь, если мы установим Offlineрежим на Networkвкладке, наше кэшированное приложение будет выглядеть так:
Background Fetch
Background Fetch API - это фоновая функция SW, которая позволяет загружать большие файлы, фильмы, подкасты и т. Д. В фоновом режиме. Во время извлечения / передачи ваш пользователь может закрыть вкладку или даже закрыть весь браузер.
Это не остановит передачу. После повторного открытия браузера передача возобновится. Этот API также может работать с плохой доступностью. Ход передачи может быть показан пользователю, и пользователь может отменить или приостановить этот процесс.
Наконец, ваш PWA имеет доступ к данным / источникам, которые были получены.
Экспериментальные возможности веб-платформы
Фоновая выборка работает, если вы включили « Экспериментальные функции веб-платформы » через URL:
Ниже приведен пример того, как реализовать такую фоновую выборку.
Добавьте эту кнопку с идентификатором «bgFetchButton» в файл index.html (среди других кнопок в заголовке).
HTML
xxxxxxxxxx
1
<button id=”bgFetchButton”>Store assets locally</button>
Затем добавьте код для выполнения Background Fetch в ваш app.js в обработчике события загрузки :
JavaScript
xxxxxxxxxx
1
window.addEventListener(‘load’, () => {
2
3
bgFetchButton = document.querySelector(‘#bgFetchButton’);
4
bgFetchButton.addEventListener(‘click’, async event => {
5
try {
6
const registration = await navigator.serviceWorker.ready;
7
registration.backgroundFetch.fetch(‘my-fetch’, [new Request(`${baseUrl}src/images/main-image-lg.jpg`)]);
8
} catch (err) {
9
console.error(err);
10
}
11
});
12
...
13
});
Приведенный выше код выполняет Фоновую выборку при следующих условиях:
- Пользователь нажимает на кнопку с идентификатором
bgFetchButton( событие onClick исчезнет) - SW должен быть зарегистрирован.
Эта проверка и Фоновая выборка происходят внутри асинхронной функции, потому что этот процесс должен выполняться асинхронно, не блокируя пользователя.
Заполните кеш в sw.js
JavaScript
xxxxxxxxxx
1
self.addEventListener(‘backgroundfetchsuccess’, event => {
2
console.log(‘[Service Worker]: Background Fetch Success’, event.registration); event.waitUntil(
3
(async function() {
4
try {
5
// Iterating the records to populate the cache
6
const cache = await caches.open(event.registration.id); const records = await event.registration.matchAll(); const promises = records.map(async record => {
7
const response = await record.responseReady;
8
await cache.put(record.request, response);
9
});
10
await Promise.all(promises);
11
} catch (err) {
12
console.log(‘[Service Worker]: Caching error’);
13
}
14
})()
15
);
16
});
Этот код состоит из следующих шагов:
- По завершении извлечения Background Fetch ваш SW получит событие успеха Background Fetch.
- Создайте и откройте новый кэш с тем же именем, что и registration.id.
- Получить все записи через
registration.matchAll(). - Создайте массив асинхронным способом с обещаниями, просматривая записи. Подождите, пока записи с ответами не будут готовы, а затем сохраните эти ответы в кеше с помощью
cache.put()(см. Хранилище кэша на вкладке «Приложение»). - Наконец, выполните все обещания, до конца
Promise.all().
Заключение
После этого вступления вы можете продолжить изучение обширного учебного пособия, которое можно найти по адресу : https://github.com/petereijgermans11/progressive-web-app/tree / master / pwa-workshop . В этом руководстве рассматриваются такие вопросы, как создание программного обеспечения с помощью Workbox, стратегии кэширования, веб-push-уведомлений и фоновая синхронизация с API IndexedDB и различными другими новыми веб-API.