Установить программу на свой сайт

В Play Store и App Store доступно множество приложений. Но они требуют инвазивных разрешений и лишних ресурсов. Это означает, что они продолжают работать в фоновом режиме, даже когда вы их не используете. Здесь могут помочь веб-приложения.

Хотя они еще не распространены, веб-приложения могут помочь вам избавиться от некоторых предостережений в отношении использования специальных приложений. В этом посте мы обсудим, как превратить веб-сайт в приложение на популярных платформах, таких как Android, iOS, macOS и Windows.

Преимущества приложений

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

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

Заливаем проект на бесплатный хостинг

Программы для Windows, мобильные приложения, игры — ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале — Подписывайтесь:)

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

Превратите веб-сайт в приложение на Android

1. Чтобы создать веб-приложение на Android, мы будем использовать стороннее приложение под названием Native Alpha.
2. Сначала загрузите приложение Native Alpha с официальной страницы загрузки GitHub. Обязательно загрузите последнюю версию приложения.

1. Установите его, как если бы вы устанавливали любое приложение на свое устройство Android. Возможно, вам придется дать разрешение на боковую загрузку.
2. Запустите приложение, и вы увидите запрос «Добавьте свое первое веб-приложение».

1. Откройте веб-сайт, который вы хотите превратить в веб-приложение. Скопируйте весь URL-адрес веб-сайта.
2. Теперь вставьте URL-адрес в поле «Добавить первое веб-приложение» и нажмите кнопку «ОК». Это автоматически создаст веб-значок.

КАК СКОПИРОВАТЬ САЙТ И УСТАНОВИТЬ АДМИНКУ ЗА 3 МИНУТЫ

1. Вы также можете установить собственный значок веб-приложения и изменить заголовок ярлыка. После того, как все настроено, снова нажмите кнопку ОК.

Настроить функции веб-приложения

У Native Alpha есть и другие возможности и возможности. В частности, вы можете разрешить JavaScript, HTTP, доступ к местоположению и принимать сторонние файлы cookie в приложении.

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

После настройки параметров нажмите кнопку «Сохранить». Вуаля! Вы только что превратили веб-сайт в полноэкранное веб-приложение на телефоне Android. Он действует как приложение, но менее требователен к ресурсам вашего телефона.

Превратите веб-сайт в приложение на iOS

Для создания веб-приложения для веб-сайта на iOS мы будем использовать ярлыки Siri. Вот шаги:

1. Загрузите приложение «Ярлыки» из App Store на свое устройство iOS и установите его.

1. Откройте приложение «Ярлыки» и перейдите к опции «Мои ярлыки». Запустите ярлык приложения URL.
2. Введите имя для ярлыка и нажмите кнопку «Готово».
3. Введите URL-адрес, который вы скопировали ранее, и снова нажмите кнопку «Готово».
4. Вам будет предложено установить значок приложения для вашего веб-приложения. Вы можете установить любое понравившееся изображение или выбрать логотип веб-сайта, веб-приложение которого вы создаете. Выберите изображение в качестве значка.
5. Теперь вам нужно скачать профиль конфигурации. Профиль конфигурации используется разработчиками, чтобы позволить пользователям iOS загружать и устанавливать приложения, которые не отображаются в App Store.
6. После загрузки значка веб-приложения вы будете перенаправлены в веб-браузер Safari. Здесь вам будет предложено разрешить загрузку профиля конфигурации на ваш iPhone. Нажмите кнопку Разрешить.
7. Наконец, вам необходимо установить загруженный профиль конфигурации. Для этого перейдите в Настройки. Вы увидите опцию «Профиль загружен» вверху.
8. Нажмите на него, и вы увидите описание профиля. Просто нажмите на кнопку «Установить». Введите свой пароль и переходите к следующему шагу.
9. Наконец, нажмите кнопку «Установить» вверху и снова внизу. Вот и все! Ваш профиль теперь установлен на iPhone.
10. Недавно созданный ярлык веб-приложения появится на главном экране.

Превратите веб-сайт в приложение на macOS

