Расскажите о PWA, которые я знаю

внешний интерфейс JavaScript Google PWA

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

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

1. Что такое прогрессивные веб-приложения? 

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

Прогрессивный:Для браузеров с разными версиями и разными ядрами его функции могут быть постепенно усилены. Поскольку соединение между пользователями и приложениями углубляется, если пользователи хотят, веб-страницы могут быть постепенно превращены в приложения, такие как добавленные к главному экрану, полноэкранный режим Операция, автономные работы, толкающие уведомления и т. Д. Но это все еще в Интернете, а не в App Store.

Отзывчивый:Адаптируйтесь к различным операционным средам, будь то мобильные устройства, Интернет, планшеты и т. д.

Слабая зависимость от сетевого окружения:Благодаря технологии Service Worker от Google, PWA значительно снижает свою зависимость от сетевой среды и может работать в автономном режиме или в крайне плохой сетевой среде.

Постоянно обновляется:Также благодаря наличию сервис-воркеров приложения могут легко получать непрерывные обновления.

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

Безопасность:Предоставляйте услуги через HTTPS, чтобы предотвратить слежение за сетью и гарантировать, что содержимое не будет изменено.


2. Мои личные знания PWA

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

В настоящее время основное гибридное приложение на рынке представляет собой не что иное, как два пути:

1. Подобно React Native, он разработан на языке JavaScript, а метка RN преобразуется в собственный графический интерфейс мобильного телефона путем визуального экранирования метки, при работе базовое оборудование и SDK мобильного телефона вызываются через js; преимуществом этого подхода является опыт работы с APP Ну, а недостатком является то, что цикл разработки почти такой же, как и у нативного APP

2. Многие малые и средние предприятия в стране и за рубежом предпочитают страницы H5 для покрытия оболочек приложений, таких как отечественный APICloud, H5plus и т. д., которые по сути являются просто браузером, который может получить доступ к определенным страницам H5; преимущество этого подхода заключается в том, что цикл разработки короткий, недостаток в том, что опыт и производительность плохие.

Что касается апплета и быстрого приложения, лично я считаю, что оно больше основано на идеях React Native, особенно апплета WeChat, который в основном следует набору RN.

Так в чем же разница между PWA и вышеуказанными приложениями? Некоторые люди могут подумать, что PWA — это почти то же самое, что небольшие программы и быстрые приложения, но, на мой взгляд, PWA по своей сути отличаются от небольших программ, быстрых приложений и гибридных приложений!

Помните полное название PWA? Прогрессивные веб-приложения, это было четко написано здесь. Это веб-приложение. React Native, мини-программы и быстрые приложения работают над де-HTMLизацией. Хотя все они написаны на JavaScript как на языке разработки, вам нужно знаете, JavaScript предназначен не только для HTML.Если вы читали соответствующие книги, то знаете, что JavaScript может работать в среде, отличной от браузера!

Вышеупомянутые другие приложения в основном отказались от другого контента в HTML, кроме JS, но PWA отличается, это все еще веб-страница с нижней части! Когда речь заходит о веб-приложениях, некоторые студенты могут усмехнуться, ведь на современном рынке доля веб-приложений, то есть мобильных веб-страниц, сильно сократилась (На следующем рисунке показана доля времени использования мобильного Интернета и приложений, предоставленная Google.), или что веб-приложение, возможно, никогда не было блестящим. Переход от традиционного компьютерного терминала к эре смартфонов на самом деле очень короткий. Я думаю, что каждый может сопереживать этому, но сейчас никто не может сказать, придет ли веб-приложение. Когда вы достигаете торговой точки — благодаря PWA веб-страницы, которые вы посещаете, уже имеют опыт, сравнимый с нативными приложениями!

图片描述


3. Как PWA изменят наш мобильный опыт?

Когда вы открываете некоторые веб-страницы в своем мобильном браузере, вы часто видите следующие страницы:


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

В ноябре 2016 года команда Google уже попробовала и предварительно реализовала переименование «Добавить на главный экран» в «Установить».Установленное PWA больше не отображается на рабочем столе в виде виджета, но действительно совместимо со всеми родной Уровень приложения тоже хранится в ящике приложений (App Drawer), и он тоже появляется в настройках системы.


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


4. Оценка дела

Некоторые отличные технические команды в стране и за границей начали пробовать запускать несколько хороших приложений PWA. Я кратко представлю следующие два известных.

Флипкарт (Индия)

图片描述

Визуальные различия в офлайн-ситуациях

图片描述


Дубан (Китай)

Alt text

Alt text

Alt text