Найти на сайте
  2. Форумы
  3. ОБСУЖДЕНИЯ
  4. Разработка и тестирование
  5. Как сделать Progressive Web Apps из вашего сайта

Как сделать Progressive Web Apps из вашего сайта

ЕСТЬ РЕШЕНИЕ ЗАКРЫТО InstantCMS 2.X

PWA – это название группы приложений, которые используют стек Web технологий (JS + HTML + CSS) и позволяют соединить простоту использования Web сайта со специфичными для нативных приложений операционной системы UX и техническими возможностями.

#1 15 августа 2018 в 02:42
И так, для того, чтобы обернуть свой адаптивный сайт в PWA необходимо всего 3 шага.
1. Сделать иконку приложения:
Для этого воспользуйтесь онлайн — генератором иконок: Генератор;
Полученный код, необходимо вставть внутри тега <head> вашего шаблона. Ориентировочно в файле /templates/<ваш шаблон>/main.tpl (если шапка подключена с другого шаблона, то необходимо проверить, есть ли файл header.tpl и посмотреть тег <head> в нем).

Пример кода:
  1.  
  2. <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">

  3. <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">

  4. <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">

  5. <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">

  6. <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">

  7. <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">

  8. <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">

  9. <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">

  10. <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">

  11. <link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">

  12. <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

  13. <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

  14. <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

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

2. Прописать манифест:
Воспользуйтесь генератором манифеста — Генератор манифеста;
После первого пункта в корне вашего сайта появился файл manifest.json, откройте его и замените часть когда (до раздела icons) на полученные в генераторе json данные:
Пример: 
  1.  
  2. "name": "Web Community Leaders UK IE",

  3.     "short_name": "Web Leaders",

  4.     "description": "Web Community Leaders landing page",

  5.     "lang": "en-GB",

  6.     "start_url": "/",

  7.     "display": "standalone",

  8.     "theme_color": "#E6E6FA",

  9.     "background_color": "#E6E6FA",

  10. Все что далее не трогать! Это наши иконки.

  11. "icons": [

  12.  
Далее, после добавленных в <head> иконок, необходимо добавить строку
<link rel="manifest" href="/manifest.json">

Пример готового кода:

  1.  
  2. <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">

  3. <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">

  4. <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">

  5. <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">

  6. <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">

  7. <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">

  8. <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">

  9. <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">

  10. <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">

  11. <link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">

  12. <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

  13. <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

  14. <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

  15.  
  16. <link rel="manifest" href="/manifest.json">

  17.  
3.Service worker — это еще один файл, который мы добавляем в наш проект, он позволит сайту работать в автономном режиме. Наличие service worker — это также требование PWA, поэтому он определенно необходим..

Откройте снова файл шаблона, в котором находится тег <head> и вставьте следующий скрипт:

  1.   <script>
  2. if ('serviceWorker' in navigator) {
  3.   window.addEventListener('load', function() {
  4.     navigator.serviceWorker.register('/sw.js').then(function(registration) {
  5.  
  6.       console.log('ServiceWorker registration successful with scope: ', registration.scope);
  7.     }, function(err) {
  8.  
  9.       console.log('ServiceWorker registration failed: ', err);
  10.     });
  11.   });
  12. }
  13. </script>
В корень сайта положите следующий файлы:

sw.js
sw-toolbox.js

Из архива: архив
Игорь Дмитриевич =)
0
#2 15 августа 2018 в 09:48
Это работает, вы попробовали? Отличное начало.
Хостинг и ВПС Халява тексты Стартапы Instantcms в Telegram
0
#4 15 августа 2018 в 10:28
Это дает возможность только установить иконку на экране. А нужно уведомление и кэширование хотя бы основных страниц.
0
#5 15 августа 2018 в 10:36

Это работает, вы попробовали? Отличное начало.

letsgo

Проверяли или это адаптация этой статьи?

Rainbow

Взято именно с этой статьи. В настоящий момент работает. Можно еще подгрузить sw-push для работы пушей.
Чуть позже допишу, как организовать пуш. Но для этого нужно разворачивать сервер.
Игорь Дмитриевич =)
0
#6 15 августа 2018 в 10:39

А нужно уведомление и кэширование хотя бы основных страниц.

