PWA, которые должен знать клиент

1. Традиционные веб-приложения

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

Причина не что иное, как следующие неизбежные моменты:

Ограничения сети для мобильных устройств — незначительное время загрузки
Веб-приложение использует браузер как точку входа.
Разрыв между опытом и родным

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

2. Что такое ПВА

Полное название PWA — Progressive Web Apps (прогрессивные веб-приложения), целью которого является использование существующих веб-технологий для предоставления пользователям лучшего опыта. Базовые требования

Надежный Мгновенная загрузка и презентация даже в нестабильной сетевой среде
Быстрый отклик (быстро) Отзывчивый, с плавной анимацией, реагирующей на действия пользователя
Вовлечение Подобно нативному приложению на устройстве, с иммерсивным пользовательским интерфейсом, который пользователь может добавить на рабочий стол.

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

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

Прогрессивный — работает во всех браузерах, так как был разработан с учетом прогрессивного улучшения.
Независимость от подключения — доступ к нему можно получить в автономном режиме или при плохой сети с помощью Service Worker.
Аналогичное приложение — поскольку оно разработано на основе модели App Shell, оно должно иметь взаимодействие и навигацию собственного приложения, предоставляя пользователю возможности собственного приложения.
Непрерывные обновления - всегда в актуальном состоянии, без проблем с версиями и обновлениями
Безопасный — обслуживается по протоколу HTTPS, предотвращая отслеживание и гарантируя, что содержимое не было подделано.
Индексируемый — файлы манифеста приложений и Service Workers могут быть проиндексированы поисковыми системами, чтобы идентифицировать их как «приложения».
Прилипчивость — может заставить пользователей возвращаться, отправляя автономные уведомления и т. д.
Возможность установки — пользователи могут добавлять часто используемые веб-приложения на рабочий стол, не загружая их из магазина приложений.
Linkable - делитесь контентом по ссылке без загрузки и установки

Выглядит немного ослепительно, это еще одно новое летающее колесо? Повторим еще раз: за PWA стоит не новая технология, а набор современных веб-технологий. Используйте их соответствующие функции для выполнения прогрессивных общих требований. Давайте взглянем на связанные технологии по предыдущим вопросам.

3. Технический состав

Он состоит из следующих технологий:

App Manifest
Service Worker
Notifications API
Push API

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

3.1 Опыт работы сервисным работником

Фон автономного кеша

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

История автономного кэширования

В процессе разработки автономного кэша веб-приложения не создаются в одном кластере, а проходят процесс постепенного улучшения.
Первоначальное решение — AppCache. Однако это оказалось неудачной попыткой, слишком ущербной и списанной. Дополнительные сведения см. в разделе Кэш приложений — это мудак. Но направление все же верное, так что продолжайте неустанно исследовать.

workers

Настойчивость в сторону, давайте поговорим о другом вопросе Основываясь на однопоточной реальности JavaScript в браузере, он постепенно перестает соответствовать статус-кво современных веб-требований, таких как трудоемкие вычисления, и взаимодействие с пользователем, очевидно, будет затронуто. Чтобы освободить эти трудоемкие операции от основного потока, ранний W3C добавил Web Worker API, который может выполняться независимо от основного потока и может взаимодействовать с основным потоком. Однако Web Worker временно зависит от создания страниц и не может удовлетворить наши постоянные потребности. Стремясь к этой цели, относительно легко решить следующее, и достаточно создать долговечную. На основе Web Worker W3C добавила сервис-воркер, чтобы удовлетворить наши потребности в сохранении. Его жизненный цикл не имеет ничего общего со страницей, он также может завершиться, когда связанная страница не закрыта, а также может начаться, когда связанной страницы нет. Функция

Хотя Service Worker удовлетворяет автономному кэшированию, его функции этим не ограничиваются. может обеспечить

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

Предварительные условия

У Service Worker есть определенные предпосылки для его использования из-за его безопасности и принципов реализации.

Поскольку Service Worker требует среды HTTPS
Конечно, когда общий браузер позволяет отлаживать Service Worker, хостом является localhost или 127.0.0.1.
Механизм кэширования Service Worker основан на Cache API (пропустить)
Зависит от API выборки HTML5 (пропустить)
Зависит от реализации промиса
Из вышеизложенного видно, что не все браузеры его поддерживают, ситуация с поддержкой примерно следующая:

