Руководство по преобразованию веб-сайта в прогрессивное веб-приложение (PWA)

За очень короткий промежуток времени PWA оставили очень заметный след в индустрии мобильных приложений.

Концепция, о которой Google хочет, чтобы вы знали , является передышкой для отрасли, которая постоянно предъявляет одни и те же жалобы снова и снова:

Что касается веб-сайтов: медленная скорость загрузки и низкий уровень резонанса .

Что касается мобильных приложений: приложения занимают много места в памяти, это зависит от сетевого подключения и долгие шаги, которые пользователям придется пройти от поиска приложения до начала его использования.

Поскольку прогрессивные веб-приложения (PWA) загружаются прямо с веб-сайта и также работают как веб-сайт, пользователи получают три преимущества:

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

Причины для преобразования вашего существующего веб-сайта в PWA

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

Преимущества , которые PWA приносят бизнесу , поскольку их легко обнаружить, они занимают меньше места в памяти, имеют низкую стоимость разработки и, наконец, работают в автономном режиме с большой скоростью, можно оценить, наблюдая за изменением показателей роста этих известных брендов. –

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

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

Вот точные шаги к тому, как преобразовать веб-сайт PHP в PWA или как превратить веб-сайт в приложение , предоставленные Google нашей команде разработчиков прогрессивных веб-приложений (одно из преимуществ того, чтобы быть одним из официальных агентств разработчиков Google) .

Но обо всем по порядку. Знайте элементы, которые вам понадобятся для создания PWA с веб-сайта или если вы хотите превратить веб-страницу в приложение.

Как превратить сайт в PWA

Чтобы преобразовать веб-сайт в PWA , необходимы три вещи:

1. Подключенное устройство Android с Chrome 52 или более поздней версии,
2. Базовое понимание Git и Chrome DevTools,
3. Пример кода и
4. Текстовый редактор

Как только они будут готовы, приготовьтесь преобразовать веб-сайт в PWA или преобразовать веб-сайт в веб-приложение.

Шаг 1. Загрузите URL-адрес

Первым шагом в переносе вашего сайта на PWA является клонирование репозитория GitHub из командной строки:

 $ git клон https://github.com/googlecodelabs/migrate-to-progressive-web-apps.git

Это поможет создать каталог Migrate to PWA с готовым кодом для каждого шага. Для этой конкретной лаборатории кода загрузите рабочий файл, а затем внесите в него изменения.

После проверки кода используйте «Простое приложение HTTP-сервера» для обслуживания рабочего файла через порт 8887.

После этого вы сможете загрузить URL-адрес для преобразования сайта в PWA.

Шаг 2. Просмотрите сайт на своем мобильном телефоне

Это второй шаг к превращению веб-сайта в прогрессивное веб-приложение. Если у вас есть устройство Android, подключенное к вашему рабочему столу, введите его в URL-адрес — chrome://inspect. Это позволит вам установить переадресацию порта с помощью порта, который вы прописали ранее, на тот же порт на устройстве.

Нажмите Enter для этого, чтобы сохранить.

Теперь вы сможете получить доступ к базовой версии вашего веб-сайта по адресу — http://localhost:8887/ на подключенном телефоне Android.

Шаг 3: Добавьте теги Modern Head

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

Если у вас нет системы шаблонов, добавьте эти строки:

 <голова>

<meta name= «viewport» content=»width=device-width, user-scalable=no» />

<link rel= «манифест» href= «manifest.json» />

</голова>

• Область просмотра — первая строка состоит из метатега, указывающего область просмотра. Этот элемент поможет вам с отзывчивостью. После написания строки кода после перезагрузки сайта вы обнаружите, что сайт точно соответствует вашему устройству.
• Манифест — во второй строке вашего кода вы ссылаетесь на файл — движение, необходимое для управления тем, как сайт добавляется на домашние экраны.

После этого откройте текстовый редактор. Пришло время написать JSON. В разделе short_name укажите, что будет отображаться на главном экране, и постарайтесь уложиться в 15 символов .

Затем сохраните файл с номенклатурой manifest.json, перезагрузите страницу на устройстве Android, перейдите в верхнее правое меню и выберите « Добавить на главный экран ». Теперь вы сможете увидеть свою иконку на главном экране!

Шаг 4. Добавьте сервис-воркера

Service Worker — это фоновый сценарий, который браузер может запускать, когда пользователя нет на странице. Это элемент, который обеспечивает автономную поддержку и становится активным при отправке уведомления.

Создать сервис-воркера

Скопируйте этот код в новый файл и сохраните его как sw.js.

 /** Пустой сервис-воркер! */

self.addEventListener («выборка», функция (событие)

{

/** Пустой обработчик выборки! */

});

И это все.

Зарегистрируйте сервис-воркера

Вам нужно будет зарегистрировать код в коде вашего веб-сайта, чтобы превратить веб-страницу в приложение, для этого откройте файл site.js и вставьте это —

 navigator.serviceWorker && navigator.serviceWorker.register('./sw.js').then(function(registration) { console.log('Отлично, зарегистрирован с областью действия: ', Registration.scope);});

Теперь код будет выполняться при каждой загрузке страницы. Проверьте, правильно ли он работает, перезагрузив страницу, а затем проверив – chrome://serviceworker-internals/

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

Шаг 5: Заставьте сайт работать в автономном режиме

Первым шагом будет открытие сценария sw.js и получение объекта кеша. Как только вы это сделаете, обновите код и примените кеширование всего веб-сайта.

Попробуйте, как это работает сейчас. Удалите текущее приложение и загрузите его в Chrome. Затем обновите страницу и выберите « Добавить на главный экран » в правом углу меню.

Чтобы соблюдать правило, согласно которому при изменении Service Worker страница должна перезагружаться и переустанавливаться, все, что вам нужно сделать, это добавить компонент, который имеет «версию» Service Worker. Когда это изменится, перемещение установки произойдет снова, кэшируя ресурсы, которые должны были измениться.

Поздравляем, теперь вы знаете, как преобразовать веб- приложение в PWA, и если вы следовали этим шагам параллельно, вы даже перенесли свой веб-сайт в прогрессивное веб-приложение!

*Отказ от ответственности*: Эти шаги дадут вам, разработчику, точное представление о том, как вам придется заполнять пробелы и двигаться от точки А в процессе к точке С. Если вы читаете это как энтузиаст-предприниматель, желающий преобразовать wordpress в прогрессивное веб-приложение или хотите сделать приложение из веб-сайта, я бы сказал, не делайте этого без поддержки опытного поставщика услуг по разработке прогрессивных приложений.

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