Возможно ли создать хорошее мобильное приложение на движке DLE?

nezov009 · February 28

Приветствую! Возможно ли создать приложение на андроид под движок DLE? В интернете мало информации, походу даже не один сайт не имеет мобильного приложения под DLE.

Я уже начинаю жалеть о том, что я перешёл на DLE в сентябре 2019.
До этого я был на WordPress, причиной перехода стало недостаточно функций, а именно регистрация, добавления записи (пользователями). Плагины влияли на скорость сайта, у меня было 28 активных плагинов, которые были нужны для работы функций. С посещаемостью было в среднем 200-300 уникальных в сутки.

После перехода на DLE посещаемость выросла, и сейчас оно начинает расти. На тот момент DLE для меня был хорошим движком в плане регистрации и добавления записей от пользователей. Также скорость страниц быстрая.

woolfon · February 28

Вобщем если речь идет о переносе веб в приложение, то поможет только WebView компонент, это какбэ браузер который работает только с вашим сайтом, есть минусы. Почитайте в интернете. Также можно создать manifest.json и вынести ярлык сайта на рабочий стол, после чего он будет открываться без браузерной строки поиска и прочих панелей, напоминая собой приложение.
У меня был подобный опыт, я сделал отдельное представление для своего сайта и вынес его в отдельный url, после чего создал приложение с webview которое открывало этот url.
ps. Или речь идет о создании API из под DLE чтобы нативное приложение с ним общалось?

petroff · February 28

4 часа назад, woolfon сказал:

Также можно создать manifest.json и вынести ярлык сайта на рабочий стол, после чего он будет открываться без браузерной строки поиска и прочих панелей, напоминая собой приложение

Как это сделать, ссылки на почитать есть?

nezov009 · February 28

9 часов назад, woolfon сказал:

Или речь идет о создании API из под DLE чтобы нативное приложение с ним общалось

Всмысле о создании?? API нет в DLE???

Тогда это что?

woolfon · March 1

В 28.02.2020 в 7:11 PM, nezov009 сказал:

Всмысле о создании?? API нет в DLE???

Тогда это что?

Слушайте, я в дле не разбираюсь, вы вопрос сформулируйте более детально

woolfon · March 1

В 28.02.2020 в 2:03 PM, petroff сказал:

Как это сделать, ссылки на почитать есть?

Долго пытался найти тот сайт-генератор manifest.json которым пользовался я, но так и не нашел. Но их много, в основном бурж. Ну или я так искал) Гуглится по словам "website to app", "manifest.json generator", "pwa builder". Ну там разберетесь. Для примера, на своем сайте я подключил во такой manifest.json:

{
  "lang": "ru",
  "name": "Название сайта",
  "short_name": "site.kz",
  "start_url": "https://site.kz/",
  "display": "standalone",
  "background_color": "#fff",
  "description": "короткое описание сайта.",
  "icons": [{
    "src": "img/touch/icon-48x48.png",
    "sizes": "48x48",
    "type": "image/png"
  }, {
    "src": "img/touch/icon-72x72.png",
    "sizes": "72x72",
    "type": "image/png"
  }, {
    "src": "img/touch/icon-96x96.png",
    "sizes": "96x96",
    "type": "image/png"
  }, {
    "src": "img/touch/icon-144x144.png",
    "sizes": "144x144",
    "type": "image/png"
  }, {
    "src": "img/touch/icon-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  }]
}

После чего, в андроиде открываем сайт через браузер и в меню браузера нажимаем "добавить на главный экран". После чего на рабочем столе появляется иконка нашего сайта и он открывается без браузерной строки поиска и прочих кнопок.

petroff · March 1

3 часа назад, woolfon сказал:

После чего на рабочем столе появляется иконка нашего сайта и он открывается без браузерной строки поиска и прочих кнопок.

Прикольная плюшка. Странно, что я не знал о такой возможности. Осталось только кнопку для сайта сделать. В инете почему-то гуглятся кнопки только на js для popup окна, а popup и seo, считаю, редко совместимы

woolfon · March 1

5 часов назад, petroff сказал:

Прикольная плюшка. Странно, что я не знал о такой возможности. Осталось только кнопку для сайта сделать. В инете почему-то гуглятся кнопки только на js для popup окна, а popup и seo, считаю, редко совместимы

не понял о какой кнопке идёт речь. Если про иконку, то это тотже favicon только лучшего качества и большего разрешения

petroff · March 1

58 минут назад, woolfon сказал:

не понял о какой кнопке идёт речь.

Сделать кнопку на сайт, чтобы юзеры по клику добавляли иконку сайта на экран, а не ковырялись в браузере

woolfon · March 2

17 часов назад, petroff сказал:

Сделать кнопку на сайт, чтобы юзеры по клику добавляли иконку сайта на экран, а не ковырялись в браузере

интересная идея, если будет решение дайте знать)

petroff · March 2

2 часа назад, woolfon сказал:

интересная идея, если будет решение дайте знать)