Все браузеры в iOS основаны на сафари, поэтому iOS должна быть выше 11.3. IE отказывается от поддержки, но Edge все равно его поддерживает.

3.2 Cache

Кэш — это API, производный от Service Worker, который взаимодействует с Service Worker для кэширования запросов ресурсов. Однако кеш кэширует не строки напрямую, а напрямую кеширует запросы ресурсов (css, js, html и т. д.).
Кэш тоже в виде ключ-значение, вообще говоря, ключ — это запрос, а значение — это ответ.

caches.open(cacheName) открыть кеш
caches — это глобальный объект, который возвращает обещание с возвращаемым значением кеша.
cache.keys() проходит по всем ключам в кеше и получает набор значений
cache.match(Request|url) соответствует входящему запросу в кеше и возвращает обещание;
Только первый параметр cache.matchAll отличается от match, ему нужен массив запросов, конечно, возвращаемый результат тоже массив ответов.
cache.add(Request|url) не является простым добавлением, потому что передается запрос или URL-адрес. Внутри cache.add автоматически вызывается fetch для получения результата запроса, а затем ответ будет сохранен в кеш;
Подобно cache.addAll, обычно используйте cache.addAll для запроса всех файлов, которые необходимо кэшировать во время установки ПО.
cache.put(Request, Response) Это эквивалентно второму шагу cache.add, то есть выборке ответа и сохранению его в кеше.
cache.delete(Request|url) удалить кеш

3.3 Регистрация сервисного работника

Регистрация заключается в том, чтобы объявить расположение файла sw, который, очевидно, должен быть введен в основной файл js. Вероятно, следующим образом:

//基于promise
function registerServiceWorker(){
    // 注册service worker
    return navigator.serviceWorker.register('./sw1.js').then(registration => {
        console.log('注册成功');
        // 返回
        return registration;
    })
    .catch(err => {
        console.error('注册失败', err);
    });
}
window.onload = function () {
    //是否支持
    if (!('serviceWorker' in navigator)) {
        return;
    }
    registerServiceWorker()
}

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

У сервис-воркеров жизненный цикл не зависит от веб-страниц. Если вы устанавливаете сервис-воркер на свой сайт, вам необходимо зарегистрироваться, после регистрации браузер установит сервис-воркер в фоновом режиме. Затем перейдите к различным этапам ниже. После активации сервис-воркер будет контролировать все страницы в пределах своей области, но не будет контролировать страницу при первой регистрации страницы в сервис-воркере, пока она не загрузится снова. После того, как сервис-воркер вступит в силу, он будет находиться в одном из двух состояний:

сервисный работник завершает работу для сохранения памяти,
После того как страница инициирует сетевой запрос, она обрабатывает события запроса и сообщения.

Как видно из приведенного рисунка, он делится на следующие этапы:

Installing
Происходит после регистрации Service Worker, указывая на то, что установка начинается, вызывая обратный вызов события установки, чтобы указать некоторые статические ресурсы для автономного кэширования.
Установлены Service Worker завершил установку и ожидает закрытия других потоков Service Worker.
Активация Клиенты, которые не контролируются другими работниками службы в этом состоянии, позволяют текущему работнику завершить установку.
Activated
В этом состоянии будет обработан обратный вызов события активации (предоставляя возможность обновить политику кэширования). И может обрабатывать функциональные события: выборка (запрос), синхронизация (фоновая синхронизация), push (push)
Избыточный заменить, т. е. уничтожить

Понимание цикла объявления на самом деле для нас, чтобы прослушивать события в разные периоды времени для выполнения соответствующих операций. Есть два основных события для PWA.

установить обратный вызов события:

event.waitUntil(): передать промис в качестве параметра и дождаться, пока промис не перейдет в состояние разрешения. self.skipWaiting(): self — это глобальная переменная текущего контекста.Выполнение этого метода означает, что Service Worker, находящийся в данный момент в состоянии ожидания, переходит в состояние активации.

активировать обратный вызов:

event.waitUntil(): передать промис в качестве параметра и дождаться, пока промис не перейдет в состояние разрешения. self.clients.claim(): Выполните этот метод в обратном вызове события активации, чтобы получить контроль над страницей, чтобы при последующем открытии страницы использовалась кешированная версия. Старый скрипт Service Worker больше не управляет страницей и будет остановлен.

