Jump to content
Sign in to follow this  
nezov009

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

Recommended Posts

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

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

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

 

Share this post


Link to post
Share on other sites

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

Share this post


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

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

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

 

Share this post


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

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

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

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

image.png

Share this post


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

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

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

image.png

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

Share this post


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"
  }]
}

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

Share this post


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

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

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

Share this post


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

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

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

Share this post


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

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

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

Share this post


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

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

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

Share this post


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

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

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

Share this post


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

Share this post


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

Share this post


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

Share this post


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;
      });
  });
});

 

Share this post


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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...