Endroid

Да, но тогда придется нанять программиста, что бы он это сделал под ВАШ сайт))
0
#7 15 августа 2018 в 11:47
Кэширование для социальных сайтов с авторизацией, пользователями, лентами и т д, скорее противопоказано, главное чтобы было понятно пользователю что не работает из за отсутствия интернета.
0
#8 15 августа 2018 в 11:48

Это дает возможность только установить иконку на экране. А нужно уведомление и кэширование хотя бы основных страниц.

Endroid

Так надо доделать просто.

Да, но тогда придется нанять программиста, что бы он это сделал под ВАШ сайт))

Rainbow

Это один раз сделать надо. Там все универсально с этим.
Хостинг и ВПС Халява тексты Стартапы Instantcms в Telegram
0
#9 15 августа 2018 в 12:05
Вобщем процесс изучения SW привел к тому, что нужно грамотно произвести кеширование шаблона (у каждого он свой), организовать респонз 200 страницы при отсутствии интернета.
Кто шарит в JS — здесь довольно хорошо описано, как производится работа и в каких методах. Нато она и офф. документация.
Игорь Дмитриевич =)
0
#10 15 августа 2018 в 12:10

Это один раз сделать надо. Там все универсально с этим.

letsgo

Там надо прописывать страницы (адреса) в скрипт, и возможно подключение скриптов задействованных на странице.
То есть примерно как сохранить страницу на рабочий стол, что бы она работала автономно.

И так сколько страниц надо что бы кэшировалось, столько и прописывать ( ну, я так понял)).
Возможно и не программисту, но самому для СВОЕГО сайта.

Поэтому если все сделать просто по минимальному требованию только для главной страницы (на стандартный шаблон, а под свои шаблоны добавлять нужное)

и

главное чтобы было понятно пользователю что не работает из за отсутствия интернета.

Александр

Будет вполне нормально и пригодно для бОльшей части сайтов.
0
#11 15 августа 2018 в 12:14

Там надо прописывать страницы (адреса) в скрипт, и возможно подключение скриптов задействованных на странице.

Rainbow

та ну вот это лишнее совсем. Потому и нужен компонент, включил, залил 2 лого, указал название приложения и всё. Я так делаю у себя, но там другая cms — здесь надо также сделать компонент и всё. Установка PWA должна занимать 2-3 минуты.

Вот полная панель настроек подключения PWA yadi.sk/i/xvTS2Uvh3aFDBf — так надо делать компонент.
Хостинг и ВПС Халява тексты Стартапы Instantcms в Telegram
0
#12 15 августа 2018 в 12:29

Потому и нужен компонент

letsgo

Не спорю. Нужен.
Надо спросить может Ris заинтересуется?

За разумную плату, спрос бы был обеспечен.
0
#13 15 августа 2018 в 12:30

Не спорю. Нужен.
Надо спросить может Ris заинтересуется?

За разумную плату, спрос бы был обеспечен.

Rainbow

Да я тоже думаю спрос будет.
Хостинг и ВПС Халява тексты Стартапы Instantcms в Telegram
0
#14 15 августа 2018 в 12:35
Написал Ris с предложением ...
ЗЫ:… и несколько разработок на эту тему нашли бы своих клиентов...
Ниша большая и свободная.
0
#15 15 августа 2018 в 13:05
Ris, написал, что пока не может, посмотрит потом…
0
Разработка мобильного приложен
Progressive Web Apps - требует

Похожие темы

Мобильное приложение для твоего сайта

Предлагаю услуги Создана 4 года назад 26 сообщений

Telegram Mini Apps

Флейм / Флуд / Оффтопик Создана 5 месяцев назад 1 сообщение

Помогу с продвижением вашего бизнеса (и ваших клиентов) в интернете.

Предлагаю услуги Создана 2 года назад 4 сообщения

Как сделать фон на высоту экрана с прокруткой только на содержимое сайта

Дизайн / Графика / Искусство Создана 4 года назад 5 сообщений

Telegram чат для сайта

Разработка дополнений Создана 4 года назад 32 сообщения

Добавление сайта и подтверждение через API Метрику (яндекса) и вывод данных

Ищу исполнителя Создана 3 года назад 5 сообщений

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.