Да я вряд ли что-то буду делать, пока не появится в работе подходящий сайт с большой постоянной аудиторией

petroff · April 5

В 02.03.2020 в 9:42 AM, woolfon сказал:

интересная идея, если будет решение дайте знать)

Вроде вот решение. Надо пробовать

woolfon · April 10

В 05.04.2020 в 4:20 PM, petroff сказал:

Вроде вот решение. Надо пробовать

Сделал) хотя и пришлось повозиться.
index.js и sw.js мне пришлось хранить в корне, потому, что если сохранить их например в /js/ то Service Worker не запускается. Целый день промучился и решил оставить в корне.
Второй момент - это кэширование:

self.addEventListener('install', function(e) {
 e.waitUntil(
   caches.open('video-store').then(function(cache) {
     return cache.addAll([
       '/pwa-examples/a2hs/',
       '/pwa-examples/a2hs/index.html',
       '/pwa-examples/a2hs/index.js',
       '/pwa-examples/a2hs/style.css',
       '/pwa-examples/a2hs/images/fox1.jpg',
       '/pwa-examples/a2hs/images/fox2.jpg',
       '/pwa-examples/a2hs/images/fox3.jpg',
       '/pwa-examples/a2hs/images/fox4.jpg'
     ]);
   })
 );
});

Например у меня сайт на Yii2 с заводским кэшем pagecache и формы работают через _csrf токен, и если кэшировать страницу еще и через sw.js, то формы взаимодействие пользователя с сайтом начинает глючить. Но как я понял кэширование в sw.js обязательно, без него не запустится service worker. Я пока что одну картинку лого добавил в массив cache.addAll и всё работает нормально. Пока еще не решил оставлять на сайте эту плюшку или нет, по этому собрал всё на соплях.

Кстати я не использую саму html кнопку из примера. Мне понравилось только всплывающее нативное окно в мобильных браузерах.

petroff · April 10

2 часа назад, woolfon сказал:
Сделал) хотя и пришлось повозиться.
index.js и sw.js мне пришлось хранить в корне, потому, что если сохранить их например в /js/ то Service Worker не запускается. Целый день промучился и решил оставить в корне.
Второй момент - это кэширование:
self.addEventListener('install', function(e) {
 e.waitUntil(
   caches.open('video-store').then(function(cache) {
     return cache.addAll([
       '/pwa-examples/a2hs/',
       '/pwa-examples/a2hs/index.html',
       '/pwa-examples/a2hs/index.js',
       '/pwa-examples/a2hs/style.css',
       '/pwa-examples/a2hs/images/fox1.jpg',
       '/pwa-examples/a2hs/images/fox2.jpg',
       '/pwa-examples/a2hs/images/fox3.jpg',
       '/pwa-examples/a2hs/images/fox4.jpg'
     ]);
   })
 );
});
Например у меня сайт на Yii2 с заводским кэшем pagecache и формы работают через _csrf токен, и если кэшировать страницу еще и через sw.js, то формы взаимодействие пользователя с сайтом начинает глючить. Но как я понял кэширование в sw.js обязательно, без него не запустится service worker. Я пока что одну картинку лого добавил в массив cache.addAll и всё работает нормально. Пока еще не решил оставлять на сайте эту плюшку или нет, по этому собрал всё на соплях.

