Телеграм: @bazarow_ru Почта: mihail@bazarow.ru

Создание PWA для сайта на 1С-Битрикс

Просмотров: 3300

Технология PWA позволяет создать приложение для любого сайта. Не обязательно работающего на 1С-Битрикс, данная заметка будет актуальной для любого типа сайта и на любой системе управления. В целом, Progressive Web Applications (PWA), дает возможность создать приложение для сайта, не отличимое от полноценных приложений. На рабочем столе появляется иконка и сайт запускается без элементов управления браузера.

В целом, Progressive Web Applications (PWA), дает возможность создать приложение для сайта, не отличимое от полноценных приложений. На рабочем столе появляется иконка и сайт, запускается без элементов управления браузера. Выглядет как вполне себе, обычно приложение (при желании, можно сделать и с элементами управления).

Можно, реализовать работу приложения в офлайне, отправлять push-уведомления пользователям, взаимодействовать с внутренними службами и сервисами смартфона (геолокация, камера, панель уведомлений).

Создаем PWA для сайта: манифест и service-worker

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

Для начала создади иконки приложения и файл манифеста. Открывем сайт PWA Manifest Generator. Подобных сайтов много, просто взял первый попавшийся.

Заполняем все поля: название, описание и цветовая гамма приложения и подгружаем будущую иконку приложения в размере 512 на 512 пикселей.

Создание PWA для сайта на 1С-Битрикс

После генреции получаем архив ic_launcher.zip с файлами и распаковываем его в корень нашего сайта. В шаблон сайта, в секцию head прописываем путь к файлу manifest.json (будет в архиве).

<link rel="manifest" href="manifest.webmanifest">

Далее, нужно создать- в корне сайта- два файла pwabuilder-sw.js и pwabuilder-sw-register.js

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

Содержимое pwabuilder-sw.js:

importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
const CACHE = "pwabuilder-page";
const offlineFallbackPage = "offline.html";

self.addEventListener("message", (event) => {
  if (event.data && event.data.type === "SKIP_WAITING") {
    self.skipWaiting();
  }
});

self.addEventListener('install', async (event) => {
  event.waitUntil(
    caches.open(CACHE)
      .then((cache) => cache.add(offlineFallbackPage))
  );
});

if (workbox.navigationPreload.isSupported()) {
  workbox.navigationPreload.enable();
}

self.addEventListener('fetch', (event) => {
  if (event.request.mode === 'navigate') {
    event.respondWith((async () => {
      try {
        const preloadResp = await event.preloadResponse;

        if (preloadResp) {
          return preloadResp;
        }

        const networkResp = await fetch(event.request);
        return networkResp;
      } catch (error) {

        const cache = await caches.open(CACHE);
        const cachedResp = await cache.match(offlineFallbackPage);
        return cachedResp;
      }
    })());
  }
});

Содержимое pwabuilder-sw-register.js:

import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';
const el = document.createElement('pwa-update');
document.body.appendChild(el);

В шаблон сайта, в самый низ, добавляем подключение файла

<script src="/pwabuilder-sw-register.js"></script>

В секцию head (в файле header.php) добавляем:

<script type="module" data-skip-moving="true">
import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';
const el = document.createElement('pwa-update');
document.body.appendChild(el);
</script>

Оффлайн режим PWA

Тут все просто: создаем в корне сайта файл offline.html и добавляем в него что угодно. Оповещение о том что нет сети, контакты.... да хоть полноценный лендинг на одну страничку.

В принципе и все, ваш сайт поддерживает Progressive Web Applications. В одной из следующих заметок расскажу как сделать из PWA полноценное приложение, которое можно будет опубликовать в GooglePlay: TWA — специальный режим на базе кастомных вкладок Chrome.

Создание TWA из PWA и публикация в GooglePlay

TWA — специальный режим на базе кастомных вкладок Chrome. Это открытый стандарт, который позволяет браузерам предоставлять специальный контейнер, который отображает PWA внутри приложения Android. За кулисами он использует протокол, основанный на настраиваемых вкладках, а также встроенный механизм, гарантирующий, что веб-сайт и приложение принадлежат одному разработчику. Как это сделать смотрите в видео:

Guest 12.04.2022
Где код и строчки из файлов android-studio?
Михаил Базаров 12.04.2022
Шпаргалка

Код
build.gradle (Project: NAME))
 maven { url 'https://jitpack.io' }


 В Module:
 implementation 'com.onesignal:OneSignal:[4.0.0, 4.99.99]'
 implementation 'com.google.androidbrowserhelper:androidbrowserhelper:2.2.0'
 implementation 'com.github.GoogleChrome:custom-tabs-client:a0f7418972'
 implementation platform('com.google.firebase:firebase-bom:26.5.0')

 compileOptions {
   sourceCompatibility JavaVersion.VERSION_1_8
   targetCompatibility JavaVersion.VERSION_1_8
}

в секцию defaultConfi
manifestPlaceholders = [
      hostName: "site.ru",
      defaultUrl: "https://site.ru",
      launcherName: "NAME",
      assetStatements: '[{ "relation": ["delegate_permission/common.handle_all_urls"], ' +
        '"target": {"namespace": "web", "site": "https://site.ru"}}]'
    ]

