Плагин PWA Osclass Plugin 1.0.1 (текущая-последняя)

  • Автор темы Автор темы svitlo
  • Дата начала Дата начала

svitlo

Разрушитель (V)
Сообщения
606
Реакции
253
Баллы
11 388
Плагин PWA помогает активировать возможности PWA на вашем Osclass и охватывает ключевые концепции прогрессивных веб-приложений путем создания файла манифеста (manifest.json, manifest.webmanifest), сервисных работников и настройки метаданных, используемых при создании приложения. Наибольшее преимущество PWA заключается в возможность создавать собственные приложения на основе веб-сайта для Google Play Store,
iOS App Store и магазин Microsoft, легкое приложение PWA (добавьте на главный экран), функции кэширования, функции предварительной загрузки и расширение возможностей автономной работы. Приложение PWA считается отличным дополнением или заменой самого собственного приложения, поскольку устанавливаемый, легкий (~ 1 МБ с учетом 50+ МБ для нативных приложений),
автоматически обновляется, обеспечивает работу в автономном режиме и соответствует дизайну веб-сайта. Установка приложения не требуется.

Progressive Web Apps for Osclass​


Прогрессивные веб-приложения создаются и совершенствуются с использованием современных API-интерфейсов для обеспечения лучших возможностей, возможности установки и надежности при доступе к кому угодно, где угодно и на любом устройстве с использованием единой кодовой базы. Обзор подключаемого модуляПлагин PWA для Osclass охватывает основные функции прогрессивных веб-приложений.
УСТАНОВИТЕ (ДОБАВЬТЕ НА ДОМАШНЮЮ СТРАНИЦУ) ПРИЛОЖЕНИЕ
Плагин генерирует сервис-воркеров, которые необходимы для того, чтобы мобильные браузеры отображали кнопку «Добавить на домашнюю страницу» при просмотре вашего сайта. Эта кнопка устанавливает приложение PWA, после чего веб-сайт становится легко доступным с мобильного устройства. Плагин также позволяет определять ярлыки при нажатии на значок приложения.
СОЗДАНИЕ ФАЙЛОВ ДЛЯ СОБСТВЕННОГО ПРИЛОЖЕНИЯ
Когда созданы файлы манифеста и сервисного работника, можно преобразовать приложение PWA в собственное приложение с помощью pwabuilder.com. Этот веб-сайт генерирует файлы приложений для Google Play Store, iOS App Store и Microsoft Store.
ОПЫТ УСТАНОВКИ ПРИЛОЖЕНИЯ
Плагин помогает улучшить процесс установки приложения, настраивая цвета фона и шрифта, имя приложения, описание, значки и другие аспекты процесса установки.
ФУНКЦИИ КЭШИРОВАНИЯ АКТИВОВ И ПРЕДВАРИТЕЛЬНОЙ ЗАГРУЗКИ.
где просматриваемые ресурсы (кроме изображений) кэшируются и используются в случае, если клиент использует ваше приложение в автономном режиме. В этом случае клиент может получить доступ ко всем ссылкам, к которым он обращался, находясь в сети. Функция предварительной загрузки — это функция на основе браузера, которая улучшает загрузку веб-сайта.
ПРОСМОТР В АВТОНОМНОМ РЕЖИМЕ И АВАРИЙНАЯ СТРАНИЦА В АВТОНОМНОМ РЕЖИМЕ.
Когда сервисные работники находятся в режиме кэширования, клиент может получить доступ к веб-сайту даже в автономном режиме. Плагин помогает настроить резервную автономную страницу — по умолчанию при доступе к веб-сайту в автономном режиме вы получаете страницу с ошибкой из браузера, но эту страницу можно настроить с помощью PWA, используя собственный макет,
логотип/изображение и текст. Все таблицы стилей (CSS) и сценарии (JS), а также любые ресурсы, определенные в конфигурации плагина, предварительно кэшируются при загрузке страницы, включая автономную страницу, чтобы предоставить вашим клиентам наилучшее возможное автономное приложение.
БОГАТЫЙ И СОВРЕМЕННЫЙ DATE OFFLINE EXPERIENCE
Plugin позволяет включать фоновую синхронизацию и периодическую фоновую синхронизацию для обновления кэшированных ресурсов всякий раз, когда это возможно, чтобы поддерживать актуальность пользовательского контента и улучшать работу в автономном режиме. Эти функции также должны поддерживаться браузером, совместимость с плагинами проверка.
ICONS, УПРАВЛЕНИЕ СКРИНШОТАМИ И МЕТАДАННЫМИ
PWA и современные браузеры требуют для управления большим количеством ресурсов (изображений). Плагин поможет вам загружать значки и снимки экрана и управлять ими всего за несколько кликов. Также можно настроить метаданные/теги, связанные с настройкой приложения. Манифест (.json, .
webmanifest) генератор файлов
Манифест веб-приложения является частью набора веб-технологий, называемых PWA — прогрессивные веб-приложения, которые представляют собой веб-сайты, которые можно установить на домашний экран мобильного устройства без магазина приложений.
Файл манифеста содержит основную информацию о веб-приложении в формате json, необходимую для загрузки и установки веб-приложения. Он настраивает процесс установки, а также опыт просмотра, область применения, значки, снимки экрана, ярлыки приложений, язык, направление текста, начальный URL-адрес или параметры отображения, как должно выглядеть приложение.
Когда файл манифеста сконфигурирован и конфигурация сохранена, его можно сгенерировать. После создания он копируется в корневой каталог osclass для лучшей совместимости. Параметр конфигурации манифеста
NAME
Имя веб-приложения, как оно обычно отображается для пользователя (например, среди списка других приложений или как метка для значка).
SHORT NAME
Название веб-приложения, отображаемое пользователю, если для отображения имени недостаточно места (например, в качестве метки для значка на главном экране телефона).
DESCRIPTION
Description должен объяснять или описывать, что делает приложение и какова его основная цель. DISPLAYStandalone: приложение будет выглядеть и работать как отдельное приложение.
Это может включать в себя приложение, имеющее другое окно, собственный значок в средстве запуска приложений и т. д. В этом режиме пользовательский агент будет исключать элементы пользовательского интерфейса для управления навигацией, но может включать другие элементы пользовательского интерфейса, такие как строка состояния. Полноэкранный режим: используется вся доступная область отображения, а хром пользовательского агента не отображается.
Минимальный пользовательский интерфейс. Приложение будет выглядеть и работать как отдельное приложение, но будет иметь минимальный набор элементов пользовательского интерфейса для управления навигацией. Элементы зависят от браузера. Браузер. Приложение открывается на обычной вкладке браузера или в новом окне в зависимости от браузера и платформы. Это значение по умолчанию.
DISPLAY OVERRIDE
Элемент отображения используется для определения предпочтительного режима отображения разработчика для веб-сайта. Это следует за процессом, при котором браузер возвращается к следующему режиму отображения, если запрошенный не поддерживается. В некоторых сложных случаях этого резервного процесса может быть недостаточно.
Член display_override решает эту проблему, позволяя разработчику предоставить последовательность режимов отображения, которые браузер будет учитывать перед использованием элемента display. Его значение представляет собой массив режимов отображения, которые считаются упорядоченными, и применяется первый поддерживаемый режим отображения. ORIENTATION
Определяет ориентацию по умолчанию для всех верхних частей веб-сайта.
контексты просмотра уровня.
ОБЛАСТЬ ПРИЛОЖЕНИЯ
определяет область навигации контекста приложения этого веб-приложения. Он ограничивает просмотр веб-страниц во время применения манифеста. Если пользователь выходит за рамки, он возвращается к обычной веб-странице внутри вкладки или окна браузера. Если масштаб относительный,
URL-адрес манифеста используется в качестве базового URL-адреса. START URL-адрес представляет собой начальный URL-адрес веб-приложения — предпочтительный URL-адрес, который должен загружаться, когда пользователь запускает веб-приложение (например, когда пользователь нажимает значок веб-приложения из приложения устройства). меню или главный экран). Начальный URL носит исключительно рекомендательный характер.
и пользовательский агент может проигнорировать его или позволить пользователю изменить его во время установки или позже.
НАПРАВЛЕНИЕ ТЕКСТА
Базовое направление, в котором отображать элементы манифеста, способные управлять направлением. Вместе с атрибутом языка он помогает правильно отображать языки с написанием справа налево.
ЯЗЫК Он указывает основной язык для значений элементов манифеста, поддерживающих направленность, и вместе с направлением текста определяет их направленность.
ЦВЕТ ФОНА
Замещающий цвет фона страницы приложения, отображаемый перед загрузкой таблицы стилей.
Это значение используется агентом пользователя для рисования цвета фона ярлыка, когда манифест доступен до загрузки таблицы стилей.
ЦВЕТ ТЕМЫ
определяет цвет темы по умолчанию для приложения. Это иногда влияет на то, как ОС отображает сайт (например, в переключателе задач Android цвет темы окружает сайт).
ICONSВыберите файлы изображений, которые могут служить значками приложений в различных контекстах. Например, их можно использовать для представления веб-приложения среди списка других приложений или для интеграции веб-приложения с переключателем задач ОС и/или системными настройками. Плагин позволяет настраивать следующие параметры для каждой иконки:
Источник
Размеры
Тип
Цель
СВЯЗАННЫЕ ПРИЛОЖЕНИЯ
Указание собственных приложений, которые могут быть установлены или доступны для базовой платформы — например, собственное приложение Android, доступное через Google Play Store.
Такие приложения предназначены для того, чтобы быть альтернативой веб-сайту манифеста, который обеспечивает аналогичную/эквивалентную функциональность — например, собственный эквивалент приложения. Плагин позволяет настроить, следует ли предпочесть связанные приложения (или приложение WPA), а также параметры для каждого связанного приложения:
Платформа
Я БЫ
URL-адрес
ЯРЛЫКИ
Ярлыки или ссылки на ключевые задачи или страницы в веб-приложении. Пользовательский агент может использовать эти значения для создания контекстного меню, которое будет отображаться операционной системой, когда пользователь взаимодействует со значком веб-приложения. Плагин позволяет настроить следующие параметры для каждого ярлыка:
Имя
Короткое имя
Описание
URL-адрес
Значок ярлыка (с источником, размерами,
Тип, Назначение)
Объекты SCREENSHOTS Image, представляющие ваше приложение в распространенных сценариях использования. Каждый объект должен включать src, свойство размеров и тип изображения. В Chrome изображение должно соответствовать определенным критериям:
Ширина и высота должны быть не менее 320 пикселей и не более 3840 пикселей.
Максимальный размер не может быть больше 2.
в 3 раза длиннее минимального размера.
Скриншоты должны иметь одинаковое соотношение сторон.
Поддерживаются только форматы изображений JPEG и PNG.
Плагин позволяет настроить следующие параметры для каждого скриншота:
Источник
Размеры
Тип
Платформа
Этикетка
Конфигурация сервисных воркеров и сервисные воркеры генератора являются фундаментальной частью PWA.
Они обеспечивают быструю загрузку (независимо от сети), автономный доступ, push-уведомления и другие возможности. Service Worker — это виртуальный прокси-сервер между браузером и сетью. Наконец-то они решают проблемы,
Конечные разработчики бьются над этим годами — прежде всего, над тем, как правильно кэшировать активы веб-сайта и сделать их доступными, когда устройство пользователя находится в автономном режиме. Когда сервис-воркер настроен и конфигурация сохранена, его можно сгенерировать. Плагин генерирует pwa-service-worker.js и помещает его в корневой каталог.
Когда конфигурация сервис-воркера обновлена, она должна быть сгенерирована заново, а затем обновлена в браузере (лучше всего протестировать в Chrome, Инструменты разработки > Приложение, отметьте «Обновить при перезагрузке» и/или нажмите кнопку «Обновить», чтобы обновить конфигурацию workerService-воркера
СТРАТЕГИЯ CACHE
Во всех случаях (кроме "без кеша"),
плагин также использует функции предварительной загрузки навигации браузера, чтобы сократить время загрузки веб-сайта. Предварительная загрузка навигации — это новая экспериментальная функция, которая позволяет вам сказать: «Эй, когда пользователь делает запрос навигации GET, запустите сетевой запрос, пока сервисный работник загружается». . Задержка запуска все еще существует, но она не блокирует сетевой запрос,
таким образом, пользователь получает контент раньше. Сначала кешировать. Эта стратегия сначала ищет ответ в кеше. Если какой-либо ответ будет найден ранее в кеше, он вернется и обслужит кеш. Если нет, он получит ответ из сети, обслужит его и закэширует для следующего раза.
Сначала сеть — Эта стратегия попытается получить ответ из сети. В случае успеха он кэширует ответ и возвращает ответ. Если сеть выйдет из строя, она вернется к кешу и обработает ответ там. Stale-While-Revalidate – эта стратегия проверяет наличие ответа в кеше. Если он доступен, он доставлен,
и кеш перепроверяется. Если он недоступен, сервисный работник извлекает ответ из сети и кэширует его. Без кеша. Эта стратегия вообще не использует кеш.
ФОНОВАЯ СИНХРОНИЗАЦИЯ
Фоновая синхронизация — это новый веб-API, который позволяет откладывать действия до тех пор, пока у пользователя не будет стабильного подключения. .
Это полезно для того, чтобы убедиться, что все, что пользователь хочет отправить, действительно отправлено. ПЕРИОДИЧЕСКАЯ ФОНОВАЯ СИНХРОНИЗАЦИЯ API периодической фоновой синхронизации позволяет PWA периодически получать свежий контент в фоновом режиме, чтобы пользователи могли немедленно получить к нему доступ, когда они позже снова откроют приложение. Используя API периодической фоновой синхронизации,
PWA не нужно загружать новый контент (например, новые статьи), пока пользователь использует appWORKER VERSION. Помогает очистить «кеш» сервисного работника и инициировать повторную установку (повторную активацию) сервисного работника, чтобы обновить его.
Плагин PWA для управления конфигурацией и ресурсами содержит множество различных параметров, которые помогают настроить ваш сайт для работы с PWA.
Mode - выбор режима плагина (базовый/расширенный). В базовом режиме многие параметры в файле манифеста скрыты.
Режим отладки - включить получение сообщений от сервис-воркера в консоль,
чтобы легко отлаживать сервис-воркер и выявлять возможные проблемы и/или поддержку браузера.
Создавайте дополнительные метатеги (например, цвет темы, фавиконы и т. д.)
Подключить файл манифеста к голове
Крюк сервисного работника к голове
Настройка логотипа офлайн-страницы (офлайн-опыт)
Изображения Favicon (ico, 16 x 16, 32 x 32)
Значок маски — svg для браузера Safari
Сенсорный значок Apple
Менеджер изображений
Плагин содержит встроенный загрузчик и менеджер иконок и скриншотов, чтобы быстро загружать одно или несколько изображений, управлять ими и/или удалять их.
 

Вложения

  • изображение_2022-10-28_213135335.png
    изображение_2022-10-28_213135335.png
    65,8 КБ · Просмотры: 3
Назад
Верх