Кстати я не использую саму html кнопку из примера. Мне понравилось только всплывающее нативное окно в мобильных браузерах.

Можете скинуть весь код? Я на вордпрессе пробовал, у меня много ошибок в index.js. Может, кстати, из-за того, что я совсем без кэширования делал

woolfon · April 10

index.js (у меня он a2hs.js):

if('serviceWorker' in navigator) {
  navigator.serviceWorker
           .register('/sw.js')
           .then(function() { console.log('Service Worker Registered'); });
}

sw.js:

self.addEventListener('install', function(e) {
 e.waitUntil(
   caches.open('pwa-store').then(function(cache) {
     return cache.addAll([
       '/img/logo.svg'
     ]);
   })
 );
});

self.addEventListener('fetch', function(e) {
  //console.log(e.request.url);
  e.respondWith(
    caches.match(e.request).then(function(response) {
      return response || fetch(e.request);
    })
  );
});

manifest.webmanifest:

{
  "display": "fullscreen",
  "background_color": "#fff",
  "description": "Услуги сантехника, электрика, плотника.",
  "icons": [
    {
	  "src": "img/touch/icon-48x48.png",
	  "sizes": "48x48",
	  "type": "image/png"
    }, {
	  "src": "img/touch/icon-72x72.png",
	  "sizes": "72x72",
	  "type": "image/png"
    }, {
	  "src": "img/touch/icon-96x96.png",
	  "sizes": "96x96",
	  "type": "image/png"
	}, {
	  "src": "img/touch/icon-144x144.png",
	  "sizes": "144x144",
	  "type": "image/png"
	}, {
	  "src": "img/touch/icon-192x192.png",
	  "sizes": "192x192",
	  "type": "image/png"
	}
  ],
  "name": "Муж на час - _site_.kz",
  "short_name": "_site_.kz",
  "start_url": "/"
}

в шаблоне подключаю:

<head>
...
<script src="a2hs.js" defer=""></script>
<link rel="manifest" href="/manifest.webmanifest">
...
</head>

При чем что a2hs.js на самом деле я не в head подключаю, а в конце страницы посредством объединения всех .js файлов в один, и работает нормально. Но при тестировании я использовал вариант как написал выше, и тоже работало нормально.

petroff · April 10

1 час назад, woolfon сказал:

index.js (у меня он a2hs.js):

Магия. В адресной строке заработало. На кнопке так и не работает
Uncaught TypeError: Cannot read property 'style' of null

Ошибка в строках

addBtn.style.display = 'none';

addBtn.style.display = 'block';

addBtn.addEventListener('click', (e) => {

HTML

<button class="add-button" style="margin-left:25px; background-color: white; color:red; padding: 0px;">
  <i class="fa fa-mobile fa-2x""></i></button>

JS

let deferredPrompt;
const addBtn = document.querySelector('.add-button');
addBtn.style.display = 'none';

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI to notify the user they can add to home screen
  addBtn.style.display = 'block';

  addBtn.addEventListener('click', (e) => {
    // hide our user interface that shows our A2HS button
    addBtn.style.display = 'none';
    // Show the prompt
    deferredPrompt.prompt();
    // Wait for the user to respond to the prompt
    deferredPrompt.userChoice.then((choiceResult) => {
        if (choiceResult.outcome === 'accepted') {
          console.log('User accepted the A2HS prompt');
        } else {
          console.log('User dismissed the A2HS prompt');
        }
        deferredPrompt = null;
      });
  });
});

petroff · April 10

Переподключил js в футер и все заработало. Полный код

HTML

<button class="add-button" style="margin-left:25px; background-color: white; color:red; padding: 0px;"><i class="fa fa-mobile fa-2x""></i></button>

a2hs.js

if('serviceWorker' in navigator) {
  navigator.serviceWorker
           .register('/sw.js')
           .then(function() { console.log('Service Worker Registered'); });
}