В файл AndroidManifest.xml. > application
<meta-data
       android:name="asset_statements"
       android:value="${assetStatements}" />
<activity
       android:name="android.support.customtabs.trusted.LauncherActivity"
       android:label="${launcherName}"
        android:exported="true"
       >

   <meta-data
           android:name="android.support.customtabs.trusted.DEFAULT_URL"
           android:value="${defaultUrl}" />
   <intent-filter>
       <action android:name="android.intent.action.MAIN" />
       <category android:name="android.intent.category.LAUNCHER" />
   </intent-filter>
   <intent-filter android:autoVerify="true">
       <action android:name="android.intent.action.VIEW"/>
       <category android:name="android.intent.category.DEFAULT" />
       <category android:name="android.intent.category.BROWSABLE"/>
       <data
               android:scheme="https"
               android:host="${hostName}"/>
   </intent-filter>
</activity>
Гость 12.04.2022
Спасибо! Но при запуске ошибка, в консоли вот что:

Unable to instantiate activity ComponentInfo{ru.blalba.bla/android.support.customtabs.trusted.LauncherActivity}: java.lang.ClassNotFoundException: Didn't find class "android.support.customtabs.trusted.LauncherActivity" on path
Гость 12.04.2022
 > Could not find com.github.GoogleChrome:custom-tabs-client:a0f7418972.
VMaxS 03.03.2023
Тема интересная, но  к версии Android Studio 11.0.15 не применимо
Михаил Базаров 03.03.2023
Да, там постоянно что-то меняется. Давно плюнул на публикацию PWA с сторы.
Проще, быстрее а главное гибче, делать это на Apache Cordova

Записная книжка разработчика

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

Увидеть файл заказов который передаст Битрикс в 1С Просмотров: 24512 Для диагностики обмена заказов, интернет-магазина на 1С Битрикс с 1С Управление Торговлей,... Fancybox в стандартном шаблоне детальной карточки товара, вместо вспл... Просмотров: 127 Задача: заменить работу с изображениями в стандартном или кастомном шаблоне детальной карт... Показ страницы сайта в боковом слайдере, на примере всплывающей формы... Просмотров: 3250 Если вы хотите сделать подгрузку любой страницы сайта в боковой слайдер, для этого в битри... Создать pdf файл из элемента инфоблока, дать скачать пользователю, по... Просмотров: 5362 Задача: при каждом посещении статьи, на сайте, нужно создавать pdf файл с ее содержимым и ... Почтовое событие на создание нового элемента инфоблока, через API Просмотров: 15730 Иногда при разработке сайта требуется реализовать функционал добавления элементов инфоблок... Сниппеты типографики bootstrap, для Битрикс Просмотров: 8280 Если вы подключили bootstrap к своему сайту, или сверстали весь шаблон, подключив bootstra... Многосайтовость битрикс на разных доменах и поддоменах Просмотров: 63231 Часто спрашивают "как настроить многосайтовость Битрикс на разных доменах", решил записать... Ajax форма обратной связи, реализация в битрикс Просмотров: 8704 Иногда, на сайте требуется создать форму обратной связи, которая будет писать все данные в... Отсортировать элементы в Битрикс по свойству привязка к разделам Просмотров: 29016 При создании достаточно сложных интернет-магазинов на Битрикс, иногда встает задача помимо... Автоматически помечаем новинки лейблом в каталоге битрикс Просмотров: 6030 Если вы хотите помечать новинки каталога, вашего магазина на Битрикс, лейблом "Новинка". И... Вывести свойство отдельно ото всех или исключить из всех Просмотров: 7695 Иногда, на сайте, под управлением 1С-Битрикс, нужно вывести какое-то конкретное свойство о... Вывести дату окончания скидки в карточке товара Просмотров: 4533 Если нужно вывести информацию о скидке в карточке товара, можно воспользоваться методом Наличие на складах в умном фильтре 1С-Битрикс, с автоматическим обнов... Просмотров: 1160 Задача: добавить возможность фильтрации товаров по складам в умном фильтре. Данные должны ... Перенос Битрикс сайта с хостинга на хостинг, инструкция Просмотров: 27427 Достаточно часто спрашивают как перенести сайт работающий на 1С Битрикс с одного хостинга ... Получение местоположений через API Битрикс c поиском по select. Просмотров: 23250 Если нужно получить список городов из модуля "Местоположения" можно воспользоваться API Би... Автогенерация символьных кодов разделов и элементов Битрикс Просмотров: 16169 Иногда нужно создать символьные коды для разделов и элементов. Например: если сайт создан ... Привязка к разделам в компоненте "Добавления элементов пользователем" Просмотров: 12830 В системе управления 1С Битрикс есть компонент "Форма добавления / редактирования" - котор... Индивидуальные цены в 1С-Битрикс: в каталоге и при оформлении заказа Просмотров: 6094 В этой заметке постараюсь описать процесс реализации индивидуальных цен, для пользователей... Базовая защита "Битрикс виртуальная машина" от DDoS атак. Просмотров: 5877 Данный способ защиты не панацея, и скорее всего не спасет от профессиональной DDoS атаки, ... Вывод даты создания элемента в правильном формате в Битрикс Просмотров: 23289 Если нужно вывести дату создания новости, статьи или товара в каталоге, в принципе любого ...