Автор оригинала: Ibrahima Ndaw.

Прогрессивные веб-приложения – это способ привести к тому, что нативное приложение ощущается в традиционном веб-приложении. С PWA мы можем улучшить наш веб-сайт с функциями мобильных приложений, которые увеличивают удобство использования и предлагают отличный пользовательский опыт.

В этой статье мы собираемся построить PWA с нуля с HTML, CSS и JavaScript. Вот темы, которые мы будем покрывать:

• Что такое прогрессивное веб-приложение?
• Разметка
• Стайлинг
• Показать данные с JavaScript
• Манифест веб-приложения
• Что такое обслуживающий рабочий?
• Кэширует активы
• Получить активы
• Зарегистрировать сервис
• Последние мысли
• Следующие шаги

Итак, давайте начнем с важным вопросом: что такое PWA?

Что такое прогрессивное веб-приложение?

Progressive Web App – это веб-приложение, которое обеспечивает поиск пользователей, подобный приложению, используя современные веб-возможности. В конце концов, это просто ваш обычный веб-сайт, который работает в браузере с некоторыми улучшениями. Это дает вам возможность:

• Чтобы установить его на мобильный домашний экран
• Чтобы получить доступ к этому, когда в автономном режиме
• Чтобы получить доступ к камере
• Получить Push-уведомления
• Делать фоновую синхронизацию

И намного больше.

Однако, чтобы иметь возможность преобразовать наше традиционное веб-приложение в PWA, мы должны немного отрегулировать его, добавив файл манифеста веб-приложения и обслуживающий рабочий день.

Не беспокойтесь об этих новых терминах – мы покроем их ниже.

Во-первых, мы должны построить наше традиционное веб-приложение. Так что давайте начнем с разметки.

Разметка

Файл HTML относительно прост. Мы обнимаем все в Главная ярлык.

• В index.html.

И создать навигационную панель с NAV ярлык. Тогда Div С классом .Онтейнер Удержит наши карты, которые мы добавляем позже с JavaScript.

Теперь, когда мы получили это с дороги, давайте стиль его с CSS.

Стайлинг

Здесь, как обычно, мы начинаем, импортируя необходимые нам шрифты. Тогда мы сделаем некоторые сбросы, чтобы предотвратить поведение по умолчанию.

• В CSS/style.css.

@import url("https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #fdfdfd;
  font-family: "Nunito", sans-serif;
  font-size: 1rem;
}
main {
  max-width: 900px;
  margin: auto;
  padding: 0.5rem;
  text-align: center;
}
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
ul {
  list-style: none;
  display: flex;
}

li {
  margin-right: 1rem;
}
h1 {
  color: #e74c3c;
  margin-bottom: 0.5rem;
}

Тогда мы ограничиваем Главная Максимальная ширина элемента до 900px Чтобы он выглядел хорошо на большом экране.

Для Navbar я хочу, чтобы логотип был слева и ссылкам справа. Так для NAV Тег, сделав сгиб контейнер, мы используем Обоснование-контент: пространство между; выровнять их.

• В CSS/style.css.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-gap: 1rem;
  justify-content: center;
  align-items: center;
  margin: auto;
  padding: 1rem 0;
}
.card {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 15rem auto;
  height: 15rem;
  background: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  border-radius: 10px;
  margin: auto;
  overflow: hidden;
}
.card--avatar {
  width: 100%;
  height: 10rem;
  object-fit: cover;
}
.card--title {
  color: #222;
  font-weight: 700;
  text-transform: capitalize;
  font-size: 1.1rem;
  margin-top: 0.5rem;
}
.card--link {
  text-decoration: none;
  background: #db4938;
  color: #fff;
  padding: 0.3rem 1rem;
  border-radius: 20px;
}

У нас будет несколько карт, поэтому для элемента контейнера он будет отображаться как сетка. И, с Грид-шаблоны-столбцы: Repeat (Auto-Fit, Minmax (15rem, 1fr)) Теперь мы можем сделать наши карты отзывчивыми, чтобы они использовали хотя бы 15rem Ширина, если есть достаточно места (и 1fr если нет).

И чтобы они выглядели хорошими, мы удваиваем эффект тени на .card класс и использовать Объект-Fit: Cover на .card - аватар Для предотвращения растяжения изображения.

Теперь это выглядит намного лучше – но у нас все еще нет данных, чтобы показать.

Давайте исправим это в следующем разделе

Показать данные с JavaScript

Обратите внимание, что я использовал большие изображения, которые занимают некоторое время для загрузки. Это покажет вам наилучшим образом сил обслуживания работников.

Как я уже говорил ранее, .Онтейнер Класс будет держать наши карты. Поэтому нам нужно выбрать его.

• В js/app.js.