const CURCACHE = 'CURCACHE_test_1'
const RUNTIME = 'runtime';
const CURCACHE_URLS = [
    './',
    '/asset/sw.jpg',
    'index.js'
]
self.addEventListener('install',e=>{
    e.waitUntil(
      //存储缓存路径对应的资源
        caches.open(CURCACHE).then(cache=>{
            cache.addAll(CURCACHE_URLS)
        }).then(
            self.skipWaiting()
        )
    )
})
 
 
   
  //代理请求，使用缓存，请求发送之前
  self.addEventListener('fetch', e => {
    e.respondWith(
      //缓存是否匹配 
      caches.match(e.request).then(function(response) {
        if (response != null) {
          //命中缓存返回缓存，结束请求
          return response
        }
        //未命中缓存，正常请求
        return fetch(e.request.url)
      })
    )
  });

работник службы обновления Шаги обновления сервис-воркера следующие:

Обновите файлы сервис-воркера
Когда веб-страница открыта, сервер будет сравнивать и поддерживать ее в актуальном состоянии.
Новый сервис-воркер начинает установку
Текущая страница по-прежнему является старым сервис-воркером, а новый сервис-воркер перейдет в состояние ожидания.
После закрытия страницы старый сервис-воркер будет убит, а новый сервис-воркер займет страницу.
Событие активации запускается, когда новый сервис-воркер вступает в силу.

const CURCACHE = 'precache_test_1'
//假设上个版本的key为precache_test_2 反正不等于CURCACHE
self.addEventListener('activate', e => {
  e.waitUntil(
      //遍历当前缓存keys
      caches.keys().then(cacheNames=>{
        return Promise.all(
          cacheNames.map(function(cacheName) {
            //是否等于当前key,保留自己
            if (cacheName !== CURCACHE) {
              return caches.delete(cacheName);
            }
          })
    )}).then(() => self.clients.claim())
 )
})

Такой простой автономный кеш сервис-воркера сделан. В консоли видно, что источником является сервис-воркер.

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

На данный момент реализовано автономное кэширование.

В-четвертых, добавьте на главный экран

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

manifest.json

Файл manifest.json необходим для настройки базовой информации, такой как значок и имя приложения, следующим образом:

{
    //被提示安装应用时出现的文本
    "name": "PQJ-PWA",
    //添加至主屏幕后的文本
    "short_name":"PQJ",
    "description": "测试demo",
    //添加之后，启动地址
    "start_url": "/index.html",
    //图标信息
    "icons": {
      "128": "/asset/sw.jpg"
    },
    "developer": {
      "name": "pqj",
      "url": ""
    },
    "display": "standalone",
    "background_color": "#287fc5",
    "theme_color": "#fff",
    "permissions": {
        "desktop-notification": {
          "description": "Needed for creating system notifications."
        }
      }
}

Затем импортируйте его в html следующим образом

<link rel="manifest" href="/mainfest.json" />

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

5. Уведомление о сообщении

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

Сначала подайте заявку на получение разрешения на уведомление
Зарегистрировать сервисного работника
Логика обработки, отправка уведомлений

function getPermission(){
    return new Promise((resolve, reject) => {
        //权限获取
        const permissionPromise = Notification.requestPermission(result => {
            resolve(result);
        });
    }).then(result => {
            //判断条件
            if (result === 'granted') {
                execute();
            }
            else {
                console.log('no permission');
            }
        });
}

отправить уведомление

function execute() {
    // 允许之后执行
    registerServiceWorker().then(registration => {
        // 通知
        registration.showNotification('Hello World!');
    });
}

заключительные замечания

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

lavas.baidu.com/doc
developer.Mozilla.org/this-cn/apps/…

На этом введение в эту статью закончено, пожалуйста, обратитесь к более подробной информации.примерХотя в настоящее время PWA сталкивается со многими ограничениями, также видно, что веб-организации прилагают усилия для улучшения веб-приложений. Как уже упоминалось, будущее светлое. В настоящее время Baidu в Китае относительно развита в этом отношении, а Sina Weibo уже имеет бета-версию pwa.