Знакомство с PWA и быстрое начало создания приложения PWA

внешний интерфейс браузер Ресурсы изображений PWA

Первый опыт PWA

Предисловие: для этого примера ничего не нужно устанавливать

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

Введение в PWA

Новая интерфейсная технология PWA (полное название: Progressive Web App) означает, что это прогрессивное веб-приложение.

Официальный сайт:Developers.Google.com/Web/pro GRE — это…

Это проект, предложенный Google в 2015 году и продвигаемый в июне 2016 года. Это комбинация ряда современных веб-технологий для достижения пользовательского опыта, аналогичного родным приложениям в веб-приложениях.

Публичность PWA на официальном сайте:Reliable( надежный ),Fast( быстро ),Engaging( доступный )

Reliable: когда пользователь начинает с домашнего экрана мобильного телефона, PWA может быть загружено немедленно, независимо от состояния сети.

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

Engaging: PWA можно добавить на домашний экран пользователя без загрузки из магазина приложений, они обеспечивают работу, подобную APP, через файл манифеста веб-приложения (вы можете настроить полноэкранный режим на Android из-за проблем с поддержкой Safari, поэтому Недоступно на IOS), а также доступны «push-уведомления».

Ключевая технология PWA

  • Service Worker(Можно понимать как фабрику услуг)
  • Manifest(манифест приложения)
  • Push Notification(Отправить уведомление)

Service Worker

Следующее представлено SW

Что такое SW? Это автономный файл кэша. Это то, что использует наша технология PWA! SW — это скрипт, который браузер запускает в фоновом режиме независимо от веб-страницы. Он открывает двери для функций, которые не требуют веб-страниц или взаимодействия с пользователем, поскольку он используется для функции «Надежность». Между ними он эквивалентен прокси-серверу.

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

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

механизм события

Функция(Это все еще довольно противно)

  • Синхронизация фоновых данных
  • Получение запросов ресурсов из других доменов
  • Принимать обновления ресурсоемких данных, которые совместно используются на нескольких страницах.
  • Компиляция на стороне клиента и управление зависимостями
  • Механизм ловушек для серверных служб
  • Настройка шаблонов на основе шаблонов URL
  • оптимизация производительности
  • сообщение
  • Запланированные обновления по умолчанию
  • Геозона

Жизненный цикл

  • Разобрано (разобрано успешно): Когда ПО регистрируется в первый раз, браузер разрешает сценарий и получает точку входа. Если анализ прошел успешно, объект регистрации ПО может быть доступен. На этом этапе нам нужно добавить решение на HTML-странице, чтобы судить о браузере.Поддерживать ли SW.

  • Установка(установка):После разбора скрипта SW браузер попытается установить,и будет выполнено событие install в установке.Если есть метод event.waitUntil( ),событие install будет ждать пока промис в этом Метод завершён, завершится успешно, если обещание будет отклонено, установка завершится ошибкой, и ПО перейдёт в состояние резервирования.

  • Установлено / Ожидание: Если установка прошла успешно, ПО войдет в это состояние.

  • Активация (активация): ПО в состоянии ожидания перейдет в состояние активации, когда:

    Вызывается метод self.skipWaiting() в неактивном в данный момент воркере и скрипте SW ( ps: self - глобальный объект в SW, этот метод можно понять по английскому переводу, пропустить состояние ожидания), пользователь закрыл все страницы в рамках SW, тем самым освобождая текущего активного работника, превышающего указанное время, тем самым освобождая текущего активного работника

  • Активировано (активировано успешно): Это состояние, в котором активный воркер успешно получил полный контроль над документом.

  • Избыточный (устаревший): это состояние возникает по какой-то причине, если происходит сбой события установки или события активации, или новое ПО заменяет его в качестве активного рабочего. Информацию о сбое события установки и сбое события активации можно просмотреть в DevTools браузера Chrome.

Очень хороший туториал для всестороннего ознакомления с sw:woohoo.villain HR.com/afraid/2017/0…

Manifest

Манифест веб-приложения — это спецификация W3C, определяющая List на основе JSON. Роль манифеста в PWA:

​ Возможность добавлять веб-страницы, которые вы просматриваете, на экран телефона

На Android его можно запустить в полноэкранном режиме без отображения адресной строки (поскольку браузер мобильного телефона Iphone — Safari, он не поддерживается)

​ Экран управления альбомной/портретной индикацией

Определите экран-заставку

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

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

Push Notification

Push и Notification — это две разные функции, использующие два API.

Уведомление — это уведомление, отправленное браузером.

Связь между Push и Notification, Push: сервер передает обновленную информацию в SW, и Notification: SW отправляет обновленную информацию пользователю.

Пример ПВА

Подготовить

Давайте сначала создадим папку проекта о PWA,

Войдите в папку, и мы подготовим изображение размером 120x120 в качестве значка нашего приложения.

Создайте файл index.html

Создайте файл main.css

Создайте файл manifest.json

Создайте файл sw.js

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hello PWA</title>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="main.css">
  <link rel="manifest" href="manifest.json">
</head>
<body>
  <h3>Hello PWA</h3>
</body>
<script>
  // 检测浏览器是否支持SW
  if(navigator.serviceWorker != null){
    navigator.serviceWorker.register('sw.js')
    .then(function(registartion){
      console.log('支持sw:',registartion.scope)
    })
  }
</script>
</html>

main.css

h3{
  color: #f00;
}