Также легко превратить веб-сайт в веб-приложение на macOS. Для Mac мы будем использовать инструмент под названием Fluid. Вот шаги:

1. Загрузите бесплатную версию приложения Fluid с официального сайта.
2. Запустите инструмент. Вам будет предложено ввести некоторые сведения о веб-приложении, такие как URL-адрес, имя веб-приложения, местоположение, значок веб-приложения.

3. Когда все будет готово, нажмите кнопку «Создать».

4. Вот и все! Вы только что преобразовали свой любимый веб-сайт в быстро доступное веб-приложение на MacOS.

Обратите внимание, что бесплатная версия работает очень хорошо. Однако всего за 5 долларов вы также можете получить такие опции, как закрепление любого веб-приложения, созданного с помощью Fluid, в строке состояния macOS. Кроме того, вы также можете использовать пользовательские сценарии или пользовательские стили в приложениях Fluid и использовать созданные веб-приложения в полноэкранном режиме.

Превратите веб-сайт в приложение для Windows

Для ОС Windows есть два метода, которыми вы можете следовать, чтобы создать веб-приложение для вашего любимого веб-сайта. Первый использует браузер Microsoft Edge, а второй — приложение Webapp Maker, доступное в Microsoft Store. Давайте рассмотрим каждый метод один за другим:

Microsoft Edge

1. Откройте браузер Microsoft Edge на своем ПК с Windows и перейдите на свой любимый веб-сайт.
2. Перейдя на веб-сайт, нажмите кнопку с тремя точками или кнопку «Настройки», расположенную в правом верхнем углу.

3. Выберите «Настройки»> «Приложение»> «Установить».

4. Теперь введите значащее имя или что угодно в поле имени. Это имя будет отображаться как имя веб-приложения.

5. После этого нажмите кнопку «Установить». Вот и все! Веб-приложение для веб-сайта будет создано на вашем рабочем столе и в меню «Пуск».

Конструктор веб-приложений

1. Загрузите программное обеспечение Webapp Maker с Магазин Microsoft и запустите его на своем ПК.

2. Вам просто нужно добавить URL-адрес веб-сайта и имя веб-приложения.

1. Вы можете выбрать, запускать ли приложение в полноэкранном режиме или нет, а также выбрать цвет для приложения.
2. Теперь установите изображение значка веб-приложения. Вы можете выбрать изображение с локального диска или нажать кнопку «Получить изображение из Интернета». Последний вариант загрузит изображение из Интернета.

5. Наконец, выберите опцию Pin Tile, чтобы создать веб-приложение для вашего любимого веб-сайта.

Заключение: превратите веб-сайт в любое веб-приложение

Это лучшие способы превратить ваши любимые веб-сайты в веб-приложение для Android, iOS, Windows и macOS. Сообщите нам, что вы думаете о веб-приложениях и предпочитаете ли вы их традиционным приложениям? До следующего… Ура!

Также прочтите: 18 лучших приложений PWA, которые вам нужно установить на Chromebook

Программы для Windows, мобильные приложения, игры — ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале — Подписывайтесь:)

Источник: ozki.ru

Как поставить на свой сайт программы

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

Статьи по теме:

• Как поставить на свой сайт программы
• Как добавить много всего на свой сайт
• Как залить шелл на сайт

Инструкция

Сначала закачайте файлы программ через панель управления вашим аккаунтом на хостинге. Лучше всего создать для этих файлов отдельную папку – например, program или download. Если вы закачиваете большие файлы, скажем, дистрибутивы ОС, загрузку лучше проводить по FTP.

Чтобы посетители вашего сайта могли скачать загруженные файлы, необходимо в коде страницы разместить соответствующие ссылки. В самом простом случае это просто текстовая ссылка, указывающая путь к файлу. Например, такая: http://адрес_сайта.ru/downloads/restorator.exe. В данном примере указан путь к программе restorator.exe (широко известный редактор ресурсов). Пользователь сможет скачать ее, нажав на ссылку или скопировав путь в адресную строку браузера.

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

