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

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

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

Пример кода:
Код HTML:
  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 данные:
Пример:
Код 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">

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

Код HTML:
  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> и вставьте следующий скрипт:

Код JAVASCRIPT:
  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

Из архива: архив
хостинг
Заказать хостинг
Регистрация доменов
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 6473
Это работает, вы попробовали? Отличное начало.
Хостинг и ВПС Халява тексты Стартапы Instantcms в Telegram
Реклама
cms
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 1725
DroidFun, Проверяли или это адаптация этой статьи?
https://habr.com/company/netologyru/blog/333544/
Посетитель
small user social cms
Медаль
Сообщений: 140
Это дает возможность только установить иконку на экране. А нужно уведомление и кэширование хотя бы основных страниц.
Посетитель
small user social cms
Сообщений: 86
letsgo:
Это работает, вы попробовали? Отличное начало.
Rainbow:
Проверяли или это адаптация этой статьи?

Взято именно с этой статьи. В настоящий момент работает. Можно еще подгрузить sw-push для работы пушей.
Чуть позже допишу, как организовать пуш. Но для этого нужно разворачивать сервер.
хостинг
Заказать хостинг
Регистрация доменов
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 1725
Endroid:
А нужно уведомление и кэширование хотя бы основных страниц.

Да, но тогда придется нанять программиста, что бы он это сделал под ВАШ сайт))
Посетитель
small user social cms
Медаль
Сообщений: 443
Кэширование для социальных сайтов с авторизацией, пользователями, лентами и т д, скорее противопоказано, главное чтобы было понятно пользователю что не работает из за отсутствия интернета.
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 6473
Endroid:
Это дает возможность только установить иконку на экране. А нужно уведомление и кэширование хотя бы основных страниц.

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

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

Это один раз сделать надо. Там все универсально с этим.
Хостинг и ВПС Халява тексты Стартапы Instantcms в Telegram
Посетитель
small user social cms
Сообщений: 86
Вобщем процесс изучения SW привел к тому, что нужно грамотно произвести кеширование шаблона (у каждого он свой), организовать респонз 200 страницы при отсутствии интернета.
Кто шарит в JS - здесь довольно хорошо описано, как производится работа и в каких методах. Нато она и офф. документация.
хостинг
Заказать хостинг
Регистрация доменов
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 1725
letsgo:
Это один раз сделать надо. Там все универсально с этим.

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

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

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

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

Будет вполне нормально и пригодно для бОльшей части сайтов.
Редактировалось: 1 раз (Последний: 15 августа 2018 в 12:12)
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 6473
Rainbow:
Там надо прописывать страницы (адреса) в скрипт, и возможно подключение скриптов задействованных на странице.

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

Вот полная панель настроек подключения PWA https://yadi.sk/i/xvTS2Uvh3aFDBf - так надо делать компонент.
Редактировалось: 1 раз (Последний: 15 августа 2018 в 12:25)
Хостинг и ВПС Халява тексты Стартапы Instantcms в Telegram
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 1725
letsgo:
Потому и нужен компонент

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

За разумную плату, спрос бы был обеспечен.
Редактировалось: 1 раз (Последний: 15 августа 2018 в 12:29)
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 6473
Rainbow:
Не спорю. Нужен.
Надо спросить может Ris заинтересуется?

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

Да я тоже думаю спрос будет.
Хостинг и ВПС Халява тексты Стартапы Instantcms в Telegram
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 1725
Написал Ris с предложением ...
ЗЫ: ...и несколько разработок на эту тему нашли бы своих клиентов...
Ниша большая и свободная.
Редактировалось: 1 раз (Последний: 15 августа 2018 в 12:45)
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 1725
Ris, написал, что пока не может, посмотрит потом...
В начало страницы
Предыдущая темаСледующая тема Перейти на форум: