Андройд приложение.

[makhatsha 2]

Здравствуйте друзья! Скажите как создать мобильное приложение под сайт ДЛЕ? Нужно ли знать для этого программирование? 

[germanydletest 455]

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

Нужно ли знать для этого программирование?

да, язык программирования для этого знать надо, к примеру Java

[Sokali 7]

Смотря, что Вы хотите получить в итоге. В целом на базе любого сайта с мобильной версией или адаптивной версткой дизайна можно создать подобие приложения. Визуально будет выглядеть очень похоже наитивному приложению. Существует множество сервисов в сети.

[iCourier09 0]

В 02.08.2016 в 16:10, Sokali сказал:

Смотря, что Вы хотите получить в итоге. В целом на базе любого сайта с мобильной версией или адаптивной версткой дизайна можно создать подобие приложения. Визуально будет выглядеть очень похоже наитивному приложению. Существует множество сервисов в сети.

Подскажите пожалуйста какие сервисами можно воспользоваться, чтобы допустим сайт на дле натянуть на приложения как под iOS так и под Android ?

Заранее благодарю;)

[SKYNET74 315]

Что за чушь вы пишете?
Если приложение делается нормально, а не через всем известные места, то работает оно как правило через API.
А никак не парсит бедный html сайта.

[Lexxs 16]

Простейшее приложение на Андроид для вашего сайта.

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

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

Естественно указать адрес сайта, название кратное и большое, сделать иконки и прописать в коде путь к ним.

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

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

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

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

И ставим кнопку в нужном месте шаблона:

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

 

С мобильного браузера смартфона, будет кнопка установить приложение и появится значок в телефоне.

Похоже на приложение, хотя обычный просмотрщик. А для разработки полноценного приложения, нужны знания и много времени )

[master27 38]

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

Простейшее приложение на Андроид для вашего сайта.

Не смог заставить работать Ваш код, в консоле (настольный браузер) вижу: Service Worker Registered
Кнопки нет :( , если экранирую стили, есть, но не работает, тупо ничего...
Вы пишете "3 файла js", по факту два.

И ещё.. ".register('/sw.js')" - пока полный путь не прописал "'/templates/название шаблона/js/sw.js'" выдавало ошибку.
Что не так?
на андроиде яндекс и дефолтный браузеры.

Изменено 14 июля 2022 пользователем master27

[Lexxs 16]

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

Не смог заставить работать Ваш код, в консоле (настольный браузер) вижу: Service Worker Registered

Написано же, для мобильных браузеров.

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

Вы пишете "3 файла js", по факту два.

Написано: создать 3 файла, js и manifest ... Запятую не поставил )

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

И ещё.. ".register('/sw.js')" - пока полный путь не прописал "'/templates/название шаблона/js/sw.js'" выдавало ошибку.

Так же написано, что пути нужно прописывать свои. Возможно менять местоположение файлов. Обычно если в корне сайта, то должно вообще без проблем быть.

 

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

Что не так?
на андроиде яндекс и дефолтный браузеры.

1. Возможно правильно подключить скрипты, написано внизу поста.

2. Правильно заполнить в скрипте пункты 

"name": "",
  "short_name": "",
  "start_url": ""

Возможно тапа такого

 

"name": "Мой сайт",
  "short_name": "_site_.ru",
  "start_url": "/"

Иконки, обязательно, полный путь к ним 

"src": "/icon/cats-48-48.png",

 

Изменено 14 июля 2022 пользователем Lexxs