Создание прогрессивного веб-приложения с нуля

sozdanie progressivnogo veb prilozheniya s nulya?v=1656540374

Мы узнали о том, что такое прогрессивное веб-приложение (PWA) в части 1. В этой части мы собираемся создать прогрессивную веб-приложение, используя не фреймворки, а только манипулирование DOM.

Давайте сделаем краткий итог того, что мы научились сейчас. Чтобы программа была прогрессивной, она должна иметь следующие требования:

  1. файл манифеста manifest.json
  2. работник службы с по крайней мере событием получения serviceworker.js
  3. значок icon.jpeg
  4. обслуживается через HTTPS — https://www.myawesomesite.com

В этом учебнике я расскажу о требованиях 1 и 2 – создании файла манифеста и регистрации служащего.

Объективный

Для этого примера мы собираемся создать простую прогрессивную веб-приложение. Сложность преднамеренно проста, чтобы мы могли сосредоточиться на концепциях прогрессивного веб-приложения. Вы должны иметь возможность принять эти концепции и применить их в собственном приложении Angular, React, Vue или vanilla JavaScript.

Мы собираемся создать механизм мемов. Мы вытащим последние популярные мемы giphy.com и отображать их в нашем приложении. Пользователь должен иметь возможность просматривать изображение, даже если соединение разорвано. Поэтому мы обеспечиваем бесперебойную работу в автономном режиме.

Прекрасно! Итак, теперь перейдем к важному.

1*6EJH5wIYnR3sHy6yI4bm7w

Шаг 0: Создайте приложение

Начнем со скелета index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>All the memes!</title>
    <link rel="stylesheet" href="
</head>
<body>
<header>
    <h1 class="center">Top trending memes today</h1>
</header>
<main>
    <div class="container"></div>
</main>
<script src="app.js"></script>

</body>
</html>

Как видите, это просто index.html только печатающая текст Top trending memes today. Ничего изысканного.

Далее, давайте добавим возможность получать популярные мемы. giphy.com. Вот как выглядит функция выбора:

async function fetchTrending() {
    const res = await fetch(`
    const json = await res.json();

    main.innerHTML = json.data.map(createMeme).join('\n');
}

Сделаем это прогрессивным

Шаг 1: Файл манифеста

Как вы помните из части 1, файл манифеста – это a json файл. Он содержит мета-информацию о программе, например, название значка, цвет фона, название программы и т.д. Вот a manifest.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"
}

Вы также можете использовать инструмент для создания этого. Вот инструмент, который я нашел полезным:

1*EeVAMTLF9yowvPPJuOHpqw
Генератор манифеста веб-приложений

Добавить его в наше приложение просто. Добавьте следующую строчку к index.html :

<link rel="manifest" href="https://www.freecodecamp.org/manifest.json">

Шаг 2: Сервисный работник

Давайте создадим файл serviceworker.js . Сначала мы собираемся зарегистрировать сервис-воркер при установке. Затем мы будем кэшировать некоторые статические активы, такие как styles.css и app.js. Далее нам нужно предоставить возможность использования оффлайн fetch . Вот что 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. Чтобы добавить его, мы зарегистрируем Service Worker, используя библиотеку навигатора браузера:

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');

        }
    }
});

Давайте проверим, действительно ли он зарегистрирован. Щелкните вкладку «Сеть» в браузере и перейдите к настройкам программы. Эта вкладка очень полезна при разработке прогрессивной веб-приложения. Перезагрузите страницу и на этой вкладке вы увидите сервис-воркера.

1*ayDNoz8Aw59BlVTfhrSU-w
Сервисный работник зарегистрирован

Теперь обновим браузер. При первой загрузке данные будут кэшироваться сервисным работником. Попытайтесь отключить соединение. Мы все равно сможем просматривать изображение.

Наша программа теперь доступна даже в автономном режиме! Если вы включили HTTPS и загрузили значок, приветствуем теперь у вас есть прогрессивная веб-программа!

Следующие шаги

Если вы заинтересованы в разработке своего прогрессивного веб-приложения, я бы настоятельно рекомендовал просмотреть эту лабораторию кода от Google Developers.

Вы узнали что-нибудь новое? Есть комментарии? Знаете DevJoke? Твиты мне @shrutikapoor08

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *