Введение
Прогрессивные веб-приложения (PWA) — это современный подход к веб-разработке, который позволяет создавать привлекательные и интерактивные веб-приложения, работающие как в сети, так и в автономном режиме. PWA сочетают в себе лучшее из веб-приложений и нативных приложений, обеспечивая удобство работы пользователей на разных устройствах. В этом подробном руководстве мы проведем вас через процесс создания PWA с использованием JavaScript, охватив основные технологии и концепции, которые вам необходимо знать.
Что такое прогрессивные веб-приложения?
Прогрессивные веб-приложения – это веб-приложения, в которых используются современные веб-технологии для обеспечения нативного взаимодействия с приложениями. PWA имеют три основные характеристики:
- Надежность. Они быстро загружаются и работают в автономном режиме или в медленных сетях благодаря Service Workers.
- Быстро. Они отличаются высокой скоростью отклика и производительностью, обеспечивая удобство работы пользователей.
- Привлекательность. Они напоминают нативные приложения с такими функциями, как push-уведомления, установка на главный экран и полноэкранный режим.
Ключевые особенности PWA
Некоторые важные функции PWA включают в себя:
- Манифест приложения. Файл JSON, содержащий метаданные о приложении, что позволяет установить его на главный экран устройства.
- Service Workers: файлы JavaScript, работающие в фоновом режиме, перехватывающие сетевые запросы и управляющие кэшированием.
- Кэширование. Локальное хранение файлов для обеспечения автономной работы и повышения производительности.
- Push-уведомления. Привлекайте пользователей своевременными уведомлениями, даже когда приложение не запущено.
Настройка проекта
Во-первых, давайте создадим новый каталог для нашего проекта и инициализируем его с помощью npm:
mkdir pwa-example cd pwa-example npm init -y
Затем создайте файлы index.html, main.js и style.css в каталоге проекта. На данный момент вы можете добавить в эти файлы некоторый базовый контент.
Создание манифеста приложения
Создайте новый файл с именем manifest.json в каталоге вашего проекта и добавьте следующее содержимое:
{
"name": "PWA Example",
"short_name": "PWA",
"description": "A simple Progressive Web App example",
"start_url": "index.html",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{
"src": "icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
Не забудьте добавить свои собственные значки для вашего приложения. Затем включите manifest.json в файл index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="manifest" href="manifest.json"> <link rel="stylesheet" href="style.css"> <title>PWA Example</title> </head> <body> <!-- Your app content here --> <script src="main.js"></script> </body> </html>
Сервисные работники: сердце PWA
Создайте новый файл с именем sw.js в каталоге вашего проекта, который будет вашим файлом Service Worker. В main.js добавьте следующий код для регистрации Service Worker:
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('sw.js').then(registration => {
console.log('Service Worker registered with scope:', registration.scope);
}).catch(error => {
console.error('Service Worker registration failed:', error);
});
});
}
Этот код проверяет, поддерживает ли браузер Service Workers, и регистрирует файл sw.js при загрузке страницы.
Кэширование и офлайн-функции
Теперь давайте добавим функцию кэширования в наш Service Worker. В sw.js добавьте следующий код:
const CACHE_NAME = 'pwa-example-v1';
const CACHE_FILES = [
'/',
'index.html',
'manifest.json',
'style.css',
'main.js',
'icon-192.png',
'icon-512.png'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME).then(cache => {
return cache.addAll(CACHE_FILES);
})
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request);
})
);
});
self.addEventListener('activate', event => {
const cacheWhitelist = [CACHE_NAME];
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (cacheWhitelist.indexOf(cacheName) === -1) {
return caches.delete(cacheName);
}
})
);
})
);
});
Этот код настраивает кэширование основных файлов в массиве CACHE_FILES. Событие install добавляет эти файлы в кеш, а событие fetch обслуживает кэшированные файлы, когда они доступны. Событие activate удаляет все старые кеши, которые больше не нужны.
Всплывающее уведомление
Чтобы включить push-уведомления, сначала вам нужно настроить серверную службу для отправки уведомлений. В этом примере мы будем использовать библиотеку Web Push. Установите его, запустив:
npm install web-push
Затем сгенерируйте пару ключей VAPID с помощью инструмента командной строки web-push:
npx web-push generate-vapid-keys
Скопируйте открытый ключ и закрытый ключ, которые отображаются. Вы будете использовать их позже.
В sw.js добавьте новый прослушиватель событий для push:
self.addEventListener('push', event => {
const data = event.data.json();
const options = {
body: data.body,
icon: 'icon-192.png',
badge: 'icon-192.png'
};
event.waitUntil(self.registration.showNotification(data.title, options));
});
Этот код прослушивает push-события, извлекает данные уведомления и отображает уведомление.
Наконец, на вашем сервере используйте библиотеку Web Push для отправки уведомлений:
const webPush = require('web-push');
const vapidPublicKey = 'YOUR_PUBLIC_KEY';
const vapidPrivateKey = 'YOUR_PRIVATE_KEY';
const subscription = {}; // Get this from the client
webPush.setVapidDetails('[email protected]', vapidPublicKey, vapidPrivateKey);
const notificationPayload = {
title: 'New message',
body: 'Hello, this is a test notification!'
};
webPush.sendNotification(subscription, JSON.stringify(notificationPayload));
Развертывание и тестирование
Разверните PWA на веб-сервере, поддерживающем HTTPS, поскольку для сервисных рабочих требуется безопасное соединение. После развертывания протестируйте PWA с помощью таких инструментов, как Lighthouse, в Chrome DevTools, чтобы убедиться, что оно соответствует требованиям PWA и предлагает удобный пользовательский интерфейс.
Чтобы протестировать PWA:
- Откройте PWA в Google Chrome.
- Откройте Chrome DevTools (щелкните правой кнопкой мыши страницу и выберите «Проверить» или нажмите «Ctrl+Shift+I»).
- Нажмите на вкладку «Маяк» на панели DevTools.
- Установите флажок «Прогрессивное веб-приложение» и нажмите «Создать отчет».
Lighthouse создаст подробный отчет с оценкой и практическими рекомендациями по улучшению вашего PWA.
Заключение
В этом подробном руководстве мы рассмотрели основные аспекты создания прогрессивного веб-приложения с использованием JavaScript, включая создание манифеста приложения, настройку Service Workers, реализацию кэширования и автономных функций, а также включение push-уведомлений. Теперь у вас есть базовые знания, чтобы приступить к созданию собственных PWA, предлагая пользователям беспроблемный и привлекательный опыт работы на любых устройствах и в сетевых условиях. Удачного кодирования!
- Манифест веб-приложения — Сеть разработчиков Mozilla
- Service Workers: введение — Google Developers
- Использование Notifications API — веб-документы MDN
