УСМОТРЕНИЕ ЧИТАТЕЛЕЙ: ДАННАЯ СТАТЬЯ СОДЕРЖАЕТ МНОГО ЗНАНИЙ. ЕСЛИ ВЫ НИЧЕГО НЕ ПОНИМАЕТЕ ЗДЕСЬ, ВЫ ПОНИМАЕТЕ ВСЕ ЗДЕСЬ.

Вас смущает все, что я только что сказал? Это самый простой способ описать PWA, его уровень сложности настолько интересен, что он прост. Хорошо, пока просто оставайся в своем собственном смущенном состоянии.

Вы знаете этих ребят?

Если бы вы действительно прочитали мой вопрос выше Вы знаете ЭТОГО, ребята? вы заметите, что ЭТО должно было быть ЭТО ну вы не мои Учитель английского. Итак, эти парни все один и тот же парень, и если к настоящему времени вы все еще не знаете их / его, у меня есть еще один вопрос. Ты кто? скажите мне в комментарии, что нам нужно поговорить.

Куда бы я ни пошел, имя этого парня звучит эхом, в каждой группе в WhatsApp, в каждой группе в Facebook, в каждом посте в Instagram, твитах, ретвитах, цитировании твитов, на техническом саммите и на каждой технической встрече, включая женскую техническую встречу Auwal М.С.. Кстати, чем ваше имя занималось на Women's Tech Meet Up? не спрашивайте меня, что я там делал.

Вы видели сериал Игра престолов: вы знаете персонажа Дейенерис Таргариен и то, как все в Вестеросе говорили о ней и ее трех драконах, хорошо, Auwal MS - это Динерис Таргариен, PWA - это три дракона, Tech Meet Up - это Вестерос, а я Джон Сноу Я ничего не знаю, особенно о трех драконах, извините, PWA.

30 сентября 2017 года на GDG Abuja Meet Up, который проходил в Civic Innovation Lab, Auwal MS познакомил меня со своими тремя драконами по имени PW A.

Изображения выше на самом деле не означают, что вы потеряли сеть, это на самом деле изображения без вкладок сети. Я просто надеюсь, что не заставил вас обновлять браузер.

Пока вы читаете это, откройте вкладку и перейдите по одной из этих ссылок kongax.konga.com, vuejs.org или mobile.twitter.com, теперь после полной загрузки одной из этих страниц , что должно будьте быстры, закройте те вкладки, где вы посещали те страницы, о которых я упоминал выше. Не моя вкладка…! Допустим, вы не закрывали мою вкладку. Теперь выключите все, что связывает вас с Интернетом, и снова посетите любую из этих страниц, Не на моей вкладке…! поэтому убедитесь, что голосом Дейенерис вы произносите волшебные слова , dracarys! это сработало…? Я уверен, вы знаете, что они не должны были выдыхать огонь, но страницы должны снова загружаться нормально, как если бы вы были в сети. Если это не сработало, возможно, вы не произносили волшебных слов или вы Король ночи.

PWA - сокращение от Progressive Web Application. Прогрессивные веб-приложения - это приложения, созданные с использованием современных веб-технологий, в основном HTML, CSS и JavaScript, но предоставляющие функции, подобные приложениям. Вы видите, что они все-таки не драконы

Создать прогрессивное веб-приложение просто, и все, что вам нужно, это следующие основные ингредиенты, в том числе следующие:

  1. Оболочка приложения / HTML-кость
  2. Сервисные работники
  3. Манифест

Если вы запутались, не забывайте всегда возвращаться к первому абзацу этой статьи.

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

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

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

Теперь манифест

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

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

"name": "Konga EZ", и "short_name": "Konga EZ" - это имя, которое вы хотите, чтобы клиент видел в названии вашего приложения, если вы не создаете Konga EZ, я советую вам использовать собственное имя и логотип. "icons": lots of things here - это просто улыбающийся парень на картинке выше, и ваш может быть другим. "start_url": "index.html?launcher=true" возможно, вы уже догадались, что это страница, которую вы хотите обслуживать клиента, прежде чем загружать полный контент, в то время как ?launcher=true - это просто способ самостоятельно проверить, действительно ли пользователь запустился из PWA, это в основном указатель в вашем опросе данных аналитики. "theme_color": "#29629E" это цвет приложения, "background_color": "#29629E" цвет фона обслуживаемой страницы. "display": "standalone", который должен отображаться вашему клиенту в полноэкранном режиме в виде отдельного приложения или страницы браузера, в данном случае мы использовали автономное приложение.

Теперь все эти валирийские скрипты могут находиться в отдельном файле, вероятно, с именем manifest.json, поэтому, если вам нужно вызвать его в свое приложение, он будет таким же, как ваш CSS с тегом ссылки <link rel="manifest" href="/manifest.json"> , только в этом случае ваш rel должен быть manifest

Valah Mocoris должны работать все коды, кроме IE, Edge или Opera.

На момент написания этой статьи у Auwal MS на самом деле не было драконов, и я уверен, что он не назовет их PWA, его любимым будет Javascript, тем, которым он восхищается, будет Python и, вероятно, последним будет GDG. , ни Ауваль, ни я не понимаем валирийца Хотел бы я, и все скрипты / коды в этой статье в основном написаны на JavaScript, ни один из них не является валирианским, я уверен, что вы об этом знаете.

Получить слайды ко всему представленному можно по этой ссылке https://bit.ly/pwa-101

Все изображения и ссылки выше являются собственностью владельца, и это никоим образом не предназначалось для рекламы каких-либо продуктов или услуг, это просто на момент написания этой статьи kongax.konga.com был активным нигерийским сайтом PWA, известным инструктору Аувал MS, спасибо.

Говоря голосом Якена Хгхара, Безликого, «у приложения нет названия». но у нас есть фотографии.

Прежде чем я забуду С Днем независимости Нигерии, 1 октября, если у вас есть какие-либо вопросы, вы можете подписаться на Auwal в твиттере @Auwalms_, обратите внимание на подчеркивание и подписаться на меня @inidaname Я всегда отвечаю на него.

Так что спасибо всем на мероприятии, особенно @TechArewa, @Amaz_tech или Ахмаду Абдул Азизу.

А если вы хотите узнать о предстоящих или прошедших Tech Meet Up, подпишитесь на Tech MeetUp Nigeria и в Twitter @techmeetupng.

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