Плагин PWA Osclass Plugin (Native Apps Tool) v1.0.1

Плагин PWA помогает задействовать возможности PWA в вашем Osclass и охватывает ключевые концепции прогрессивных веб-приложений путем генерации файла манифеста (manifest.json, manifest.webmanifest), сервис-воркеров и настройки метаданных, используемых при генерации приложения.

Наибольшее преимущество PWA заключается в возможности создания собственных приложений на основе веб-сайта для Google Play Store, iOS App Store и Microsoft Store, облегченного приложения PWA (добавление на главный экран), функций кэширования, функций предварительной загрузки и улучшения работы в автономном режиме.

Приложение PWA считается отличным дополнением или заменой для собственного приложения, поскольку оно обеспечивает взаимодействие с приложением, легко устанавливается, занимает мало места (~1 МБ, учитывая, что для собственных приложений оно занимает более 50 МБ), автоматически обновляется, обеспечивает работу в автономном режиме и соответствует дизайну веб-сайта.

Установка приложения не требуется

Прогрессивные веб-приложения для Osclass​

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

Обзор плагина​

Плагин PWA для Osclass охватывает основные функции Progressive Web Apps.

Установить (добавить на домашнюю страницу) приложение​

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

Плагин также позволяет определять сочетания клавиш при нажатии на значок приложения.

Генерация файлов для собственного приложения​

После создания файлов manifest и service worker можно преобразовать приложение PWA в нативное приложение с помощью . Этот веб-сайт генерирует файлы приложений для Google Play Store, iOS App Store и Microsoft Store.

Конфигурация процесса установки внутри приложения​

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

Функции кэширования и предварительной загрузки активов​

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

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

Оффлайн-просмотр и резервная страница для оффлайн-просмотра​

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

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

Все таблицы стилей (CSS) и скрипты (JS), а также любые ресурсы, определенные в конфигурации плагина, предварительно кэшируются при загрузке страницы, включая автономную страницу, чтобы обеспечить вашим клиентам наилучший возможный опыт работы с автономным приложением.

Богатый и актуальный опыт работы в автономном режиме​

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

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

Иконки, скриншоты и управление метаданными​

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

Генератор файлов манифеста (.json, .webmanifest)​

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

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

Когда файл манифеста настроен и конфигурация сохранена, его можно сгенерировать. После генерации он копируется в корневой каталог osclass для лучшей совместимости.

Параметр конфигурации манифеста​

Имя​

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

Короткое имя​

Имя веб-приложения, отображаемое пользователю, если для отображения имени недостаточно места (например, в качестве метки для значка на главном экране телефона).

Описание​

Описание должно объяснять или описывать, что делает приложение и какова его основная цель.

Отображать​

Standalone : приложение будет выглядеть и ощущаться как автономное приложение. Это может включать приложение с другим окном, собственной иконкой в панели запуска приложений и т. д. В этом режиме пользовательский агент исключит элементы пользовательского интерфейса для управления навигацией, но может включать другие элементы пользовательского интерфейса, такие как строка состояния. Fullscreen : используется вся доступная область отображения, и хром пользовательского агента не отображается. Minimal UI : приложение будет выглядеть и ощущаться как автономное приложение, но будет иметь минимальный набор элементов пользовательского интерфейса для управления навигацией. Элементы будут различаться в зависимости от браузера. Browser : приложение открывается в обычной вкладке браузера или в новом окне в зависимости от браузера и платформы. Это значение по умолчанию.

Переопределение отображения

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

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

Ориентация​

Определяет ориентацию по умолчанию для всех контекстов просмотра верхнего уровня веб-сайта.

ОБЛАСТЬ ПРИМЕНЕНИЯ​

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

НАЧАТЬ URL-адрес​

Представляет начальный URL веб-приложения — предпочтительный URL, который должен быть загружен, когда пользователь запускает веб-приложение (например, когда пользователь нажимает на значок веб-приложения в меню приложений устройства или на главном экране). Начальный URL носит исключительно рекомендательный характер, и пользовательский агент может игнорировать его или разрешить пользователю изменить его во время установки или после нее.

Направление текста​

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

Язык

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

Фоновый цвет​

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

Цвет темы​

Определяет цвет темы по умолчанию для приложения. Иногда это влияет на то, как ОС отображает сайт (например, в переключателе задач Android цвет темы окружает сайт).

Иконки​

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

Плагин позволяет настраивать следующие параметры для каждой иконки:

• Источник
• Размеры
• Тип
• Цель

