Автор оригинала: Shruti Kapoor.
Мы узнали о Что такое прогрессивное веб-приложение (PWA) Часть 1. В этой части мы собираемся построить прогрессивное веб-приложение, используя никаких рамх, но просто манипулирование DOM.
Давайте сделаем быстрое откровение того, что мы узнали до сих пор. Для приложения для прогрессирования его необходимо иметь следующие требования:
- Файл манифеста –
Манифест - Сервисский работник с по меньшей мере для события Fetch –
ServiceWorker.js. - Значок –
icon.jpg. - подается через HTTPS –
https://www.myawesomesite.com.
В этом руководстве я расскажу о требованиях 1 и 2 – создание файла манифеста и регистрация сервисного работника.
Цель
Для этого примера мы собираемся создать простое прогрессивное веб-приложение. Сложность поддерживается преднамеренно просто, чтобы мы могли сосредоточиться на концепциях прогрессивного веб-приложения. Вы должны иметь возможность принимать эти концепции и применить их в своем собственном угловом, реакцию, Vue или Vanilla JavaScript.
Мы собираемся создать механизм мем. Мы вытягиваем последние трендовые мемы от giphy.com и отобразить их в нашем приложении. Пользователь должен иметь возможность просматривать изображения, даже если соединение не работает. Следовательно, мы предоставляем беспроводной опыт.
Большой! Так что теперь давайте доберемся до важных вещей.
Шаг 0: Создайте приложение
Начнем с скелета index.html:
All the memes!
Top trending memes today
Как видите, это просто index.html Это только распечатывает текст Лучшие тенденции мем сегодня Отказ Ничего особенного.
Далее давайте добавим возможность получить тенденцию MEMES из giphy.com Отказ Вот что выглядит функция Fetch:
async function fetchTrending() {
const res = await fetch(`https://api.giphy.com/v1/gifs/trending?api_key=${apiKey}&limit=25`);
const json = await res.json();
main.innerHTML = json.data.map(createMeme).join('\n');
}Давайте сделаем это прогрессивным
Шаг 1: Файл манифеста
Как вы можете вспомнить из части 1, файл манифеста является JSON файл. Он имеет мета-информацию о приложении, например, значок имя, цвет фона, имя приложения и т. Д. Вот | манифест .json Файл с этими параметрами:
{
"name": "Meme",
"short_name": "Meme",
"icons": [{
"src": "images/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
}, {
"src": "images/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "images/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
}, {
"src": "images/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "images/icons/icon-256x256.png",
"sizes": "256x256",
"type": "image/png"
}],
"start_url": "/index.html",
"display": "standalone",
"background_color": "#3E4EB8",
"theme_color": "#2F3BA2"
}Вы также можете использовать инструмент для создания этого. Вот инструмент что я нашел полезное:
Добавление его в наше приложение просто. Добавьте следующую строку в index.html :
Шаг 2: Сервисский работник
Давайте создадим файл ServiceWorker.js Отказ Во-первых, мы собираемся зарегистрировать сервисный работник в установке. Тогда мы будем кэшировать некоторые статические активы, такие как styles.csss и app.js. Далее нам нужно обеспечить автономные возможности, используя извлекать Отказ Вот что ServiceWorker.js выглядит как:
const staticAssets = [
'./',
'./styles.css',
'./app.js'
];
self.addEventListener('install', async event => {
const cache = await caches.open('static-meme');
cache.addAll(staticAssets);
});
self.addEventListener('fetch', event => {
const {request} = event;
const url = new URL(request.url);
if(url.origin === location.origin) {
event.respondWith(cacheData(request));
} else {
event.respondWith(networkFirst(request));
}
});
async function cacheData(request) {
const cachedResponse = await caches.match(request);
return cachedResponse || fetch(request);
}
async function networkFirst(request) {
const cache = await caches.open('dynamic-meme');
try {
const response = await fetch(request);
cache.put(request, response.clone());
return response;
} catch (error){
return await cache.match(request);
}
}Давайте сломаемся. Сервисский работник поможет нам кэшировать данные и получать ресурсы. Если у нас есть данные в нашем кэше, мы возвращаем данные из кэша или извлеките ее из сети. Для вашего собственного приложения, подумайте о том, какую функциональность вам нужно будет обеспечить для автономного доступа. Затем, кэшируйте ресурсы соответственно. Для моего случая я хочу показать ранее кэшированные изображения, когда сеть не работает.
Нам нужно будет добавить это на наш index.html. Чтобы добавить его, мы зарегистрируем сервисный работник, используя библиотеку навигатора браузера:
window.addEventListener('load', async e => {
await fetchTrending();
if ('serviceWorker' in navigator) {
try {
navigator.serviceWorker.register('serviceWorker.js');
console.log('SW registered');
} catch (error) {
console.log('SW failed');
}
}
});Давайте проверим, что это на самом деле было зарегистрировано. Нажмите на вкладку Network в браузере и перейдите к настройкам приложения. Эта вкладка действительно полезна при разработке прогрессирующего веб-приложения. Перезагрузить страницу, и вы сможете увидеть услуг на этой вкладке.
Теперь давайте обновим браузер. В первой нагрузке данные будут кэшироваться сервисным работником. Попробуйте отключить соединение. Мы все равно сможем просматривать изображения.
Наше приложение теперь доступно даже в автономном режиме! Если вы включили HTTPS и загрузить значок, поздравляю, у вас сейчас есть прогрессивное веб-приложение!
Следующие шаги
Если вы заинтересованы в разработке вашего собственного прогрессивного веб-приложения, я бы очень рекомендовал проверить это Коделабы Google Developers.
Вы узнали что-то новое? У комментариев? Знать devgoke? Tweet Me @ shrutikapoor08
//Когда я написал это, только Бог, и я понял, что я делал //Теперь только Бог знает #devjoke #notajoke # развитие #javascript pic.twitter.com/4v6lmudhdb.