Как заставить PWA работать в автономном режиме

Опубликовано: 2020-01-10

Оглавление

Вы, вероятно, знаете, что такое Progressive Web App — наряду с его функциями, меняющими отрасль, — но ради итерации давайте еще раз повторим удивительные, уникальные функции PWA, которые потенциально могут революционизировать работу в Интернете, а именно его автономные возможности . .

 Рекомендуемая литература: что такое PWA?

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

Прогрессивные веб-приложения и автономная доступность

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

Просматривайте контент даже в автономном режиме с помощью PWA

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

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

Как заставить PWA работать в автономном режиме

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

Предпосылки

  • Простой веб-сайт/веб-приложение. Подойдет все, что имеет один index.html , один index.js и один style.css .

После того, как у вас есть все необходимые условия, пришло время заставить ваш базовый PWA работать в автономном режиме!

Создание базового сервис-воркера

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

 // sw.js
self.addEventListener ("выборка", событие => {
    console.log("Вы получили " + event.url);
});

После того, как вы создали свой сервис-воркер, давайте проверим, поддерживает ли его ваш браузер, и сошлемся на него в вашем index.js : 

 // index.js
если ("serviceWorker" в навигаторе) {
    навигатор.serviceWorker
        .регистр("sw.js")
        .then(() => console.log("зарегистрированный сервис-воркер!"));
}
// остальной код вашей страницы...

Приведенный выше код должен быть достаточно простым. Он проверяет, поддерживает ли ваш браузер сервис-воркеров, и если да, возвращает « зарегистрированный сервис-воркер! ». Регистрируя сервис-воркеры, вы, по сути, говорите браузеру использовать sw.js в качестве инструкций для ваших сервис-воркеров и, в свою очередь, связываете новых сервис-воркеров с вашим сайтом.

Теперь вернемся к sw.js и добавим следующий код: 

 // sw.js
self.addEventListener ("выборка", событие => {
    console.log("Вы получили " + event.url);
});

Код добавляет EventListener , необходимый для нашей дальнейшей работы. Фактически, многие браузеры, включая Chrome, не позволят установить PWA, если не зарегистрирован прослушиватель fetch .

У addEventListener в приведенном выше коде есть два аргумента: события, которые необходимо прослушать, и обратный вызов, который принимает объект события. Как только это событие произойдет, ваш сервисный работник начнет прослушивать события fetch , которые включают запросы на HTML, CSS, JS вашего веб-сайта, аудио, изображения и любые другие запросы к API/другим веб-сайтам.

Сервисные работники SimiCart
Сервисные работники можно проверить с помощью Chrome DevTools

Кэширование ваших ресурсов

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

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

Лимит хранения кэша

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

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

Ограничение автономного хранилища для PWA

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

Чтобы кэшировать ресурсы вашей страницы, нам нужен глобальный массив, содержащий все активы, которые мы хотим сохранить: 

 /* 
  Это все, что мы хотим сохранить в кеше.
  Чтобы приложение работало в автономном режиме/было доступно для установки,
  мы должны сохранять не только изображения, но и наш HTML, JS и CSS
  а также - все, что мы хотим использовать в автономном режиме.
*/
константные АКТИВЫ = [
    "https://i.imgur.com/Kbkqr2n.png",
    "https://i.imgur.com/lgLaG0x.png",
    "https://i.imgur.com/0iL8mxP.png",
    "https://i.imgur.com/KDsdYeS.png",
    "https://i.imgur.com/mK50fqL.png",
    "https://i.imgur.com/KYGH2Qa.png",
    "/style.css",
    "/index.html",
    "/offline.html",
    "/"
];

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

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

Добавьте этот топ вверху вашего sw.js: 

 // sw.js

пусть cache_name = "SimiCart"; // Строка, используемая для идентификации нашего кеша

self.addEventListener ("установить", событие => {
    console.log("установка...");
    событие.waitUntil(
        тайники
            .open(имя_кэша)
            .тогда(кэш => {
                вернуть cache.addAll (активы);
            })
            .catch(ошибка => console.log(ошибка))
    );
});

По сути, этот код указывает браузеру ожидать (используя waitUntil() ) нашего кэширования.

С помощью API кеша, в частности, addAll() , наш массив активов может быть легко добавлен в кеш, готовый к обслуживанию сервисными работниками. Ну, если подумать, это не так уж и готово. Нам все еще нужно немного изменить наш обработчик событий fetch .

Вот как это будет выглядеть сейчас: 

 self.addEventListener ("выборка", событие => {
    если (event.request.url === "https://www.simicart.com/") {
        // или любой другой адрес вашего приложения
        событие.ответить(
            fetch(event.request).catch(ошибка =>
                self.cache.open(cache_name).then(cache => cache.match("/offline.html"))
            )
        );
    } еще {
        событие.ответить(
            fetch(event.request).catch(ошибка =>
                caches.match(event.request).then(ответ => ответ)
            )
        );
    }
});

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

  • Во-первых, приложение пытается получить ресурсы в сети и отвечает кэшированными ресурсами, если эта выборка не удалась (используя respondWith() ).
  • Внутри respondWith() мы вызываем fetch(event.request) , чтобы попытаться получить ресурсы из сети, и, поскольку выборка основана на Promise , Promise отклонится, если ему не удастся подключиться к сети, и, в свою очередь, вызовет catch() заявление.
  • В операторе catch() вы хотите вызвать свои кэшированные ресурсы.

Вот и все. Теперь ваш PWA должен работать в автономном режиме! Довольно легко, не так ли?

Вывод

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

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

Настройте свою PWA с помощью SimiCart