manifest.json

short_name: " " Название приложения на главном экране пользователя

display : «standalone» устанавливает стиль запуска и позволяет вашему веб-приложению скрывать адресную строку браузера.

start_url : "/" Установите начальный URL-адрес, если он не указан, по умолчанию используется текущая страница.

theme_color: "" используется, чтобы сообщить браузеру, какой цвет использовать для окрашивания элементов пользовательского интерфейса, таких как адресная строка.

background_color: " " Установить цвет фона заставки

значки: "" — это значок, добавленный на главный экран.

{
  "name": "一个PWA示例",
  "short_name": "PWA示例",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#fff",
  "theme_color": "#3eaf7c",
  "icons": [
    {
      "src": "/youhun.jpg",
      "sizes": "120x120",
      "type": "image/png"
    }
  ],
}

sw.js

Посмотрите на hs и ngrok, установленные многими людьми в Интернете для отладки.Чтобы позаботиться о новичках, я напрямую ссылаюсь на sw

Чтобы иметь дело со статическим кэшированием, сначала определите путь, который необходимо кэшировать, и список статических файлов, которые необходимо кэшировать.

При установке ПО с помощью регистрации ПО извлеченные ресурсы записываются в кеш. Используется метод self.skipWaiting(), так что новый скрипт SW может быть активирован и вступит в силу сразу же во время процесса обновления страницы.

importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.1.0/workbox-sw.js");
var cacheStorageKey = 'minimal-pwa-1'
var cacheList=[
  '/',
  'index.html',
  'main.css',
  'youhun.jpg'
]
self.addEventListener('install',e =>{
  e.waitUntil(
    caches.open(cacheStorageKey)
    .then(cache => cache.addAll(cacheList))
    .then(() => self.skipWaiting())
  )
})

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

Обновите статические ресурсы, срок действия кешированных ресурсов истечет с обновлением версии, поэтому старый кеш будет очищен в соответствии с кешированным строковым именем. Во вновь установленном ПО управление страницей осуществляется путем вызова self.clients.claim(), так что после открытия страницы будет использоваться обновленный кэш. Старый скрипт SW будет остановлен после того, как он перестанет контролировать страницу, то есть войдет в период Redundant.

self.addEventListener('fetch',function(e){
  e.respondWith(
    caches.match(e.request).then(function(response){
      if(response != null){
        return response
      }
      return fetch(e.request.url)
    })
  )
})
self.addEventListener('activate',function(e){
  e.waitUntil(
    //获取所有cache名称
    caches.keys().then(cacheNames => {
      return Promise.all(
        // 获取所有不同于当前版本名称cache下的内容
        cacheNames.filter(cacheNames => {
          return cacheNames !== cacheStorageKey
        }).map(cacheNames => {
          return caches.delete(cacheNames)
        })
      )
    }).then(() => {
      return self.clients.claim()
    })
  )
})

развертывать

Можем закинуть все содержимое текущего каталога pwa на сервер, либо также можно coding Pages и gitHub Pages, конечно, не забудьте включить https. Как упоминалось выше, у SW есть относительно большие права.Для безопасности мы используем протокол https для доступа.

Попробуйте посетить, здесь мы используем Страницы кодирования и привязываем собственное доменное имя

Откройте инструмент отладки хрома, откройте приложение и нажмите на сервисных работников, Мы обнаружим, что скрипт sw.js был сохранен в SW.

Давайте откроем Сеть и обновим страницу, чтобы увидеть, что ресурсы нашей страницы поступают из SW, а не из других мест.Утверждение, которое мы оценили в index.html, также печатается в консоли, и поддержка браузера напечатает это предложение.

Далее отключаем сетевую работу, ставим галочку Offline в Application. Затем обновите страницу, мы все еще можем видеть предыдущую страницу, причина в том, что мы видим на картинке выше, что его ресурсы получены из SW. Когда мы открыли эту страницу в первый раз, объект Resopnse хранился в Cache Storage (определено в спецификации ПО, пожалуйста, проверьте соответствующую информацию самостоятельно) Давайте посмотрим на следующий рисунок:

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

В настоящее время некоторые учащиеся, должно быть, думают, если контент обновляется, то является ли контент, отображаемый на странице, новым контентом или старым контентом? Давайте сделаем это сейчас, откроем файл index.html, добавим тег p в тело, а затем вернемся на страницу для обновления.

Как мы видим, контент на странице не показывает тег p, который я только что добавил. Это показывает, что данные, которые мы получаем, по-прежнему получены из Cache Storage, содержимое в Cache Storage не обновлялось, а принудительного обновления недостаточно, поэтому как мы можем сделать так, чтобы тег p, который я только что добавил, отображался?

Давайте откроем файл сценария sw.js и изменим cacheStorageKey.

После модификации мы снова открываем URL-адрес, принудительно обновляем его или закрываем браузер и снова открываем его.

На странице появится только что добавленный тег P. Давайте посмотрим на имя кеша в Cache Storage, которое было изменено.

Суммировать

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

Порог для изучения PWA не низкий, развернутый сервер требует HTTPS, ServiceWorker задействует множество API и его нужно изучать отдельно, к тому же этот пакет уже есть в npm https://www.npmjs.com/package/web- pwa, играть можно, может быть много ям в фактическом развертывании в рабочей среде проекта, но есть ямки для заполнения ям, так почему бы не назвать это фронтендом без подбрасывания?

Категории