const container = document.querySelector(".container")
const coffees = [
  { name: "Perspiciatis", image: "images/coffee1.jpg" },
  { name: "Voluptatem", image: "images/coffee2.jpg" },
  { name: "Explicabo", image: "images/coffee3.jpg" },
  { name: "Rchitecto", image: "images/coffee4.jpg" },
  { name: " Beatae", image: "images/coffee5.jpg" },
  { name: " Vitae", image: "images/coffee6.jpg" },
  { name: "Inventore", image: "images/coffee7.jpg" },
  { name: "Veritatis", image: "images/coffee8.jpg" },
  { name: "Accusantium", image: "images/coffee9.jpg" },
]

Затем мы создаем массив карт с именами и изображениями.

• В js/app.js.

const showCoffees = () => {
  let output = ""
  coffees.forEach(
    ({ name, image }) =>
      (output += `
              

                
                
${name}
                Taste
              
              `)
  )
  container.innerHTML = output
}

document.addEventListener("DOMContentLoaded", showCoffees)

С помощью этого кода выше мы можем теперь зацикливаться через массив и показать их в файле HTML. И сделать все работать, мы ждем до DOM (модель объекта документа), не заканчивает загрузку для запуска ShowCoffears метод.

Мы много сделали, но на данный момент у нас просто традиционное веб-приложение. Итак, давайте изменим, что в следующем разделе, введя некоторые функции PWA.

Манифест веб-приложения

Mainest Web App – это простой файл JSON, который сообщает браузеру о вашем веб-приложении. Он говорит, как он должен вести себя при установке на мобильном устройстве или на рабочем столе пользователя. И чтобы показать подсказку Add to home экрана, требуется манифест веб-приложения.

Теперь, когда мы знаем, что такое веб-манифест, давайте создадим новый файл с именем манифест .json (Вы должны назвать это так) в корневом каталоге. Затем добавьте этот блок кода ниже.

• В Манифест

{
  "name": "Dev'Coffee",
  "short_name": "DevCoffee",
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#fdfdfd",
  "theme_color": "#db4938",
  "orientation": "portrait-primary",
  "icons": [
    {
      "src": "/images/icons/icon-72x72.png",
      "type": "image/png", "sizes": "72x72"
    },
    {
      "src": "/images/icons/icon-96x96.png",
      "type": "image/png", "sizes": "96x96"
    },
    {
      "src": "/images/icons/icon-128x128.png",
      "type": "image/png","sizes": "128x128"
    },
    {
      "src": "/images/icons/icon-144x144.png",
      "type": "image/png", "sizes": "144x144"
    },
    {
      "src": "/images/icons/icon-152x152.png",
      "type": "image/png", "sizes": "152x152"
    },
    {
      "src": "/images/icons/icon-192x192.png",
      "type": "image/png", "sizes": "192x192"
    },
    {
      "src": "/images/icons/icon-384x384.png",
      "type": "image/png", "sizes": "384x384"
    },
    {
      "src": "/images/icons/icon-512x512.png",
      "type": "image/png", "sizes": "512x512"
    }
  ]
}

В конце концов, это просто файл JSON с некоторыми обязательными и необязательными свойствами.

Имя: Когда браузер запускает экран SPLASH, это будет имя, отображаемое на экране.

Short_name: Это будет имя, отображаемое под вашим ярлыком приложения на главном экране.

start_url: Это будет страница, показанная пользователю, когда ваше приложение открыто.

Дисплей: Он говорит браузеру, как отобразить приложение. Есть несколько режимов, таких как минимальный ui , полный экран , браузер и т. д. Вот, мы используем Автономный Режим, чтобы скрыть все, связанное с браузером.

background_color: Когда браузер запускает экран всплеска, это будет фоном экрана.

Themee_Color: Это будет цвет фона панели состояния, когда мы открываем приложение.

Ориентация: Он говорит браузеру ориентацию, чтобы отобразить приложение.

Значки: Когда браузер запускает экран Splash, он будет значок, отображаемый на экране. Здесь я использовал все размеры, чтобы соответствовать предпочтительным значкам любого устройства. Но вы можете просто использовать один или два. Тебе решать.

Теперь, когда у нас есть манифест веб-приложения, давайте добавим его в файл HTML.

• В index.html (Главный тег)

Как видите, мы связали наши манифест .json файл к тегу головки. И добавьте некоторые другие ссылки, которые обрабатывают поддержку iOS, чтобы показать значки и раскрашивать строку состояния с нашим цветом темы.

С этим мы можем теперь погрузиться в последнюю часть и представить услуг.

Что такое обслуживающий рабочий?

Обратите внимание, что PWA работает только на HTTPS, потому что сервисный работник может получить доступ к запросу и обработать его. Поэтому безопасность требуется.

Сервисный работник – это сценарий, который ваш браузер работает на заднем плане в отдельной ните. Это означает, что он работает в другом месте и полностью отдельно от вашей веб-страницы. Вот почему это не может манипулировать вашим элементом DOM.

Тем не менее, это супер мощный. Сервисский работник может перехватить и обрабатывать сетевые запросы, управлять кэшем, чтобы включить в автономный режим или отправлять Push-уведомления для ваших пользователей.

