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

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

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

Технология 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.json">

Далее, нужно создать- в корне сайта- два файла 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.

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

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

Рассылка новинок каталога в автоматическом режиме Просмотров: 1145 Что бы реализовать рассылку новинок каталога на email-ы пользователей, можно воспользовать... AJAX корзина с отправкой количества из раздела каталога Просмотров: 19095 Столкнулся с задачкой: нужно было на одном сайте реализовать интерактивный прайс лист. При... Фотогалерея на базе компонента новостей, с fancybox. Просмотров: 1512 Это заметка обновление к очень старой, уже имеющейся на сайте. Сделаем что-то типа фотогал... Создание раздела инфоблока при регистрации пользователя в Битрикс Просмотров: 7873 Например вам нужно выводить информацию исключительно для определенного пользователя. Само ... Перенос Битрикс сайта с хостинга на хостинг, инструкция Просмотров: 25984 Достаточно часто спрашивают как перенести сайт работающий на 1С Битрикс с одного хостинга ... Ajax форма обратной связи, реализация в битрикс Просмотров: 7550 Иногда, на сайте требуется создать форму обратной связи, которая будет писать все данные в... Открытие мобильного приложения Apache Cordova по ссылке Просмотров: 662 Достаточно часто нужно реализовывать открытие мобильного приложения по ссылке. Например: п... Denwer c PHP 7.1.8 и MYSQL 5.7 оптимизированный для Битрикс Просмотров: 29478 В последнее время, все чаще приходиться работать на Windows, хотя и не люблю эту ОС- с точ... Модифицировать состав заказа #ORDER_LIST# в почтовом событии "Новый з... Просмотров: 28402 Если вы хотите как-то по особенному сверстать состав заказа в почтовом уведомлении 1С-Битр... Установить цену товара из свойства инфоблока Просмотров: 8675 На одном из проектов, нужно было единоразово заполнить цены товаров из свойства инфоблока... Заполнить коэффициент единицы измерения (MEASURE_RATIO) из свойства э... Просмотров: 5694 Задачка: Каталог наполняется из 1С, но 1С не передает коэффициент единицы измерения (особе... Композитный сайт на 1С-Битрикс Просмотров: 3028 Для новых клиентов: Все новые проекты будут включать в себя применение технологии "Компози... Настройка выгрузки товаров в Яндекс Маркет с сайта Битрикс Просмотров: 36654 Настройка выгрузки в Яндекс маркет в формате yml, выполняется достаточно просто, кроме одн... Заполнить картинки разделов каталога из картинок товаров Просмотров: 324 Задача: в каталоге, разделы и подразделы выводятся в виде плитки над товарами, с картинкам... Как вывести картинки к разделам на базе _ext меню Просмотров: 7069 Просто для эстетической красоты, нужно вывести в меню разделов сайта картинки или иконки. ... Отфильтровать новости в Битрикс за заданный период Просмотров: 15553 Иногда, нужно отфильтровать элементы (новости например) по дате в Битрикс, с помощью компо... Вывести дополнительное пользовательское поле, использование полей в ф... Просмотров: 15436 Если вам нужно вывести дополнительное пользовательское поле типа "Привязка к разделам инфо... Вывести список всех пользователей с необходимой информацией Просмотров: 24030 Если нужно, на какой-либо странице сайта, вывести всех пользователей из группы "Зарегистир... Добавить все свойства инфоблока в умный фильтр одним разом Просмотров: 9888 Если у вас достаточно много свойств, в инфоблоке с товарами, например: больше 1000-чи, пос... Индивидуальные цены в 1С-Битрикс: в каталоге и при оформлении заказа Просмотров: 4909 В этой заметке постараюсь описать процесс реализации индивидуальных цен, для пользователей...