Супер прогрессивные веб -приложения
Супер прогрессивные веб -приложения
Superpwa помогает легко преобразовать ваш веб -сайт WordPress в прогрессивные веб -приложения.
Посетите веб -сайт »
Ошибка отчета · плагин WordPress · Отзывы · FAQ · Взносы
Добро пожаловать в репозиторий Super PWA GitHub
⚡ Демонстрация: Superpwa.com Проверьте видео, чтобы узнать, как это работает
Что такое прогрессивные веб -приложения
Progressive Web Apps (PWA) - это новая технология, которая создает середину между веб -сайтом и мобильным приложением. Они установлены на телефоне, как обычное приложение (веб -приложение), и можно получить доступ с домашнего экрана.
Пользователи могут вернуться на ваш сайт, запустив приложение с домашнего экрана и взаимодействуя с вашим веб-сайтом через приложение, похожее на приложение. Ваши возвращаемые посетители будут испытывать почти мгновенное время загрузки и наслаждаться отличными преимуществами работы вашего PWA!
Супер прогрессивные веб -приложения позволяют вам легко преобразовать веб -сайт WordPress в прогрессивное веб -приложение!
Поддержать проект
Если вы чувствуете себя очень взволнованным и хотите поддержать нас небольшим способом, пожалуйста, рассмотрите возможность в главной роли и/или поделиться репо! Это помогает нам стать известными и развивать сообщество.
Также вы можете поддержать нас, следуя социальным сетям и поделиться о нас.
? Установка
После установки SuperPwa ⚡ пользователи, просматривающие ваш веб -сайт с поддерживаемого мобильного устройства, увидят уведомление «Добавить на домашний экран» (с нижней части экрана) и сможет «установить ваш сайт» на главном экране их устройства. Каждая посещенная страница хранится локально на их устройстве и будет доступна для чтения, даже когда они оказались в автономном режиме!
SuperPwa легко настроить, для настройки вашего прогрессивного веб-приложения требуется менее минуты! Superpwa делает чистый удаление, удаляя каждую запись и файл базы данных, которые он создает. На самом деле, ни одна из настройки по умолчанию не сохраняется в базе данных, пока вы не сохраните вручную в первый раз. Давай, попробуй.
Прогрессивные веб -приложения минимальные требования
Видео о том, как добавить в домашний экран и прогрессивные веб -приложения работает в разных браузерах
Google Chrome для Android |
Mozilla Firefox для Android |
Microsoft Edge для Android |
Samung Internet для Android |
PWA на iOS - Safari Browser |
|---|
Подробные документы для тестирования PWA в браузерах
- PWA на Chrome для Android
- PWA на рабочем столе - хром
- PWA на устройстве iOS - браузер Safari
- PWA в браузере Microsoft Edge для Android
- PWA в интернет -браузере Samsung для Android
? Что в коробке
Вот текущие функции супер -прогрессивных веб -приложений:
- Создайте манифест для вашего сайта и добавьте его в главу вашего сайта.
- Установите значок приложения для вашего прогрессивного веб -приложения.
- Установите цвет фона для экрана Splash вашего прогрессивного веб -приложения.
- На вашем веб -сайте будет отображаться уведомление «Добавить на домашний экран» при обращении к поддерживаемому браузере.
- Агрессивное кэширование страниц с использованием API Cachestorage.
- Страницы после кэширования подаются, даже если пользователь не в автономном режиме.
- Установите пользовательскую страницу автономного режима: выберите страницу, которую вы хотите, чтобы пользователь увидел, когда доступ к странице, которой нет в кэше, и пользователь не работает.
- Новое в версии 1.2: поддержка цвета темы.
- Новое в версии 1.2: теперь вы можете редактировать имя приложения и короткое имя приложения.
- Новое в версии 1.2: установите начальную страницу вашего PWA.
- Новое в версии 1.2: Установите версию «Ускоренные мобильные страницы» (AMP) на стартовой странице. Поддерживаемые плагины: AMP для WordPress, AMP для WP, лучший усилитель, превосходство AMP, WP Amp.
- Новое в версии 1.3: Добавлена поддержка высококачественного брызговика. Теперь вы можете установить значок 512x512 для экрана Splash вашего прогрессивного веб -приложения.
- Новое в версии 1.3: Super Progressive Web Apps теперь учетные записи для обновлений контента и будут обновлять кэш во время обновления веб -сайта.
- Новое в версии 1.3: Улучшенная обработка обновления обслуживания в браузере.
- Новое в версии 1.4: теперь вы можете установить ориентацию по умолчанию вашего PWA. Выберите «Любой» (следуйте ориентации на устройство), «портрет» и «ландшафт».
- Новое в версии 1.4: теперь вы можете установить свойство theme_color в манифесте.
- Новое в версии 1.5: интеграция OneSignal для push -уведомлений.
- Новое в версии 1.6: совместимость с мультисайтой WordPress.
- Новое в версии 1.7: надстройки для Superpwa здесь! Корабли с дополнением к отслеживанию UTM для посещений треков, поступающих из вашего PWA.
- Новое в версии 1.8: проблемы совместимости с OneSignal теперь решаются!
- Новое в версии 1.8: Новые дополнения: Apple Touch Знаки, которые устанавливают значки ваших приложений как значки Apple Touch.
- Новое в версии 2.0: SuperPwa теперь совместим с WordPress, установленным в подразделе.
- Новое в версии 2.0: теперь вы можете установить свойство отображения из настройки SuperPwa.
- Новое в версии 2.1.1: поддержка значков Maskabale.
? Предстоящие функции:
- Уведомление о автономном индикаторе.
Поддержка устройств и браузеров для PWA
| Хром | Firefox | Край | Опера | Сафари | Samsung | UC Browser | Храбрый |
|---|
| Добавить на домашний экран | | | | | | | | |
| Работники обслуживания | | | | | | | | |
| Веб -толчок и уведомления | | | | | | | | |
| Запрос на оплату API | | | | | | | - | - |
| Мета тематическая цвет | | - | - | - | - | | - | |
Поддерживаемая бета -версия или частичная поддержка в разработке
Прогрессивным веб -приложениям нужны браузеры, которые поддерживают манифесты и работников обслуживания. В настоящее время Google Chrome (версия 57+), Chrome для Android (62), Mozilla Firefox (57), Firefox для Android (58) являются основными браузерами, которые поддерживают PWA.
Список быстро растет и, вероятно, будет поддержан в большинстве основных браузеров к концу этого года.
Зачем создавать прогрессивные веб -приложения?
Как преобразовать веб -сайт WordPress в прогрессивное веб -приложение
Установка WordPress
- Посетите WordPress Admin> плагины > Добавить новый
- Поиск супер прогрессивных веб -приложений
- Нажмите « Установить сейчас », а затем « активировать » супер -прогрессивные веб -приложения
Для установки вручную:
- Загрузить папку Super-Progressive-Web-Apps в/wp-content/plugins/каталог на вашем сервере
- Перейдите в Admin WordPress> плагины
- Активируйте плагин Super Progressive Web Apps из списка.
Настройка вашего прогрессивного веб -приложения
Ваше прогрессивное веб -приложение должно быть готово к тестированию с настройками по умолчанию при активации. Вы можете настроить его дальше и сделать его по -настоящему собственным.
- Перейдите в WordPress Admin> " superpwa "> Настройки
- Установите цвет фона для отображения экрана Splash, когда ваш PWA открыт на мобильном устройстве.
- Установите значок приложения. Это будет значок вашего PWA, когда он будет добавлен в Homestreen в мобильном устройстве. Значок должен быть изображением PNG и ровно 192 x 192 пикселей по размеру.
- Установите страницу в автономном режиме. Эта страница будет отображаться, если пользователь будет в автономном режиме, а страница, которую он запросил, уже не кэширована. В идеале вы должны создать специальную страницу WordPress и установить ее здесь. На странице, которую вы создаете, вы можете добавить примечание, с которой говорится: «Похоже, вы офлайн, и запрашиваемая вами страница сейчас недоступна. Пожалуйста, проверьте еще раз, как только вы выйдете в сеть».
- Нажмите «Сохранить настройки».
Тестирование вашего прогрессивного веб -приложения
- Откройте поддерживаемый браузер в поддерживаемом устройстве (EG: Chrome для Android (62 или выше) в устройстве Android)
- Введите свой сайт и подождите, пока он полностью не загрузится
- Вы должны увидеть всплывающее окно с значком вашего приложения и кнопкой, с которой говорится «Добавить на главном экране».
- Нажмите на него, и ваш PWA будет добавлен на домашний экран. Подождите, пока установка завершит.
- Перейдите на домашний экран и откройте PWA. Зайдите на несколько страниц, если хотите. Закрыть приложение.
- Отключите от Интернета и теперь снова откройте свой PWA. Вы должны быть в состоянии увидеть все страницы, которые вы ранее просмотрели.
- Попробуйте посетить страницу, которую вы не посещали раньше. Вы должны увидеть страницу, которую вы устанавливаете в качестве «автономной страницы» в настройках Superpwa.
? О нас
Мы дуэт, который был взволнован этой идеей. Наша миссия проста: помочь вам создать потрясающий PWA, который ваши пользователи хотели бы иметь на своем домашнем экране. Когда мы впервые услышали о PWA, мы хотели узнать все об этом. Мы потратили бесчисленные часы, учились и хотим поделиться им с миром. Пожалуйста, дайте нам свой конструктивный отзыв и поддержку.
⛷ Поддержка
Это портал разработчика для супер -прогрессивных веб -приложений, и он не должен использоваться для поддержки. Пожалуйста, посетите форумы поддержки.
? Сообщать об ошибках
Если вы когда -нибудь застряли, мы здесь, чтобы посмотреть вашу спину! Откройте новый билет на тему поддержки, если у вас есть вопрос или вам нужна функция. Мы очень рады услышать ваши отзывы, и мы хотим искренне помочь вам создать лучшее прогрессивное веб -приложение для вашего веб -сайта WordPress!
? Вклад
Любой может внести свой вклад в Super PWA, чтобы сделать его супер.
Есть различные способы внести свой вклад:
- Поднимите проблему на GitHub.
- Следуйте и взаимодействуйте с нами в социальных сетях
Поделиться в Твиттере
Поделиться на Facebook
Поделиться на LinkedIn
? Изменение
superpwa.com/changelog/.
Кредиты эмодзи: икона эмодзипедии
⬆ Вернуться к вершине
