Как сделать сайт за 15 минут?


. Одной из тем обсуждения последних двух лет является Progressive Web Apps. Представители Google активно рекламируют свою разработку и продвигают идеи в массы, а Андрей Липатцев даже приезжал в Минск (и не только) для того чтобы рассказать нам о технологии PWA и её возможностях.
Не забудьте оценить статью в самом конце! Рейтинг поможет понять где следует доработать. . PWA — это своего рода приложение, устанавливаемое из браузера, которое может предоставить дополнительные функции, основанные на возможностях используемого устройства: сайт может работать автономно оффлайн, делать push-уведомления и выглядеть и работать почти так же быстро, как и отдельное приложение.. Разработчики имеют возможность создавать практически первоклассные приложения с использованием веб-технологий, что всегда значительно проще и дешевле в обслуживании, чем создание собственных приложений. Особенное преимущество PWA — кроссплатформенность. Также одним из преимуществ можно выделить отсутвие необходимости готовое приложение регистрировать в маркетах приложений (таких как Google Play Маркет и App Store), так как приложение устанавливается на телефоне прямо из браузера).. Таким образом PWA — это веб-сайт, который разработан с использованием технологий, что делают опыт взаимодействия с контентом сайта на мобильных устройствах намного приятнее, чем с обычным сайтом, оптимизированном под мобильные устройства
В то же время PWA работает почти как нативное приложение, так как обладает следующими функциями:. Ниже я расскажу как сделать PWA на сайте за 15 минут или даже быстрее.. В большинстве случаев можно будет использовать инструмент для поэтапного создания частей PWA: pwabuilder.. Часть определения Progressive Web App заключается в том, что оно должно работать в автономном режиме.. Поскольку компонент, позволяющий веб-приложению работать в автономном режиме, — это Service Worker, это означает, что Service Worker является обязательной частью PWA.. Service Worker — это JavaScript-файл, который выполняет роль посредника между веб-приложением и интернетом. Благодаря этому он может кешировать и ускорять рендеринг приложения, а также улучшать пользовательский интерфейс.

Из соображений безопасности только HTTPS-сайты могут использовать Service Workers, и это одна из причин, по которым Progressive Web App можно и нужно устанавливать только на домены с HTTPS.. Service Worker отсутствует на устройстве при первом посещении пользователем. При первом посещении сайта Service Worker устанавливается в браузере, а затем, при последующих посещениях отдельных страниц сайта, этот Service Worker будет запускаться браузером автоматически.. Service Worker устанавливается в два этапа:. В коде всех страниц сайта необходимо указать для браузера, что у нас есть свой Service Worker по отдельному адресу. В шаблон страниц вставляется простой JavaScript код, пример:. Обратите внимание! В примере выше в четвёртой строке указано название файла — sw.js
Это значит, что файл, в котором будет расположен код нашего Service Worker должен называться именно так. В противном случае браузер так и не найдёт нужный нам функционал.. В отдельном файле на сервере (например, как у меня — sw.js) необходимо разместить следующий код:. Это и есть наш Service Worker, что будет делать всю работу. Существует несколько примеров работы Service Worker, доступных в конструкторе pwabuilder. Подбирайте на свой вкус.. Обращаю внимание, что код JS, используемый на моём сайте немного визуально отличается от того, что в примерах этой статьи
В руководстве по оптимизации скорости загрузки сайта я описывал минификацию JS. Для всех JS-скриптов на сайте я старался провести минификацию. Это полностью рабочие файлы и ими можно пользоваться.. Манифест приложения или App Manifest — это файл JSON, в котором необходимо предоставить «справочную» информацию о строении и цели вашего Progressive Web App.. Ссылку на манифест необходимо включать во все заголовки страниц вашего сайта:. . Этот файл расскажет устройству, как установить:
Пример содержимого файла manifest.json:. { «dir»: «ltr», «lang»: «Russian», «name»: «Александр Штеркель — заметки о SEO», «scope»: «/», «display»: «standalone», «start_url»: «https://shterkel.com/», «short_name»: «SEO», «description»: «Мои заметки по оптимизации сайта для результативного SEO. Тематические посты для сеошников, подробные инструкции. ¯\\_(ツ)_/¯», «orientation»: «any», «background_color»: «#fafafa», «theme_color»: «#fafafa», «related_applications»: [], «prefer_related_applications»: false, «icons»: [ { «src»: «/images/icons/apple-touch-icon.png», «type»: «image/png», «sizes»: «57×57» }, { «src»: «/images/icons/android-icon-48×48.png», «sizes»: «48×48», «type»: «image/png» } ]}. Обратите внимание! В примере выше я убрал большую часть ссылок на иконки разных размеров для экономии места. В JSON манифесте необходимо указать как можно больше ссылок и размеров.. Для составления манифеста можно использовать специальный генератор.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *