PWA - это сочетание традиционных веб-сайтов и мобильных приложений. Они создаются с использованием традиционных веб-технологий, таких как HTML, CSS, JavaScript, с использованием некоторых современных методов, таких как манифест веб-приложения и сервис-воркеры, в результате чего они действуют как собственное приложение. По данным pwastats.com, компании, перешедшие на PWA, получили больше активных пользователей, коэффициент конверсии и время взаимодействия с ними резко увеличились. Было обнаружено, что PWA повышают производительность почти на 100%. Так что превратить свой веб-сайт в PWA - определенно хорошая идея. В этой статье я расскажу, как этого добиться.
Процесс преобразования включает всего два шага после того, как у вас есть адаптивный веб-сайт, вам просто нужно добавить файлы menifest.json и service worker. Теперь давайте углубимся в эти два файла.
Манифест веб-приложения
Это простой файл JSON, содержащий метаданные о вашем приложении. Этот файл имеет следующие свойства.
name: название приложения.
short_name: имя, которое будет отображаться, когда пространство ограничено
start_url: начальная точка приложения. В нашем случае мы поставим «.», поэтому, когда пользователь запускает приложение, оно будет запускаться из корня документа.
scope: набор URL-адресов для навигации по вашему приложению.
значки: здесь вы можете определить набор массивов, содержащих информацию о значках, такую как URL-адрес, размер и тип.
theme_color: определяет цвет заголовка.
background_color: цвет заставки при запуске приложения.
display: сообщает системе, как она должна отображать ваше приложение. Доступные значения: автономный, минимальный интерфейс, полноэкранный режим. Наиболее предпочтительное значение - автономный, при этом панель URL-адреса вверху будет скрыта.
Вам необходимо создать файл manifest.json в корневой папке и заполнить информацию, как показано ниже.
{
"name": "My first PWA", "short_name": "PWA", "start_url": ".", "scope": "./", "icons": [ { "src": "icon.png", "sizes": "192x192", "type": "image/png" }, { "src": "icon.png", "sizes": "512x512", "type": "image/png" } ], "theme_color": "#fff", "background_color": "#333", "display": "standalone" }
После создания файла вам необходимо включить тег ссылки в файл index.html, как показано ниже.
<link rel="manifest" href="manifest.json">
Теперь ваш сайт можно установить на устройство. Следующим шагом будет добавление сервис-воркера, который сделает наше приложение более мощным.
Сервисный работник
Это файл javascript, содержащий сценарии, которые выполняются в фоновом режиме в другом потоке. Он отвечает за кеширование, обработку сетевых запросов, поддержку в автономном режиме, push-уведомления.
Чтобы реализовать сервис-воркер, нам нужно выполнить три шага, указанные ниже:
Зарегистрироваться
Браузер должен проверить, доступны ли сервис-воркеры. Затем, чтобы зарегистрировать нашего сервис-воркера, нам нужно написать следующий код в ourapp.js.
if (navigator.serviceWorker.controller){
console.log("Service worker found")
}
else {
navigator.serviceWorker.register(‘/serviceWorker.js
’)
.then(reg => console.log(‘Successfully Registered’))
.catch(err => console.log(‘Can't Register’, err));
}
В приведенном выше коде первая строка проверяет, существует ли свойство serviceworker в навигаторе или нет, если да, нет необходимости регистрировать новое. Если его не существует, нам нужно зарегистрировать его, вызвав метод register, который вызовет наш service-worker.js
файл.
Установить
Теперь создайте новый файл как serviceWorker.js
добавьте следующие строки. Здесь мы напишем код для установки нашего сервис-воркера, а также увидим, как кэшировать файлы для офлайн-поддержки.
let MY_CACHE = 'my-cache' let filesToCache = [ 'scripts/index.js', 'css/style.css', 'assets/images/' ] self.addEventListener("install", (event) => { event.waitUntil( caches.open(MY_CACHE) .then( (cache) => { console.log('Opened cache') return cache.addAll(urlsToCache) }) .then(() =>{ console.log("Install completed") }) ) })
В приведенном выше коде MY_CACHE - это переменная, используемая для открытия кеша. filesToCache - это список файлов, которые вы хотите кэшировать. caches.open
принимает MY_CACHE в качестве аргумента, он возвращает обещание. После открытия кеш cache.addAll
забирает все файлы, которые должны быть доступны офлайн.
Получить
Событие Fetch используется для операций с кешированными файлами. В приведенном ниже коде показано, есть ли у нас уже кэшированные файлы, тогда они будут немедленно возвращены из кеша, и нет необходимости загружать их из сети. в противном случае мы получим их из сети.
self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request) .then( cacheRes => { return cacheRes || fetch(evt.request) } ) ); });
В приведенном выше коде метод responseWith возвращает обещание, которое преобразуется в запись кэша, соответствующую запросу. Но этот код рекомендуется только для статического контента. Для динамического контента нам нужно изменить код, как показано ниже.
let MY_CACHE = 'my-cache-v1'; let MY_DYNAMIC_CACHE = 'my-dynamic-cache-v1' self.addEventListener('activate', event => { event.waitUntil( caches.keys().then(keys => { return Promise.all(keys .filter(key => key !== MY_CACHE) .map(key => caches.delete(key)) ); }) ); }); self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request).then(cacheRes => { return cacheRes || fetch(event.request) .then(fetchRes => { return caches.open(MY_DYNAMIC_CACHE).then(cache => { cache.put(event.request.url, fetchRes.clone()); return fetchRes; }) }); }) ); });
Чтобы сделать кеширование динамическим, нам нужно изменить имя кеша. Так что для нас было бы проще, если бы мы предоставили имя версии в нашем кеше таким образом, нам просто нужно изменить версию перед внесением изменений.
Нам нужно удалить все старые кеши, для этого у нас есть caches.keys
method, который возвращает ключи предыдущих кешей. После получения этих ключей мы можем выполнять операции по их удалению.
Затем, если какой-либо файл отсутствует в кеше, мы делаем запрос на его получение с сервера. Получив ресурс в качестве ответа, мы его кешируем. На этот раз мы не можем использовать метод addAll
, потому что этот метод кэширует ресурсы, поступившие с сервера напрямую, но здесь мы уже получили ресурс с помощью fetch(event.request)
method, теперь нам просто нужно кэшировать ресурс, который он вернул. Итак, в этом случае мы можем использовать метод cache.put()
, он берет URL-адрес, в который мы помещаем ресурсы, и сам ресурс.
Это все, что вам нужно сделать для PWA. Это очень просто, но эффективно для современных веб-сайтов. Надеюсь, вам понравился этот урок, и вы сочли его полезным. Если у вас есть вопросы, оставьте их в разделе комментариев.
Не стесняйтесь обращаться ко мне по адресу [email protected].