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

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

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

Технология 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. За кулисами он использует протокол, основанный на настраиваемых вкладках, а также встроенный механизм, гарантирующий, что веб-сайт и приложение принадлежат одному разработчику. Как это сделать смотрите в видео:

Guest12.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-го года пишу заметки по разработке сайтов на Битрикс.
Вы можете задавать уточняющие вопросы в комментариях- отвечаю или дополняю заметки по возможности.

Вывести минимальную цену торговых предложений в Битрикс Просмотров: 25813 Если у товара несколько торговых предложений и у каждого предложения разные цены, иногда т... Автогенерация символьных кодов разделов и элементов Битрикс Просмотров: 14027 Иногда нужно создать символьные коды для разделов и элементов. Например: если сайт создан ... Пункты меню из разделов инфоблока Битрикс Просмотров: 87850 В принципе это стандартная возможность системы управления битрикс, но почему-то часто спра... Если товар в корзине, поменять значение input на "В корзине" Просмотров: 9402 Если Вам нужно поменять текст на кнопке, добавляющей товар в корзину, достаточно воспользо... Перенос Битрикс сайта с хостинга на хостинг, инструкция Просмотров: 24856 Достаточно часто спрашивают как перенести сайт работающий на 1С Битрикс с одного хостинга ... Постраничная навигация в списке разделов Битрикс- catalog.section.lis... Просмотров: 7646 Если в магазине очень много разделов и хочется вывести их с постраничной навигацией: можно... Хостинг панель BrainyCp: оптимизация под 1С-битрикс Просмотров: 6966 В этой видео-заметке расскажу как установить и оптимизировать панель управления сервером B... Композитный сайт на 1С-Битрикс Просмотров: 2629 Для новых клиентов: Все новые проекты будут включать в себя применение технологии "Компози... Глобальные фильтры на всякие случаи жизни Просмотров: 41398 Глобальный фильтр, нужен чаще всего, для вывода определенных элементов, из общего массива... Информация о заказах и содержимое корзины текущего пользователя. Просмотров: 10779 В процессе разработки сайта могут понадобиться рецепты приведенные ниже. Использовать можн...