Итак, вы создали свой сайт. Будь то приложение React, приложение Vue или старый добрый HTML-сайт — молодцы. Вы должны гордиться им. Вспомните, как вы написали свою первую строчку кода, теперь у вас есть сайт. Он находится в Интернете, и другие люди могут его видеть.
Однако сайт работает только тогда, когда вы подключены к Интернету. Если ваши пользователи потеряют соединение, то вместо вашего прекрасного сайта они увидят хромированного динозавра.
Каково же ваше решение? Принимаете ли вы статус-кво? Возможен ли вообще автономный сайт?
Конечно, возможен! Прогрессивные веб-приложения (PWA) — вот ваше решение.
Что такое прогрессивные веб-приложения?
Прогрессивные веб-приложения — это веб-приложения, которые могут работать как родные приложения. Используя 2 файла, ваш сайт может иметь push-уведомления, автономный режим и стать загружаемым, как приложение. Эти два файла называются Service Worker и JSON-файл манифеста.
Рабочий сервис
Первый файл, который вам понадобится, это service worker, который представляет собой файл Javascript, являющийся мозгом PWA. Вам нужно будет зарегистрировать его, добавив тег script в ваш базовый HTML и добавив этот код.
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(function(registration) {
console.log('Service worker started');
})
.catch(function(error) {
console.log('Service worker failed, error:', error);
});
}
В отдельном файле service-worker.js
вам понадобятся 2 блока кода.
self.addEventListener('install', (event) => {
// run caching when installing service worker.
});
self.addEventListener('activate', (event) => {
// After install and all active pages have been closed, this will run.
});
Теперь у вас есть начальный код для вашего PWA. Просмотрите оставшийся код, чтобы добавить функциональность.
Manjest.json
Файл manifest.json похож на файл package.json в проекте node. Он содержит некоторую информацию о сайте, например, название, цвет фона и иконку. Полный список смотрите здесь на MDN. Этот файл определяет некоторые метаданные веб-приложения, например, какой будет иконка сайта при его загрузке.
Добавьте <link rel="manifest" href="/manifest.json">
в элемент head корневого HTML-файла, чтобы связать веб-сайт с ним, и добавьте свой значок в папку images.
{
"short_name": "My Example PWA",
"name": "Example PWA",
"start_url": "/index.html",
"background_color": "#1c5680",
"display": "standalone",
"theme_color": "#1c5680",
"icons": [
{
"src": "/images/icon.png",
"type": "image/png",
"sizes": "128x128"
}
]
}
Создание автономной страницы
const custom_offline_page = "offline.html"
self.addEventListener('install', event => {
event.waitUntil(
caches.open('CacheName').then((cache) => {
return cache.addAll([
custom_offline_page
])
})
)
})
self.addEventListener("fetch", (event) => {
event.respondWith(
(async () => {
try {
// Fetch request from network
const networkResponse = await fetch(event.request)
return networkResponse
} catch (error) {
// Error thrown when a user has no internet connection
const cache = await caches.open('CacheName')
const cachedResponse = await cache.match(custom_offline_page)
return cachedResponse
}
})()
)
})
Теперь у вас есть автономная страница.
Проверка работы
В chrome откройте dev tools и перейдите на вкладку маяка. Вы можете запустить аудит. Одна из галочек — PWA. Запустите аудит, и это выявит все проблемы, если они есть.
Вы также можете проверить вкладку application
в dev tools, чтобы увидеть manifest json и убедиться, что service worker был успешно зарегистрирован.
Чтобы поблагодарить вас, вы могли бы угостить меня кофе?
Если у вас есть вопросы или проблемы, задавайте их в комментариях ниже. Я буду более чем счастлив помочь
Ресурсы:
-
https://developers.google.com/web/tools/workbox
-
https://www.google.com/amp/s/www.freecodecamp.org/news/build-a-pwa-from-scratch-with-html-css-and-javascript/amp/
-
https://web.dev/progressive-web-apps/