Jump to content

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


Recommended Posts

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

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

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

 

Link to post
Share on other sites

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

Link to post
Share on other sites
4 часа назад, woolfon сказал:

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

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

 

Link to post
Share on other sites
9 часов назад, woolfon сказал:

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

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

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

image.png

Link to post
Share on other sites
В 28.02.2020 в 7:11 PM, nezov009 сказал:

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

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

image.png

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

Link to post
Share on other sites
В 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"
  }]
}

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

Link to post
Share on other sites
3 часа назад, woolfon сказал:

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

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

Link to post
Share on other sites
5 часов назад, petroff сказал:

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

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

Link to post
Share on other sites
58 минут назад, woolfon сказал:

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

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

Link to post
Share on other sites
17 часов назад, petroff сказал:

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

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

Link to post
Share on other sites
2 часа назад, woolfon сказал:

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

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

Link to post
Share on other sites
  • 1 month later...
В 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 кнопку из примера. Мне понравилось только всплывающее нативное окно в мобильных браузерах.

Link to post
Share on other sites
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. Может, кстати, из-за того, что я совсем без кэширования делал

Link to post
Share on other sites

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 файлов в один, и работает нормально. Но при тестировании я использовал вариант как написал выше, и тоже работало нормально.

Link to post
Share on other sites
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;
      });
  });
});

 

Link to post
Share on other sites

 

Переподключил 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 by petroff
Link to post
Share on other sites
  • 3 months later...
  • 1 month later...
В 05.04.2020 в 1:20 PM, petroff сказал:

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

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

Link to post
Share on other sites
1 час назад, t1nx сказал:

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

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

Link to post
Share on other sites
Только что, petroff сказал:

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

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

Link to post
Share on other sites
10 минут назад, petroff сказал:

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

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

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

<script src="{THEME}/js/a2hs.js"></script>
<script src="{THEME}/js/sw.js"></script>
<script src="{THEME}/js/manifest.webmanifest"></script>  

И ставлю кнопку в нужном месте:
 

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

 

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

Link to post
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...