Как сделать pwa приложение
В данном руководстве мы разберём пример добавления HTML, JavaScript и стилей в этот шаблон для создания приложения, работающего онлайн и офлайн и предназначенного для планшетов и смартфонов.
Прогрессивное веб-приложение представляет собой гибрид сайта и приложения, ориентированный на пользователей мобильных устройств. В процессе разработки подобных приложений есть много общего с созданием классических веб-сайтов, за исключением некоторых моментов. В целом для этого не придётся неделями набивать шишки, продираясь через множество мануалов.
Ключевые особенности прогрессивных веб-приложений:
- отзывчивость — подходит для устройства любого форм-фактора: настольный ПК, смартфон, планшет и т.д.;
- не зависит от подключения к сети — может быть приспособлено для работы офлайн или в сетях с низкой скоростью соединения;
- гибкость установки — позволяет пользователю добавлять приложение на домашний экран/рабочий стол без возни с маркетами;
- даёт возможность делиться ссылками на приложения без необходимости полной установки.
Использование шаблона для запуска приложения
Для начала скопируйте себе этот репозиторий. Он включает в себя структуру сайта со всем необходимым для создания приложения.
Состав шаблона проекта:
-
— библиотека, помогающая реализовать взаимодействие между JavaScript и HTML на вашем сайте;
- materialize.js и CSS-стили для добавления стилей и эффектов; удалите или замените существующие компоненты, если хотите добавить что-нибудь своё;
- public/service-workers.js — позволяет запускать приложение офлайн, в данном случае кеширует файлы приложения для быстрого доступа к ним с локального устройства;
- public/manifest.json — определяет, как приложение будет выглядеть в конкретно заданной пользователем области (например, на домашнем экране смартфона); также определяет, какие компоненты будут доступны для запуска пользователем и, что не менее важно, как именно он сможет запустить их.
Добавление кода
Основные файлы для редактирования следующие:
Создав приложение, обновите список его файлов для кеширования с помощью service-workers.js , затем создайте квадратные иконки для каждого размера веб-страницы и сохраните их в images/icons . Они используются браузерами и операционными системами.
Поиск и решение возможных проблем
Если вы используете браузер Chrome, откройте окно разработчика (DevTools):
View → Разработчик → Инструменты разработчика
Storage → Local storage отображает сведения о хранимых приложением данных.
Cache → Cache Storage → template-pwa отображает список файлов, которые доступны для кеширования.
В случае возникновения проблем в работе приложения часто бывает необходимо очистить кеш. Для этого отключите и запустите service workers снова.
Работа с приложением
- Для локального запуска приложения откройте index.html;
- разместите его на хостинге;
- установите Service Worker для вашего браузера.
Теперь попробуйте запустить ваше приложение. Оно должно быть доступно для запуска через веб-браузер и добавления на домашний экран вашего мобильного устройства.
Уверен, вы слышали о Progressive Web Apps, или сокращенно PWA. Не буду вдаваться в подробности о том, что это и как работает. Для наших целей подойдет простое определение PWA — сайт, который можно добавить на главный экран телефона, и он будет работать в автономном режиме.
Мне знакомы HTML, CSS, JavaScript и я умею пользоваться GitHub. Однако я все еще новичок в веб-разработке и мне не всегда охота глубоко вникать в принципы работы того или иного явления. Чаще всего мне просто нужен понятный способ сделать нужную вещь, не просматривая при этом тонны статей. Поэтому я надеюсь, что этот пост даст вам все необходимое для создания собственного PWA.
Итак, чтобы сделать PWA, нужен сайт. Здесь предполагается, что вы умеете делать хорошо масштабируемые на всех экранах и устройствах сайты. К счастью, если не умеете, можно взять шаблон. Мне нравятся те, что на HTML5 UP и Start Bootstrap. Выберите и загрузите тему, заменив весь контент своим собственным в index.html. Можно даже изменить цвета, если хватит смелости влезть в CSS.
Для своего проекта я сделал лендинг Web Community Leads UK and IE. Большинству пользователей он не нужен в формате PWA, и я не ожидаю, что кто-то добавит его себе. Просто мне для примера нужен был какой-то небольшой и несложный сайт.
Мне понравился Hacksmiths, и так как он был open source, я его загрузил и распотрошил. Также сохранил ссылку на него и на код, чтобы можно было разветвить.
Теперь, когда есть сайт, можно превращать его в PWA. Что для этого нужно, расскажу далее.
Протестировать PWA
Чтобы проверить, работает ли сайт как PWA, можно взять Lighthouse. Lighthouse — это расширение для Chrome, которое покажет, насколько PWA годен и можно ли его улучшить.
После установки откройте сайт и нажмите значок маяка в верхнем правом углу браузера, а затем «Generate Report». Через несколько секунд откроется новая вкладка с информацией о сайте: её можно прочесть целиком, а можно сосредоточиться на числах сверху и проигнорировать остальное:
Результаты Lighthouse 36/100 еще до начала работы — это не так уж плохо, учитывая, что я еще ничего не сделал с сайтом
Сделать иконку приложения
Сайт будет располагаться на экране, а значит, нужна иконка. Не надо быть дизайнером, чтобы сделать хороший логотип. Для большинства небольших проектов я иду на the noun project и подыскиваю парочку значков, которые мне нравятся. Затем совмещаю их с помощью GIMP и добавляю фон. Вы, конечно, можете использовать любой другой способ, главное, убедитесь, что иконка вышла квадратная.
Моя иконка. Задним умом понимаю, что надо было скруглить углы
Теперь у вас есть значок приложения. Самое время прикрепить его к сайту. Я сделал это с помощью онлайн-генератора иконок. Скормите ему значок, и он выплюнет кучу разноразмерных версий, приправленных HTML-кодом. Далее:
— скачайте файл, который вам предложит генератор, и разархивируйте его;
— поместите иконки в папку с остальной частью вашего сайта;
— добавьте код, выданный генератором, в из файла index.html;
— убедитесь, что путь к значкам работает. Я поместил их все в подпапку, поэтому пришлось дописать «icons/» в каждую строку.
Прописать манифест
Следующее, что нужно сделать, это создать манифест. Манифест — это файл, содержащий данные о сайте: имя, цветовая тема, информация об иконках. У нас уже есть манифест, созданный генератором иконок, но мы его расширим.
Зайдите в генератор манифестов и заполните информацию о сайте. Если в чем-то не уверены, оставьте значение по умолчанию.
В правой части страницы есть данные JSON. Скопируйте и вставьте их поверх вашего файла manifest.json, убедившись, что форматирование не сломалось: возможно, где-то понадобится добавить запятую или удалить скобку. Мой манифест в конечном счете выглядит так. Запустите Lighthouse снова и посмотрите, работает ли манифест.
Данные Lighthouse после добавления манифеста и иконок
Добавить service worker
Service worker — это еще один файл, который мы добавляем в наш проект, он позволит сайту работать в автономном режиме. Наличие service worker — это также требование PWA, поэтому он определенно необходим.
Service worker — довольно сложная штука. К счастью, мне порекомендовали попробовать sw-toolbox и дали ссылку на код. Я скопировал код и слегка упростил его, удалив один из дополнительных файлов JavaScript, вместо этого прописав все в service worker.
Создать service worker можно в три этапа.
— Зарегистрировать service worker, добавив этот код в вашего index.html:
— Добавить sw-toolbox в свой проект — просто закинуть этот файл в корневую папку.
— Создать новый файл, назвать «sw.js» и вставить в него это:
Проверьте, чтобы все пути к файлам выглядел правильно, отредактируйте исходную документацию и перечислите все файлы, которые хотите сохранить в автономном режиме. Я использую для своего сайта только index.html и style.css, но у вас могут быть и другие.
Теперь снова протестируем сайт с помощью Lighthouse:
После добавления service worker — протестировано на localhost
Если вы хотите, чтобы service worker делал что-то еще, кроме простого сохранения определенных страниц, например, показывал конкретную автономную страницу, когда нет доступа в интернет, попробуйте pwabuilder, у него есть несколько различных скриптов service worker, которые можно использовать.
Размещение на GitHub
Теперь у вас есть PWA, пришло время поделиться им с миром. Я нашел самый простой способ сделать это бесплатно и безопасно — через GitHub Pages. GitHub GUI поможет вам разместить свой код в Github, создать репозиторий и поместить в него код. После этого найдите свой репозиторий на сайте, перейдите в настройки, прокрутите вниз и включите GitHub Pages, выбрав ветку master. Должен предоставиться живой URL-адрес вашего PWA.
Теперь результаты Lighthouse лучше, и можно поделиться своим сайтом с друзьями или загрузить его на экран телефона:
Результаты Lighthouse после размещения сайта на страницах GitHub Pages
Сайт выглядит точно так же, как вначале, но при просмотре через Samsung Internet адресная строка изменилась на светло-фиолетовый цвет темы. Появился значок «плюс», который позволяет добавлять сайт на главный экран, открывать его на весь экран и использовать в автономном режиме.
В статье я рассказал далеко не все о PWA: можно, например, отправлять push-уведомления, когда выходит новый контент. Узнать больше о PWA можно здесь.
Прогрессивные веб-приложения (PWAs) — это веб-приложения, которые постепенно улучшаются. Прогрессивные усовершенствования включают такие функции, как установка, поддержка в автономном режиме и push-уведомления. Вы также можете упаковал PWA для магазинов приложений, таких как Microsoft Store, Google Play и Mac App Store. The Microsoft Store — это коммерческий магазин приложений, встроенный в Windows 10.
В этом обзоре PWA основы создайте простое веб-приложение и расширйте его как PWA. Готовый проект работает в современных браузерах.
С помощью PWABuilder можно создать новый PWA, улучшить существующие PWA или PWA для магазинов приложений.
Предварительные условия
- Используйте Visual Studio Code для редактирования PWA кода.
- Используйте Node.js в качестве локального веб-сервера.
Создание базового веб-приложения
Чтобы создать пустое веб-приложение, выполните действия в Node Express App Generatorи назовите ваше MySamplePwa приложение.
В запросе запустите следующие команды.
Команды создают пустое веб-приложение и устанавливают любые зависимости.
Теперь у вас есть простое функциональное веб-приложение. Чтобы запустить веб-приложение, запустите следующую команду.
Начало создания PWA
Шаг 2 . Создание манифеста веб-приложений
Манифест веб-приложения — это файл JSON, содержащий метаданные о вашем приложении, такие как имя, описание, значки и другие.
Добавление манифеста приложения в веб-приложение:
В Visual Studio Code выберите папку File > Open, а затем выберите каталог, созданный MySamplePwa ранее.
Выберите, Ctrl + N чтобы создать новый файл, и ввести в следующий фрагмент кода.
Сохраните файл как /MySamplePwa/public/manifest.json .
Добавьте изображение значка приложения 512x512 с icon512.jpg именем /MySamplePwa/public/images . Пример изображения можно использовать для тестирования.
В Visual Studio Code откройте и добавьте в тег следующий фрагмент /public/index.html <head> кода.
Шаг 3 . Добавление сотрудника службы
Сотрудники службы являются ключевой технологией pwAs, позволяющей использовать сценарии, ранее ограниченные для родных приложений, таких как поддержка в автономном режиме, расширенный кэшинг и выполнение фоновых задач.
Сотрудники служб являются специализированными веб-работниками, которые перехватывают сетевые запросы из вашего веб-приложения. Сотрудники службы могут выполнять задачи, даже если PWA не запущен, в том числе:
- Обслуживание запрашиваемой ресурсы из кэша.
- Отправка push-уведомлений.
- Выполнение задач фонового получения.
- Значки с плохими изображениями.
Сотрудники служб определяются в специальном файле JavaScript, описанного в API Using Service Workers and Service Worker.
Чтобы создать сотрудника службы в проекте, используйте рецепт сотрудника сетевой службы Cache-first от PWA Builder.
Скопируйте исходные pwabuilder-sw-register.js иpwabuilder-sw.js в public папку в проекте веб-приложения.
В Visual Studio Code откройте и добавьте в тег следующий фрагмент /public/index.html <head> кода.
Теперь в вашем веб-приложении есть сотрудник службы, использующий стратегию кэш-первого. Новый сотрудник службы извлекает ресурсы из кэша сначала и из сети только по мере необходимости. Кэшные ресурсы включают изображения, JavaScript, CSS и HTML.
Подтвердите, что сотрудник службы выполняется следующим образом:
В Microsoft Edge выберите F12 открыть DevTools. Выберите приложение, а затем сотрудников службы, чтобы просмотреть сотрудников службы. Если сотрудник службы не отображается, обновите страницу.
Просмотр кэша сотрудника службы путем расширения кэша служба хранилища и выберите pwabuilder-precache. Все ресурсы, кэшные работником службы, должны отображаться. Ресурсы, кэшные работником службы, включают значок приложения, манифест приложения, CSS и файлы JavaScript.
Попробуйте PWA как автономное приложение. В DevTools выберите Сеть, а затем измените состояние с Online на автономный.
Обновление приложения. Он должен отображать автономный механизм обслуживания ресурсов приложения из кэша.
Дальнейшие действия
Чтобы создать надежную, реальную PWA, рассмотрим следующие веб-практики:
Убедитесь, что PWA работает, проверяя его в разных браузерах и средах.
Использует гибкие макеты и гибкие изображения. Адаптивный дизайн включает в себя следующие элементы, которые адаптируют UX к устройству пользователя:
Использует средства эмуляции устройств из браузера для локального тестирования или создания сеанса удаленной отладки на Windows Или Android для тестирования непосредственно на целевом устройстве.
Маршруты каждой страницы вашего сайта на уникальный URL-адрес, чтобы существующие пользователи могли помочь вам привлечь еще более широкую аудиторию с помощью обмена социальными медиа.
После установки работает независимо от состояния подключения пользователей и предоставляет настраиваемую страницу в автономном режиме, а не с помощью автономной страницы браузера по умолчанию.
Средства качества кода, такие как подкладка Webhint, используются для оптимизации эффективности, надежности, безопасности и доступности приложения.
Согласно этой статье из CNBC, к 2025 году почти три четверти населения мира будут использовать для доступа к интернету только смартфоны. Поэтому, если вы планируете создать новый веб-сайт или редизайнить старый, вам следует задуматься о создании PWA.
Что такое PWA?
Зачем создавать PWA?
Прогрессивное веб-приложение сокращает время загрузки, предоставляет пользователям возможность перехода в автономный режим, увеличивает проведенное на веб-сайте время, повышает доход, а также занимает намного меньше места, чем мобильное приложение.
Кто уже использует PWA?
Как видим, некоторые из крупнейших в мире компаний, такие как Twitter, Instagram, Uber, Pinterest, Forbes, Alibaba и другие, уже используют PWA.
Как создать PWA
Чтобы создать прогрессивное веб-приложение, для начала нужно разработать веб-сайт с отзывчивым дизайном. После выполнения первого пункта понадобятся только manifest.json и сервис-воркер.
Манифест веб-приложения
Сервис-воркер
Это файл JavaScript, который запускается отдельно от основного потока браузера. С его помощью можно:
- выполнять перехват сетевых запросов
- кэшировать или извлекать ресурсы из кеша
- доставлять push-увевомления
Жизненный цикл сервис-воркера
Создание PWA шаг за шагом за 5 минут
Пришло время реализовать прогрессивное веб-приложение!
С его помощью можно проверить, какие проблемы нужно решить для повышения производительности, доступности, лучших практик, SEO и PWA веб-сайта или веб-приложения.
Установить расширение для Chrome можно здесь.
Структура файла в нашем примере выглядит так:
Полный код на Github можно найти здесь. Вы также можете переключать ветки для отображения динамического или статического кэша.
В index.html вызываем manifest.json :
Также нужно вызвать файл app.js , в котором будет зарегестрирован воркер, и метатег, необходимый для оптимизации PWA:
Это основные теги, но, конечно, их будет еще больше, а также у них могут быть разные пути!
Статический кэш
Начнем с реализации статического кэша: укажем вручную, какие ресурсы помещать в кэш, например, все изображения, файлы CSS и js.
Этот метод полезный, особенно если вам нужно загрузить все ресурсы веб-сайта и кэшировать их при первом переходе на страницу.
Начнем с manifest.json
Теперь нужно проверить, допускает ли браузер работу воркера, и, если да, то регистрируем воркеры в app.js .
Теперь запишем воркер в файл sw.js :
В массиве хранятся все ресурсы, которые нужно поместить в кэш.
Событие Install
Добавляем в кэш все статические ассеты, которые отображаются в консоли Chrome:
Событие Activate
При изменении имени кэша могут сохраниться несколько кэшей, что приводит к возникновению проблем. Чтобы избежать этого, нужно удалить старый кэш. В этой функции мы проверяем ключ (имя кэша), и, если он отличается от предыдущего, удаляем предыдущий.
Событие Fetch
Здесь мы проверяем наличие кэша. Если он уже есть, то мы больше не загружаем ресурсы, а извлекаем их из кэша, который снова отображается в консоли.
Примечание: при изменении файла воркера нужно изменить имя кэша. Благодаря этому воркер обновляется и создается новый кэш.
Динамический кэш
Динамический кэш автоматически кэширует все fetch-запросы во время навигации. Этот кэш следует применять осторожно, потому что, если использовать его во время вызова API, то изменения новых данных не будут отображены.
В предыдущей конфигурации необходимо изменить файл sw.js следующим образом:
Событие Active
Здесь мы выполняем те же действия, что и для статического кэша.
Событие Fetch
В событии fetch мы автоматически помещаем в кэш все fetch-запросы.
Если вы попробуете оба вида кэша, а затем запустите Lighthouse, то увидите, что сайт является PWA.
Здесь можно найти код статических и динамических кэшей.
Статический или динамический: какой следует использовать?
Все зависит от потребностей и особенностей проектов. Я использую динамический кэш при отсутствии вызовов API, а при их наличии предпочитаю самостоятельно выбирать, какие ресурсы хранить с помощью статического кэша.
Говорят, чтобы статья была максимально полезной, она должна быть понятна даже твоему деду, который до сих пор не понимает чем вы там занимаетесь в своих “интырнетах”. Исходя из этого, я решил довольно простым языком расписать “Что такое PWA и нахрен оно вообще нужно?”. Поэтому, если тебе не удалось с первого раза разобраться с этой неведомой штукой, в этой статье будет всё, чтобы решить это раз и навсегда.
Цель статьи:
Я не буду подробно разжевывать тебе о PWA, так как на эту тему написано уже много статей.
Моя цель — простым языком дать основную информацию, которой тебе хватит, чтобы понимать что такое PWA. Потом показать реальный пример, которым забетонируем всё, что ты усвоил.
После прочтения ты будешь понимать следующее:
- Возможности и преимущества.
- Основные понятия.
- Настройка PWA.
- Как обновлять кэш.
А ну и еще, я настоятельно рекомендую взять сейчас ноутбук и повторять всё, что я буду делать. Иначе, информация вылетит из головы.
На этом вводная часть закончена, переходим к основной части.
Не просто верстка. Что нужно знать, чтобы верстать ХОРОШО?
Как и почему хорошая верстка напрямую влияет на качество продукта. Лучшие практики, чтобы повысить качество верстки.
Я подготовил несколько логически связанных пунктов, которыми попробую описать всю картину.
Технология PWA была анонсирована компанией Google в 2015 году. Она позиционирует себя как дополнительная надстройка, которая позволяет сделать из сайта подобие мобильного приложения.
При этом внутренности никакие не меняются, не трансформируются, сайт остаётся тем же, трансформируется только браузер.
Какие возможности предоставялет PWA?
- Отправка уведомлений, кэширование контента и установка ярлыка на рабочий стол;
- Отправка уведомлений в виде всплывающего окна, в котором можно оповещать пользователя о чем-либо;
- Работа в автономном режиме, то есть в отсутствие интернет-соединения, благодаря кэшированию контента.
Пару слов о преимуществах
Хотите разработать мобильное приложение? Уверены?
Преимущества и недостатки PWA для бизнеса в сравнении с мобльным приложением.
Не приятные моменты
Думаю, этого вполне достаточно, чтобы уже представить что такое PWA. Ну а если мало, можно почитать тут
Service Worker — Это по сути файл со скриптами, который отвечает за всю эту магию. Все запросы браузера идут через него, что даёт кучу возможностей, например, если отсутствует соединение с интернетом возвращает контент из кэша(если он конечно там есть).
В нем мы обрабатываем различные события, запись, удаление файлов из кэша и многое другое.
Скрипты работают в фоновом режиме, параллельно с приложением.
Manifest.json — Файл настроек. Там мы указывает какие иконки использовать, какой текст отображать в ярлыке, в каком формате открывать окно браузера и тд. Более подробно поговорим о нём чуть ниже.
Application Shell — Так называют оболочку для PWA. А если конкретнее, это браузер, который слегка трансформируется, чтобы дать больше возможностей разработчику.
Push Notifications — технология для отправки push-уведомлений.
А настроить её на самом деле очень просто, и чтобы это доказать, давай сразу перейдем к написанию кода, так будет проще. Погнали!
Итак, начнем с создания папки для проекта, назовем её PWA. Далее в эту папку добавим index.html, в котором будет вот такой код
Верстку я уже подготовил, но пока без стилей это выглядит плохо, поэтому добавим и их. Создаём папку css, в которую добавляем файл styles.css и вставляем в него код ниже
Конечно же, подключаем этот файл в index.html, в тэг <head>…</head>
Давай сразу подключим нужные картинки, которые можно скачать тут. Перейдешь по ссылке, там будет кнопка Clone or download, зеленая такая, жмешь её, потом кликаешь Download ZIP. Скачается архив, в нем и будут картинки в папке images. Фух, думаю довольно доступно объяснил
Открываешь проект, создаешь там директорию images, куда вставляешь все картинки. Далее открываешь index.html и вставляешь в тэг <head>…</head> мета информацию. Что это и зачем, можешь почитать тут.
В итоге, в файле index.html должна быть вот такая структура
Теперь остаётся запустить и посмотреть, что получилось. Я тут нашел очень удобный экстеншн Web Server for Chrome, который запускает локальный сервер, его нужно установить, он нам понадобится далее. Там ничего сложно, просто укажи папку с проектом, где лежит index.html, он сам всё сделает. Копируешь ссылку и вставляешь в браузер.
И вот что у нас получилось. Я бы не сказал, что это шЭдЭвр, но как по мне нормально!
Ну слушай, самое сложное, считай, мы сделали, давай-ка теперь посмотрим, что думает google валидация о нашей работе. Для этого нажми f12 и перейди во вкладку Lighthouse (раньше было Audits), там будет синяя кнопка Generate report, тыкай.
После того, как пройдет процесс валидации, мы увидим следующую картину: пункт отвечающий за PWA будет серым. Это говорит о том, что у нас отсутствуют настройки.
И если проскроллить ниже, можно увидеть рекомендации, которые нужно выполнить, чтобы PWA работало как часы.
Вкладка Lighthouse поможет тебе отслеживать все ошибки при настройки PWA.
Ну вот, наконец-то мы дошли до самого интересного.
Для начала нужно создать файл manifest.json в корне проекта. В него мы добавляем следующие метаданные:
- name — Полное название. Используется в ярлыке приложения
- short_name — Сокращенное название, будет задействовано там, где полное имя не будет помещаться
- icons — Список иконок, которые будут отображаться в ярлыке установленного приложения.
- lang — Язык по умолчанию
- start_url — Обязательный параметр. Он говорит приложению с какого файла нужно стартовать. При открытии приложения, браузер будет всегда открывать эту страницу
- display — Говорит о том, в каком формате открывать окно браузера.
- background_color — Это свойство используется на экране заставки при первом запуске приложения на мобильном устройстве.
- theme_color — Задает цвет панели инструментов и может быть отражен в предварительном просмотре приложения в переключателях задач. theme_color должен соответствовать цвету мета-темы, указанному в заголовке документа. В Нашем случае так <meta name=”theme-color” content=”black” />
Этого пока достаточно. Вот тут есть описание всех свойств этого файла, как будет время, почитай обязательно.
Подключаем manifest.json в index.html в тэг <head>…</head>
Приступаем к написанию скриптов. Создаем папку c названием js, в которую добавляем файл main.js с вот таким кодом:
Пару слов о том, что там происходит.
- Как только страница загрузилась, проверяем, поддерживает ли браузер serviceWorker, и если успешно, то идём дальше.
- Далее регистрируем наш файл sw.js(который еще предстоит настроить). Ничего необычного.
Подключаем cкрипты в index.html, но уже не в тэг <head>…</head>, а перед закрывающим тэгом </body>.
Ну теперь давай создадим сам файл sw.js. В нем будет храниться вся логика для Service Worker. Создаем его в корне проекта, и первой строкой добавим туда название кэша.
Следующей строкой добавим переменную includeToCache. В ней мы указываем файлы, которые нужно закэшировать. Да, я понимаю, что не удобно, приходится руками прописывать все файлы, но имеем то, что имеем. Зато мы всегда будем уверены, что ничего лишнего не кэшируется. Экономия трафика и стабильность.
Следующими идут события. Service Worker имеет несколько событий под капотом, их ещё называют жизненные циклы. И первое из них - это install. Оно срабатывает только один раз при записи кэша.
Событие fetch. Это событие просматривает все запросы, и если что-то совпадает с тем, что лежит в кэше, отдает совпадение из кэша. Иначе, отдает то, что приходит с сервера.
Метод respondWith, который дословно переводится “Ответь с помощью…”, как раз и отвечает за выдачу данных из кэша или тех, что вернул сервер. А если сервер ничего не вернул, то берем из кэша.
Продолжаем движение по боковой навигационной панели, находим выпадающий список с названием Cache Storage, где собственно и хранится наш кэш. Если на него нажать, можно увидеть какие файлы и контент были закэшированны.
Теперь, если отключить интернет и перезагрузить страницу, сайт будет работать.
Подведём итоги. Для того, чтобы заставить сайт работать при отсутствии интернета, не нужно устанавливать никакие фреймворки, добавлять библиотеки и прочее. Достаточно нескольких строк кода и общего понимания этой технологии.
Первая проблема, с которая я столкнулся, разбираясь с PWA, была связана с обновлением старого кэша. Но, как оказалось, это решается очень просто.
Давай поменяем парочку стилей, чтобы было видно что, что-то изменилось. Обновим страницу, убедимся что стили поменялись на странице. Обрубим соединение с интернетом, ещё раз перезагрузим страницу, но почему-то кэш не обновился, и мы видим старую версию сайта.
Решение выглядит следующим образом. В файл sw.js добавляем событие activate, при вызове которого, будем проверять имя старого и нового кэша, и если имена отличаются, то удаляем старый и добавляем новый. Да, чтобы кэш обновлялся, нам нужно менять его название при каждом обновлении кода.
В начале я не зря в имени кэша указал постфикс *_v1, это и будет его версией. На самом деле не важно, как называть, главное, чтобы имена отличались.
Если почитать код, можно увидеть условие, где сравниваются имена кэшей, и если они не совпадают, старый кэш удаляется.
Теперь кэш будет обновляться сразу после регистрации нового воркера. Добавляем его в событие install.
И в файле main.js добавим функцию update, которая при каждой перезагрузке страницы будет запускать обновление кэша.
Добавляем над методом console.log(). На самом деле не важно, главное чтобы в коллбэке .then()
Вот и всё, перезагружаем страницу. Снова открываем инструменты разработчика, ставим галочку offline в табе Service Workers на боковой панели, ещё раз перезагружаем страницу и наблюдаем за вкладкой Cache Storage. Там можно будет увидеть, как старый кэш сменится новым.
Хочу предупредить, может понадобиться несколько раз перезагрузить страницу, так как на установку нового воркера тоже требуется время (около 2 мин обычно).
Читайте также: