пва что это? Впервые я услышал pwa, когда босс за соседним столиком сказал при общении с фронтендом: «Это очень популярная технология во фронтенде, и пользовательский опыт очень хороший, простой и удобный… ". Похоже, я хочу попробовать, и с помощью большого парня я завершил первый проект pwa в своей жизни. Сильный Amway, давайте внимательно посмотрим на так называемую pwa
Что такое пва?
Прогрессивное веб-приложение, или PWA для краткости, — это новый способ улучшить работу веб-приложения, предоставляя пользователям возможность работы с собственными приложениями.
PWA может получить опыт нативных приложений, не ссылаясь на конкретную технологию, а применяя некоторые новые технологии для ее улучшения, что значительно улучшило безопасность, производительность и опыт. PWA по сути является веб-приложением. Некоторые новые технологии также имеют некоторые особенности. функции собственного приложения и имеют преимущества как веб-приложения, так и собственного приложения.
К основным особенностям PWA можно отнести следующие три пункта:
- Надежность — Мгновенная загрузка и отображение даже в нестабильной сетевой среде.
- Опыт - Отзывчивый, с плавной анимацией в ответ на действия пользователя
- Sticky — как родное приложение на устройстве, с иммерсивным пользовательским интерфейсом, который пользователь может добавить на рабочий стол.
Сам PWA делает упор на постепенный прогресс и не требует одновременного выполнения всех требований с точки зрения безопасности, производительности и опыта.PWA ChecklistПросмотр существующих функций.
Проще говоря, на самом деле pwa — это небольшое приложение, которое можно превратить в приложение.Вы можете задать свое собственное имя и значок, и вы можете установить его на рабочий стол, если вы нажмете «Установить» за адресной строкой браузера ( легкий, может быть, несколько сотен килобайт кэша) данных), его можно использовать прямо из коробки, избавляя от необходимости идти в магазин программного обеспечения для установки, и вы можете иметь собственное приложение, не заходя в магазин программного обеспечения. .
Ниже показано, что мы можем видеть с точки зрения пользователя: от страницы, напоминающей об установке, до установки пользователя на рабочем столе для создания значка и, наконец, открытия программного представления, чтобы увидеть несколько снимков экрана.
- Напомните пользователям об установке
- Создание значков на рабочем столе (значки и имена можно настроить)
- Щелкните значок, чтобы увидеть представление
Это очень похоже на родное приложение, подумайте о том, как ваша собственная Netease Music открывается вот так, мы можем установить маленькие значки на Mac, не заходя в App Store, взволнованны или счастливы, следующий шаг - засвидетельствовать, когда это доходит до маленьких чудес.
Как разрабатывать с помощью PWA
Когда мы впервые узнали о pwa, было трудно начать, точно так же, как если бы мы знали, что быть архитектором очень мощно, мы не сделали бы этого не потому, что не хотели, а потому, что наши силы не позволяли Это. Далее поговорим о том, как использовать пва в реальном бою, не спрашивайте о базовых принципах, потому что я тоже не знаю.
Прежде всего, мы собираемся подготовить лук, имбирь и чеснок, нет, это неправильно, приходите еще, во-первых, нам нужен проект для проекта vue ui.
1. В начале мы должны установить плагин pwa,Введите команду vue add @vue/pwa в командной строке, чтобы установить плагин pwa и связанные с ним зависимости и файлы. Файлы, сгенерированные после успешной установки плагина pwa, включают в себя: некоторые изображения логотипа vue, manifest.json и registerServiceWorker.js. Сгенерированное изображение логотипа vue является примером изображения, которое по умолчанию настроено в файле manifest.json. registerServiceWorker.js — это регистратор, используемый для регистрации сервис-воркера.Конечно, можно и не использовать сгенерированный регистратор
vue add @vue/pwa
2. Настройте pwa в файле vue.config.js.
pwa: {
workboxOptions: {
// https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin
skipWaiting: true,
clientsClaim: true,
importWorkboxFrom: 'local',
importsDirectory: 'js',
navigateFallback: '/',
navigateFallbackBlacklist: [/\/api\//]
}
}3. Зарегистрируйте сервис-воркера. При установке плагина pwa будет сгенерирован файл registerServiceWorker.js (под файлом src) и в main.js будет добавлен импорт, в этом файле автоматически генерируется код для регистрации сервис-воркера. Создаваемое по умолчанию имя сервис-воркера — service-worker.js, которое можно изменить на пользовательское сервис-воркер, например sw.js. Код registerServiceWorker.js выглядит следующим образом.
import { register } from 'register-service-worker'import { Message, MessageBox } from 'element-ui'if (process.env.NODE_ENV === 'production') { register(`${process.env.BASE_URL}service-worker.js`, { ready() { console.log( 'App is being served from cache by a service worker.\n' + 'For more details, visit https://goo.gl/AFskqB' ) }, registered() { console.log('Service worker has been registered.') }, cached() { console.log('Content has been cached for offline use.') }, updatefound() { Message({ message: '检测到新版本，正在下载', type: 'info' }) console.log('New content is downloading.') }, updated() { MessageBox({ title: '更新', message: '新版本内容下载完成，点击确定按钮立即使用新版', confirmButtonText: '确定', showClose: false, showCancelButton: false, closeOnClickModal: false, closeOnPressEscape: false, type: 'success', callback() { location.reload() } }) console.log('New content is available; please refresh.') }, offline() { console.log( 'No internet connection found. App is running in offline mode.' ) }, error(error) { console.error('Error during service worker registration:', error) } })}Затем мы вводим registerServiceWorker.js в main.js.
import './registerServiceWorker'4. Настройте файл public/manifest.json, который является функцией pwa, добавленной на рабочий стол, в основном зависит от этого файла.
{
"short_name": "短名称",
"name": "这是一个完整名称",
"icon": [
{
"src": "./img/icons/icon-192x192.png", // 可以自定义的icon
"sizes": "192x192", // 要注意尺寸要和实际尺寸相同
"type": "image/png" },
{
"src": "./img/icons/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "index.html" // 启动网址
"display": "standalone", // 启动画面
"background_color": "#002140", // 启动背景颜色
"theme_color": "#002140" // （index.html文件中也要设置）主题颜色，强烈建议和ui主题颜色保持一致，看起来更有原生app的感觉
}В файле manifest.json есть некоторые конфигурации, которые могут изменить взаимодействие с пользователем, вы можете взглянуть на этот URL-адрес.lavas.Baidu.com/Fatwa/engage-…
5. Ничего себе, следующий шаг — последний шаг, установите цвет нашей темы в public/index.html.
<meta name="theme-color" content="#00142A"> //之前只在manifest.json的“theme_color“设置了，没有起到作用，差点怀疑人生Следующим шагом является просмотр результатов. Сначала мы можем построить его, чтобы увидеть, успешно ли ссылаются на индекс в сгенерированном файле dist. Файл manifest.json и посмотреть, сгенерирована ли соответствующая конфигурация. Если да, поздравляем, жизнь первый pwa проект завершен, вручную посыпаем цветы🎉
<link rel=manifest href=/manifest.json>
<meta name=theme-color content=#4DBA87>Некоторые говорят, что pwa такая хорошая, почему она не так популярна, за это я тоже Baidu
1. Техническая поддержка браузера недостаточно полная, не каждый браузер может поддерживать 100% всех PWA.
2. Для вызова базового оборудования (например, камеры) требуется сторонняя библиотека.
3. PWA сейчас не так популярны.Некоторые отечественные производители мобильных телефонов проделывали трюки с системой Android, которая вроде бы блокирует PWA, но я верю, что когда PWA станет популярным, эта проблема не будет проблемой
Независимо от того, популярно это или нет, то, что мы узнали, это знания, и это так интересно, конечно, мы должны это изучить, иначе как мы можем говорить, что мы отличный фронтенд. Как добросовестный блоггер, чтобы узнать больше о pwa, мы можем взглянутьlavas.baidu.com/pwaВеб-сайт очень подробный, включая пользовательский опыт и все такое. Вы можете изучить его, если у вас есть что-то, и вы можете потратить время, чтобы понять, если у вас есть что-то. Вы найдете лучший мир.