Связанные приложения​

Указание собственных приложений, которые могут быть установлены или доступны базовой платформе — например, собственное приложение Android, доступное через Google Play Store. Такие приложения предназначены для того, чтобы быть альтернативами веб-сайту манифеста, который предоставляет схожую/эквивалентную функциональность — как эквивалент собственного приложения.

Плагин позволяет настроить, следует ли отдавать предпочтение связанным приложениям (или предпочесть приложение WPA), а также параметры для каждого связанного приложения:

• Платформа
• ИДЕНТИФИКАТОР
• URL

Ярлыки​

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

Плагин позволяет настраивать следующие параметры для каждого ярлыка:

• Имя
• Короткое имя
• Описание
• URL
• Значок ярлыка (с источником, размерами, типом, назначением)

Скриншоты​

Объекты изображений, представляющие ваше приложение в общих сценариях использования. Каждый объект должен включать src, свойство sizes и тип изображения.

В Chrome изображение должно соответствовать определенным критериям:

• Ширина и высота должны быть не менее 320 пикселей и не более 3840 пикселей.
• Максимальный размер не может превышать минимальный размер более чем в 2,3 раза.
• Скриншоты должны иметь одинаковое соотношение сторон.
• Поддерживаются только форматы изображений JPEG и PNG.

Плагин позволяет настраивать следующие параметры для каждого снимка экрана:

• Источник
• Размеры
• Тип
• Платформа
• Этикетка

Конфигурация и генератор сервисных рабочих​

Service Workers являются фундаментальной частью PWA. Они обеспечивают быструю загрузку (независимо от сети), офлайн-доступ, push-уведомления и другие возможности.

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

Когда service worker настроен и конфигурация сохранена, его можно сгенерировать. Плагин генерирует pwa-service-worker.js и помещает его в корневой каталог.

После обновления конфигурации Service Worker ее необходимо сгенерировать заново, а затем обновить в браузере (лучше всего протестировать в Chrome, Dev Tools > Application, установить флажок «Обновлять при перезагрузке» и/или нажать кнопку «Обновить», чтобы обновить Worker).

Конфигурация сервисного работника​

Стратегия кэширования​

Во всех случаях (кроме «без кэша») плагин также использует функции предварительной загрузки навигации браузера для сокращения времени загрузки веб-сайта.

Предварительная загрузка навигации — это новая экспериментальная функция, которая позволяет вам сказать: «Эй, когда пользователь делает запрос навигации GET, запустите сетевой запрос, пока загружается service worker». Задержка запуска все еще есть, но она не блокирует сетевой запрос, поэтому пользователь получает контент раньше.

Cache first - Эта стратегия сначала ищет ответ в кэше, если какой-либо ответ найден ранее кэшированным, он вернется и обслужит кэш. Если нет, он извлечет ответ из сети, обслужит его и кэширует для следующего раза.

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

Stale-While-Revalidate — эта стратегия проверяет наличие ответа в кэше. Если он доступен, он доставляется, а кэш повторно проверяется. Если он недоступен, service worker извлекает ответ из сети и кэширует его.

Без кэша . Эта стратегия вообще не использует кэш.

Фоновая синхронизация​

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

Периодическая фоновая синхронизация​

API периодической фоновой синхронизации позволяет PWA периодически получать свежий контент в фоновом режиме, чтобы пользователи могли немедленно получить к нему доступ, когда они позже снова откроют приложение. Используя API периодической фоновой синхронизации, PWA не нужно загружать новый контент (например, новые статьи), пока пользователь использует приложение

Рабочая версия​

Помогает очистить «кэш» Service Worker и инициировать повторную установку (повторную активацию) Service Worker для его обновления.

Управление конфигурацией и ресурсами​

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

• Mode - выбор режима плагина (базовый/расширенный). В базовом режиме многочисленные параметры в файле манифеста скрыты.
• Режим отладки — позволяет получать сообщения от Service Worker в консоль, что упрощает отладку Service Worker и выявление возможных проблем и/или проблем с поддержкой браузера.
• Сгенерируйте дополнительные метатеги (например, цвет темы, значки сайтов и т. д.)
• Прикрепить файл манифеста к заголовку
• Прикрепите работника сервиса к голове
• Настроить логотип офлайн-страницы (офлайн-опыт)
• Изображения Favicon (ico, 16x16, 32x32)
• Значок маски - svg для браузера Safari
• Значок сенсорного экрана Apple

Менеджер изображений​

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