При использовании относительных путей приведенный выше пример мог бы выглядеть так: Редактор ресурсов Restorator. Ссылка будет работать только на сайте с выложенной программой. Если файл программы находится в одном каталоге со страницей, на которой размещена ссылка, последняя может выглядеть еще проще: Редактор ресурсов Restorator.

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

Источник: www.kakprosto.ru

Как сделать из сайта приложение и выложить его в Google Play за несколько часов. Часть 1/2: Progressive Web App

Наверное, все близкие к веб-разработке люди уже наслышаны о Progressive Web App. Ещё бы! Эта технология практически уравняла веб и мобильную разработку с точки зрения распространения продуктов и вовлечённости пользователей.

1. Иконка приложения есть на главном экране смартфона.
2. Приложение открывается в отдельном окне.
3. Приложение отправляет push-уведомления.

И казалось бы, всё прекрасно! Но увы, за 10 с лишним лет мобильной эпохи пользователи слишком сильно привыкли искать приложения в Google Play и App Store. Ломать привычки пользователей — дело неблагодарное, и потому ребята из Google (кстати, Google является разработчиком PWA) решили, что если гора не идёт к Магомеду, то… В общем, совсем недавно, 6 февраля 2019 года, они обеспечили использование Trusted Web Activities для выкладки веб-приложений в Google Play.

В статье из двух частей будет рассказано, как пройти полный путь от обычного веб-сайта до приложения в Google Play всего за считанные часы. Всё это будет показано на примере реального сервиса — Скорочтец.

1. Как сделать из сайта приложение и выложить его в Google Play за несколько часов. Часть 1/2: Progressive Web App
2. Как сделать из сайта приложение и выложить его в Google Play за несколько часов. Часть 2/2: Trusted Web Activity

Lighthouse

На входе у нас есть веб-сайт с мобильной вёрсткой:

Первым делом нужно установить расширение Lighthouse в Google Chrome на своём рабочем компьютере. Это инструмент для анализа сайтов в целом и для проверки соответствия стандарту Progressive Web App в частности.

Далее открываем наш сайт, боевой или запущенный локально, и генерируем отчёт для него при помощи Lighthouse:

В разделе Progressive Web App отчёта вы должны увидеть примерно следующее:

Обратите внимание на раздел Installable. Во-первых, если вы запускаете сайт локально, а вам придётся это делать во время разработки и тестирования, то нужно использовать домен localhost и никакой другой. Благодаря этому будет удовлетворено требование «Use HTTPS», а точнее Lighthouse просто закроет глаза на него, и вы сможете полноценно тестировать свой PWA.

Кроме требования HTTPS, чтобы наше приложение превратилось в PWA и стало устанавливаемым, нужно подключить к сайту service worker и Web app manifest. Давайте сделаем это.

Service worker

Технология service workers позволяет вашему сайту быть online даже тогда, когда сервер недоступен. Это такой посредник между клиентом и сервером, который перехватывает каждый запрос и в случае чего подсовывает данные из кэша в качестве ответа.

Для работы PWA достаточно базовой реализации service worker, которая выглядит следующим образом:

// Должно быть true в production var doCache = true; // Имя кэша var CACHE_NAME = ‘my-pwa-cache-v2’; // Очищает старый кэш self.addEventListener(‘activate’, event => < const cacheWhitelist = [CACHE_NAME]; event.waitUntil( caches.keys() .then(keyList =>Promise.all(keyList.map(key => < if (!cacheWhitelist.includes(key)) < console.log(‘Deleting cache: ‘ + key) return caches.delete(key); >>)) ) ); >); // ‘install’ вызывается, как только пользователь впервые открывает PWA self.addEventListener(‘install’, function(event) < if (doCache) < event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) < // Получаем данные из манифеста (они кэшируются) fetch(‘/static/reader/manifest.json’) .then(response =>< response.json() >) .then(assets => < // Открываем и кэшируем нужные страницы и файлы const urlsToCache = [ ‘/app/’, . ‘/static/core/logo.svg*’, ] cache.addAll(urlsToCache) console.log(‘cached’); >) >) ); > >); // Когда приложение запущено, сервис-воркер перехватывает запросы и отвечает на них данными из кэша, если они есть self.addEventListener(‘fetch’, function(event) < if (doCache) < event.respondWith( caches.match(event.request).then(function(response) < return response || fetch(event.request); >) ); > >);

