PWA шагает в яму, обучая Vue создавать PWA

внешний интерфейс сервер Vue.js PWA

Автономное приложение PWA

  • Растущее развитие фронтенда неотделимо от средств оптимизации производительности, включая CDN, CSS Sprite, объединенное сжатие файлов, асинхронную загрузку, кеширование ресурсов и т.д. Чаще для того, чтобы уменьшить количество пользовательских запросов, есть крутые навыки B, такие как PWA, открытие сайта за секунды, офлайн-доступ и т. д.

  • Так что мне не терпится приоткрыть таинственную завесу PWA и использовать следующее:

    • vuecli3.0
    • register-service-worker
    • Android, который не слишком застрял (версия Android недостаточно высока, чтобы Chrome не мог быть добавлен на рабочий стол)

  • Первая картинка:

vuecli3.0

  • Последняя версия vuecli, vuecli3.1, устанавливается командой npm install -g vue@cli.
  • Vuecli 3.0 имеет еще много волшебных и удобных функций.Автор должен хотеть упростить процесс разработки разработчиков.С крутым визуальным интерфейсом GUI можно просматривать,устанавливать,управлять пакетами и т.д. в браузере через vue ui
  • vuecli3.0 также интегрирует сервис-воркер, некоторые часто используемые средства обнаружения грамматики, автоматизированное тестирование и другие инструменты.

register-service-worker

  • Друзья, которые пользовались create-react-app, должны знать, что скаффолдинг, официально рекомендованный react, по умолчанию оснащен пакетом register-service-worker.После упаковки дополнительно генерируются следующие файлы:

    • `manifest.json: Вы можете настроить способ открытия приложения в браузере, рабочий стол, имя приложения, анимацию запуска приложения и т. д.

    • service-worker.js: вы можете увидеть функции и конфигурации установки, активации, удаления и т. д. сжатого и упакованного сервисного работника.

    • asset-manifest.json: Принудительно кэшированные файлы в автономном режиме, чтобы приложение могло работать в автономном режиме.

Подробные вопросы о Service Worker можно просмотреть по следующей ссылке:

Конфигурация серверной части

  • Кэширование в автономном режиме требует фонового взаимодействия Эффект в автономном режиме может быть достигнут за счет эффективного кэширования Какой тип кэширования эффективен? Это принудительный кеш!
  • И обязательный кэш, и согласованный кэш являются кэшами со следующими отличиями:
    • Согласованный кеш: кеш есть, но после активного запроса сервер не возвращает никаких ресурсов
    • Принудительное кеширование: кеш есть, запросы к серверу не выполняются, используются локальные кеши или кеши в памяти или сервис-воркере
  • Сначала популяризируем карту распространения кеша:

  • Просмотрите ресурсы, загруженные при загрузке страницы в сети консоли Chrome, и вы обнаружите, что некоторые ресурсыcache from disk,cache from memoryПодождите, есть некоторые ресурсы, которые напрямую отображают размер файла ресурса, так что же происходит?
    • cache from disk: это принудительный кеш, что означает, что ресурс извлекает ресурс из локального файла кеша.
    • cache from memory: это принудительный кэш, что означает, что ресурс вытягивает ресурс из памяти
    • Непосредственное отображение размера ресурса: Это кеш согласования или кеша нет, ресурс каждый раз скачивается с сервера

  • Вот пример экспресса, нужно поставить публичный фильтр, поставить обязательный кеш для GET запросов, а время два часа
//以下的Code设置了公用的响应头中返回的强缓存时间、CORS跨域等等
app.all("*", function(req, res, next) {
	if(req.path !== "/" && !req.path.includes(".")) {
		res.header("Access-Control-Allow-Origin", req.headers["origin"] || "*")
		res.header("Access-Control-Allow-Credentials", true)
		res.header("Access-Control-Allow-Headers", 'Content-Type,Content-Length, Authorization, authorization,\'Origin\',Accept,X-Requested-With')
		res.header("Access-Control-Allow-Methods", "POST,GET,PUT,DELETE,OPTIONS")
		res.header("Content-Type", "application/json;charset=utf-8")
		if(req.method.toUpperCase() === "GET"){
			res.header("Cache-Control","max-age=7200")
		}
	}
	next()
})

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

  • В этот раз я столкнулся с проблемой Shenkeng в майнинговой яме, когда сервер устанавливает заголовок ответаres.header("Access-Control-Allow-Origin", req.headers["origin"] || "*")После этого, если этот же браузер будет GET-запросом к серверу, будет сообщено об ошибке, а в отчете об ошибке отобразится междоменный запрет.Из-за установленного выше обязательного кэширования браузер будет активно кэшировать GET-запрос. запрос, поэтому GET в кеше в заголовке ответа запросаAccess-Control-Allow-Origin(Настройка разрешения доменных имен на пересечение доменов) будет отображать доменное имя первого запроса GET, а во второй раз, когда тот же браузер использует другое доменное имя для GET этого запроса, затемAccess-Control-Allow-OriginВозврат - это первое запрос доменного имени, это будет ошибка.

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

  • спасибо в комментариях王品洲Напоминание: (ПК) Chrome нельзя добавить на рабочий стол: попробуйте F12-> Приложение-> Манифест -> Добавить на домашний экран.

Категории