PWA Progressive Web Apps своими руками. Продолжаем ускорять сайт

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

Разработчики имеют возможность создавать практически первоклассные приложения с использованием веб-технологий, что всегда значительно проще и дешевле в обслуживании, чем создание собственных приложений. Особенное преимущество PWA — кроссплатформенность. Также одним из преимуществ можно выделить отсутвие необходимости готовое приложение регистрировать в маркетах приложений (таких как Google Play Маркет и App Store), так как приложение устанавливается на телефоне прямо из браузера).

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

— Работа в оффлайне
— Быстрая загрузка
— Работа по защищенному протоколу
— Умеет в push-уведомления
-Может выглядеть как полноценное приложение без строки адреса в браузере

Если это Вордпресс, не морочим голову ставим плагин https://wordpress.org/plugins/super-progressive-web-apps/
В исхоДном коде WP подсматриваем как выглядит идеальный manifest

  • Иначе по инструкции:
    — Переносим в корень проекта sw.js (берем тут https://github.com/nofikoff/progressive_web_app)
    — Режем иконки с помощью сервиса https://www.favicon-generator.org/ подключаем их в head проекта. (не забудь 512х512)
    — Создаем манифест, подключаем его в head проекта <link rel=»manifest» href=»/manifest.json»>
    — В head проекта указываем
<script>
if (navigator.serviceWorker.controller) {
console.log('[PWA Builder] active service worker found, no need to register')
} else {
navigator.serviceWorker.register('sw.js', {
scope: './'
}).then(function(reg) {
console.log('Service worker has been registered for scope:'+ reg.scope);
});
}
</script>

Тестируем PWA через

— Хром / аудит
— https://www.pwabuilder.com/ здесь тюнинг и дополнительные фичи

Лучший в мире сайт mckinneyyork.com

Скажу просто — это лучший сайт в мире, который мне когда либо приходилось видеть. По качеству контента и фоток, динамике движения элементов, продуманности оформления. Со стороны он кажется простеньким, но с него не хочется уходить 😉

Система управления вордпресс. Шаблон их самописный.
Сделать такое с нуля — НЕ реально! Уж очень все продумано до мелочей 😉 Есть одна слаааабая такая теоретичекая надежда, что они сделали на базе готового шаблона, но я не нашел

Можно только содрать один в один их хтмл+javascrip и поменять картинки, цвета, тексты, количество страниц.

Но если контент (фото, видео, корп стиль) будет какой попало — или его не будет совсем (сделайте сайт — мы потом наполним)
Лучше даже не начинать — 90% успеха поднобном проекте — это контент

Все равно что попросить разработать полиграфиеский рекламный буклет как у Эппла, но контент мы дадим потом

Вывод:
— по сложности и качеству контента — привлекались профи фотографы и художники (объекты у них в краандаше)
— по качеству задумки и реализации сайта — высший пилотаж
думаю им сайт обошелся тысяч 10-20$

мы можем передрать долларов за 500$
и основной бюджет здесь — отсутсвие ТЗ, дотягивание мелочей и переделывание фиг знает еще чего

Update: в догонку

их сайт входит в топ лучших сайтов архитектурного дизайна
тут еще примеры
whatpixel.com/architecture-websites-gallery/

оказывается есть такая професия архитекуторынй фотограф
вот чувак им фотки делал www.brianmihealsick.com/gallery.html?gallery=McKinney%20York&sortNumber=1&skipno=0

Интеграция Google Forms с внешним сервисом Передача полей методом POST

Задача: сделать интеграцию с произвольной Гугл Формс, чтобы ее данные отправлялись в БД нашего сайта

тестовый пример тут https://docs.google.com/forms/d/1MxYelK8wZ0c_6zzw35lvUNaHsV4Y-x7FwOwfIQu6a0Q/edit

Читать далее «Интеграция Google Forms с внешним сервисом Передача полей методом POST»