S0 Давайте создадим наш самый первый сервисный работник в корневой папке и назовите его ServiceWorker.js (имя зависит от вас). Но вы должны поставить его в корне, чтобы вы не ограничивали его объем в одну папку.

Кэширует активы

• В ServiceWorker.js.

const staticDevCoffee = "dev-coffee-site-v1"
const assets = [
  "/",
  "/index.html",
  "/css/style.css",
  "/js/app.js",
  "/images/coffee1.jpg",
  "/images/coffee2.jpg",
  "/images/coffee3.jpg",
  "/images/coffee4.jpg",
  "/images/coffee5.jpg",
  "/images/coffee6.jpg",
  "/images/coffee7.jpg",
  "/images/coffee8.jpg",
  "/images/coffee9.jpg",
]

self.addEventListener("install", installEvent => {
  installEvent.waitUntil(
    caches.open(staticDevCoffee).then(cache => {
      cache.addAll(assets)
    })
  )
})

Этот код выглядит запугивающим сначала, но просто JavaScript (так не волнуйтесь).

Мы объявляем название нашего кеша StaticDevcoffee и активы для хранения в кэше. И выполнить это действие, нам нужно прикрепить слушателя Я Отказ

Я это сам работник обслуживания. Это позволяет нам слушать события жизненного цикла и сделать что-то взамен.

Услуга обслуживает несколько жизненных циклов, а один из них – Установить событие. Он работает, когда установлен сервисный работник. Он срабатывает, как только работник выполняет, и он только называется только один раз за услугу.

Когда Установить Событие уволено, мы запускаем обратный вызов, который дает нам доступ к событие объект.

Кэширование чего-то в браузере может занять некоторое время, чтобы закончить, потому что он асинхронный.

Так что, чтобы справиться с этим, нам нужно использовать waituntil () Что, как вы могли догадаться, ждет действия, чтобы закончить.

Как только API кэша будет готов, мы можем запустить Открыть () Способ и создать наш кеш, передавая его имя в качестве аргумента для Caches.Open (StaticDevCoffee) Отказ

Затем он возвращает обещание, что помогает нам хранить наши активы в кэше с Cache.Addall (активы) Отказ

Надеюсь, ты все еще со мной.

Теперь мы успешно кэшировали наши активы в браузере. И в следующий раз мы загружаем страницу, сервисный работник будет обрабатывать запрос и получить кэш, если мы оффлайн.

Итак, давайте принесем наш кеш.

Получить активы

• В ServiceWorker.js.

self.addEventListener("fetch", fetchEvent => {
  fetchEvent.respondWith(
    caches.match(fetchEvent.request).then(res => {
      return res || fetch(fetchEvent.request)
    })
  )
})

Здесь мы используем извлекать Событие, ну, верните наши данные. Обратный вызов дает нам доступ к FetchEvent Отказ Затем мы приложим Ответ () Чтобы предотвратить ответ браузера по умолчанию. Вместо этого он возвращает обещание, потому что действие Fetch может занять время, чтобы закончить.

И как только кеш готовый, мы применяем Caches.match (fetchevent.request) Отказ Это проверит, будет ли что-то в кэш-матчах fetchevent.request Отказ Кстати, fetchevent.request это просто наш массив активов.

Тогда это возвращает обещание. И, наконец, мы можем вернуть результат, если он существует или исходная выборка, если нет.

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

И самое главное, это делает наше приложение доступно в автономном режиме.

Но только сервисный работник не может сделать работу. Нам нужно зарегистрировать его в нашем проекте.

Зарегистрировать сервис

• В js/app.js.

if ("serviceWorker" in navigator) {
  window.addEventListener("load", function() {
    navigator.serviceWorker
      .register("/serviceWorker.js")
      .then(res => console.log("service worker registered"))
      .catch(err => console.log("service worker not registered", err))
  })
}

Здесь мы начинаем с проверки, если ServiceWorker поддерживается текущим браузером (так как он все еще не поддерживается всеми браузерами).

Затем мы слушаем событие Load Page, чтобы зарегистрировать наш сервисный работник, передавая имя нашего файла ServiceWorker.js к navigator.serviceworker.register () в качестве параметра для регистрации нашего работника.

С этим обновлением мы преобразовали наше обычное веб-приложение в PWA.

Последние мысли

На протяжении всей этой статьи мы видели, как могут быть удивительные PWA. Добавляя файл манифеста веб-приложения и служебный работник, он действительно улучшает пользовательский опыт нашего традиционного веб-приложения. Это потому, что PWA быстрые, безопасные, надежные и – самое главное – они поддерживают автономный режим.

Многие рамки там теперь приходят с сервисным рабочим файлом, уже установленным для нас. Но зная, как реализовать его с ванильным JavaScript, может помочь вам понять PWA.

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

Спасибо за прочтение этой статьи.

Вы можете проверить это в прямом эфире здесь и исходный код – здесь Отказ

Читать дальше моих статей на мой блог

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

Документация веб-манифеста

Сервисная рабочая документация

Генератор веб-манифеста

Поддержка браузера