let deferredPrompt;
const addBtn = document.querySelector('.add-button');
addBtn.style.display = 'none';

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI to notify the user they can add to home screen
  addBtn.style.display = 'block';

  addBtn.addEventListener('click', (e) => {
    // hide our user interface that shows our A2HS button
    addBtn.style.display = 'none';
    // Show the prompt
    deferredPrompt.prompt();
    // Wait for the user to respond to the prompt
    deferredPrompt.userChoice.then((choiceResult) => {
        if (choiceResult.outcome === 'accepted') {
          console.log('User accepted the A2HS prompt');
        } else {
          console.log('User dismissed the A2HS prompt');
        }
        deferredPrompt = null;
      });
  });
});

sw.js

self.addEventListener('install', function(e) {
 e.waitUntil(
   caches.open('pwa-store').then(function(cache) {
     return cache.addAll([
       '/icon/cats-48-48.png'
     ]);
   })
 );
});

self.addEventListener('fetch', function(e) {
  //console.log(e.request.url);
  e.respondWith(
    caches.match(e.request).then(function(response) {
      return response || fetch(e.request);
    })
  );
});

manifest.webmanifest

{
  "display": "fullscreen",
  "background_color": "#fff",
  "description": "",
  "icons": [
    {
    "src": "/icon/cats-48-48.png",
    "sizes": "48x48",
    "type": "image/png"
    }, {
    "src": "/icon/cats-72-72.png",
    "sizes": "72x72",
    "type": "image/png"
    }, {
    "src": "/icon/cats-96-96.png",
    "sizes": "96x96",
    "type": "image/png"
  }, {
    "src": "/icon/cats-144-144.png",
    "sizes": "144x144",
    "type": "image/png"
  }, {
    "src": "/icon/cats-192-192.png",
    "sizes": "192x192",
    "type": "image/png"
  }
  ],
  "name": "",
  "short_name": "",
  "start_url": ""
}

Часть кода отсюда

Edited April 12 by petroff

Beauty · July 16

еще бы куки чтобы 2 раза не просило с одного устройства добавить

t1nx · August 31

В 05.04.2020 в 1:20 PM, petroff сказал:

Вроде вот решение. Надо пробовать

Помогите разобраться как реализовать эту интересную фишку на DLE

petroff · August 31

1 час назад, t1nx сказал:

Помогите разобраться как реализовать эту интересную фишку на DLE

От движка не зависит. Создаете 2 js файла и файл manifest.webmanifest. Содержимое файлов 2 постами выше. Файлы подключаете в head или футере, где будут работать. Код кнопки кнопки тоже копируете и вставляете в любое место страницы

t1nx · August 31

Только что, petroff сказал:

От движка не зависит. Создаете 2 js файла и файл manifest.webmanifest. Содержимое файлов 2 постами выше. Файлы подключаете в head или футере, где будут работать. Код кнопки кнопки тоже копируете и вставляете в любое место страницы

Спасибо большое за разъяснения!

t1nx · August 31

10 минут назад, petroff сказал:

От движка не зависит. Создаете 2 js файла и файл manifest.webmanifest. Содержимое файлов 2 постами выше. Файлы подключаете в head или футере, где будут работать. Код кнопки кнопки тоже копируете и вставляете в любое место страницы

Хотел уточнить правильно я понял и делаю,
создал 3 файлы js (a2hs.js, sw.js, manifest.webmanifest) Их заливаю например в корень шаблона в папку JS

и уже в самом шаблоне страницы вывожу следующим образом

<button class="add-button" style="margin-left:25px; background-color: white; color:red; padding: 0px;"><i class="fa fa-mobile fa-2x""></i></button>

Если не так поправьте меня пожалуйста!)

petroff · August 31

manifest.webmanifest подключаем так

<link rel="manifest" href="{THEME}/js/manifest.webmanifest">

Возможно ли создать хорошее мобильное приложение на движке DLE?

Recommended Posts

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Join the conversation

Recently Browsing 0 members