Здесь реализованы обработчики для трёх событий: install , activate и fetch . Как только пользователь откроет сайт, на котором есть service worker, вызовется событие install . Это процедура установки сервис-воркера в браузер пользователя. В её обработчике в массиве urlsToCache вы можете указать страницы сайта, которые будут кэшироваться, включая статику. Затем вызывается activate , которое очищает ресурсы, использованные в предыдущей версии скрипта сервис-воркера. И теперь, когда сервис-воркер успешно установлен, он будет перехватывать каждое событие fetch и искать в кэше запрашиваемые ресурсы, прежде чем идти за ними на сервер.

Чтобы всё это заработало, нужно добавить скрипт для регистрации сервис-воркера в html-файлы. Так как Скорочтец является одностраничным приложением (SPA), то у него один единственный html, который после добавления указанного скрипта выглядит вот так:

Скорочтец if (‘serviceWorker’ in navigator) < window.addEventListener(‘load’, function() < navigator.serviceWorker.register(‘/service-worker.js’).then(function(registration) < // Registration was successful console.log(‘ServiceWorker registration successful with scope: ‘, registration.scope); >, function(err) < // registration failed 🙁 console.log(‘ServiceWorker registration failed: ‘, err); >).catch(function(err) < console.log(err) >); >); > else

Функция navigator.serviceWorker.register(‘/service-worker.js’) принимает в качестве аргумента URL, по которому расположен файл сервис-воркера. Здесь не важно, как именно называется файл, но важно, чтобы он был расположен в корне домена. Тогда областью видимости сервис-воркера станет весь домен, и он будет получать события fetch из любой страницы.

Таким образом, расположив файл сервис-воркера по адресу skorochtec.ru/service-worker.js и добавив нужный скрипт в html, мы получаем следующую картину в отчёте Lighthouse:

Если сравнивать с предыдущим отчётом, то теперь у нас удовлетворён второй пункт и сайт отвечает 200 даже offline, а также в 5-м пункте мы видим, что сервис-воркер обнаружен, но вот стартовой страницы не хватает. Информация о стартовой странице и не только указывается в Web App Manifest, давайте добавим его!

Web App Manifest

Манифест предоставляет информацию о нашем приложении: короткое и длинное имя, иконки всех размеров, стартовая страница, цвета и ориентация.

< «short_name»: «Скорочтец», «name»: «Скорочтец», «icons»: [ < «src»:»/static/core/manifest/logo-pwa-16.png», «sizes»: «16×16», «type»: «image/png» >, < «src»:»/static/core/manifest/logo-pwa-32.png», «sizes»: «32×32», «type»: «image/png» >, < «src»:»/static/core/manifest/logo-pwa-48.png», «sizes»: «48×48», «type»: «image/png» >, < «src»:»/static/core/manifest/logo-pwa-72.png», «sizes»: «72×72», «type»: «image/png» >, < «src»:»/static/core/manifest/logo-pwa-96.png», «sizes»: «96×96», «type»: «image/png» >, < «src»:»/static/core/manifest/logo-pwa-144.png», «sizes»: «144×144», «type»: «image/png» >, < «src»:»/static/core/manifest/logo-pwa-192.png», «sizes»: «192×192», «type»: «image/png» >, < «src»:»/static/core/manifest/logo-pwa-512.png», «sizes»: «512×512», «type»: «image/png» >], «start_url»: «/app/», «background_color»: «#7ACCE5», «theme_color»: «#7ACCE5», «orientation»: «any», «display»: «standalone» >

Последняя переменная указывает, что это будет отдельное приложение. Файл манифеста необходимо расположить на сайте (не обязательно в корне) и подключить его в html:

Скорочтец «> if (‘serviceWorker’ in navigator) < window.addEventListener(‘load’, function() < navigator.serviceWorker.register(‘/service-worker.js’).then(function(registration) < // Registration was successful console.log(‘ServiceWorker registration successful with scope: ‘, registration.scope); >, function(err) < // registration failed 🙁 console.log(‘ServiceWorker registration failed: ‘, err); >).catch(function(err) < console.log(err) >); >); > else

Давайте снова проанализируем сайт Lighthouse-ом:

Ура! Теперь у нас не просто сайт, а Progressive Web App! Возможно, вы заметили, что скорость загрузки резко подросла. Это никак не связано с тем, что мы делали, просто я заменил development-сборку React-приложения на production, чтобы отчёт выглядел максимально красиво.

Ну что ж, заходим на сайт из мобильного Chrome и что же мы видим?

Да! Можно открывать шампанское! Добавляем приложение на главный экран:

Бонусом получаем заставку при запуске, которая собирается из указанных в манифесте name, background_color и иконки 512×512 в массиве icons:

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

Ну и само приложение:

Ограничения

На данный момент PWA поддерживается только в Chrome и Safari (начиная с iOS версии 11.3). Причём, Safari поддерживает эту технологию «по-тихому». Пользователь может добавить приложение на главный экран, но только никакого сообщения об этом нет, в отличие от Chrome.

Полезные советы и трюки

1. Предложение об установке на Safari

Поскольку в Apple этого не сделали (надеемся, что пока не сделали), то приходится реализовывать «руками». Получается вот такое:

Реализуется следующим JavaScript-кодом:

const isIos = () => < const userAgent = window.navigator.userAgent.toLowerCase(); return /iphone|ipad|ipod/.test( userAgent ); >; // Проверяем, открыто ли приложение отдельно или в браузере const isInStandaloneMode = () => (‘standalone’ in window.navigator) (window.navigator.standalone); // Если приложение открыто на iOS и в браузере, то предлагаем установить if (isIos() !isInStandaloneMode()) < this.setState(< isShown: true >); // На примере React >

2. Отслеживание установок

Это работает только в Google Chrome. Нужно добавить в html скрипт, отлавливающий событие appinstalled и, например, отправлять на свой сервер сообщение об этом:

window.addEventListener(‘appinstalled’, (evt) => < fetch(, < method: ‘GET’, credentials: ‘include’, >); >);

3. Правильный выбор start_url

Обязательно нужно позаботиться о том, что url всех страниц приложения являются продолжением start_url , указанного в манифесте.

Потому что, если вы укажете «start_url»: «/app/» , а затем пользователь перейдёт на страницу, скажем, «/books/», то тут же покажет себя адресная строка браузера и весь пользовательский опыт сломается. Кроме того, человек почувствует себя обманутым: думал, что использует приложение, а это замаскированный браузер. И даже theme_color из манифеста, который окрасит интерфейс браузера в ваш фирменный цвет, не спасёт.

В случае Скорочтеца, все страницы, относящиеся к приложению, начинаются с /app/, поэтому таких казусов не возникает.

Что дальше?

Ну что ж, теперь вы знаете, как забраться к пользователю на главный экран смартфона через ваш сайт. Но это только одна из дверей, и скорее всего не парадная. Во второй части будет рассказано, как войти через парадную дверь: вы узнаете, как выложить ваше прогрессивное веб-приложение в Google Play.

• Introduction to Progressive Web Apps (Offline First) — Part 1
• Introduction to Progressive Web Apps (Instant Loading) — Part 2
• Introduction to Progressive Web Apps (Push Notifications) — Part 3
• Разработка вашего первого Progressive Web App c React
• 9 amazing PWA secrets
• Progressive Web Apps on iOS are here
• Progressive Web Apps with React.js: Part I — Introduction
• Progressive Web Apps with React.js: Part 2 — Page Load Performance
• Progressive Web Apps with React.js: Part 3 — Offline support and network resilience
• Progressive Web Apps with React.js: Part 4 — Progressive Enhancement
• A React And Preact Progressive Web App Performance Case Study: Treebo

Источник: habr.com