1. Что?
A new way to deliver amazing user experiences on the web.Способ улучшить работу пользователей в Интернете. В дополнение к естественному (удобному) взаимодействию с Интернетом есть 3 функции: надежность, скорость, увлекательность.
Надежность: в нестабильной сетевой среде его можно загрузить немедленно, не возвращаясь к древним временам (из-за отключения)
Надежность относится к автономному кэшированию и кэшированию в отключенном состоянии, чтобы гарантировать, что автономные сценарии по-прежнему доступны. Service worker взаимодействует с API кеширования, чтобы установить механизм кеш-прокси.
Быстро: быстро используйте шелковистую анимацию в качестве интерактивной обратной связи, без пропуска кадров и зависания прокрутки
Быстро, просто подчеркните, что интерактивная обратная связь "чувствуется быстро", связанная с уважаемым Material Design, и нет реального преимущества в скорости (по крайней мере, не на первом экране)
Кроме того, благодаря механизму cache-proxy, локальный кеш будет довольно быстрым при повторном доступе.
Нативное: как собственное приложение устройства, с захватывающим пользовательским интерфейсом (т. Е. В полноэкранном режиме)
В дополнение к полноэкранному режиму есть также значки главного экрана (позволяющие веб-приложению иметь место на главном экране) и системные уведомления (возможность «жить»), которые реализуются через конфигурацию манифеста веб-приложения, в зависимости от поддержки пользовательской среды.
Абстрактное прилагательное PSEngaging действительно сложно перевести, поэтому давайте пока возьмем его фактическое значение, например, родное
Итак, на первый взгляд основные моменты PWA разделены на две части:
(Offline) механизм кеширования-прокси
Встроенные функции, такие как полноэкранный режим, значки на главном экране и системные уведомления
Механизм кэширования не является новым в Web App / SPA. После извлечения уровня данных кэширование выполняется плавно. Но фокус другой. Механизм кэширования PWA смещен в сторону кэширования статических ресурсов, в то время как уровень кэширования веб-приложения / SPA в основном используется для кэширования динамического контента (если срок действия последнего контента не истек, динамическая часть не будет извлечена, но будет использоваться клиент напрямую. Конец рендеринга)
Что касается полноэкранного режима, значка главного экрана, системных уведомлений и других встроенных функций, это рассматривается как усовершенствование в прогрессивном улучшении, которое доступно в поддерживаемой пользовательской среде (некоторые браузеры предоставляют поддержку, но более широкая среда WebView может не работать в ближайшем будущем) . Но это показывает, что Интернет постепенно выходит из эпохи ПК и движется в сторону мобильных устройств.
2. Демонстрация
зависит от среды
HTTPS.
Источник службы должен быть безопасным, поэтому требуется среда HTTPS. Помимо соображений безопасности веб-информации, это также важная причина для содействия популяризации HTTPS. Как необходимая инфраструктура для развития веб-технологий, HTTPS требует разрешения пользователя на использование новых функций, таких как фотографирование, запись, push API, а HTTPS - это авторитет. Важная часть рабочего процесса
PS может ощутить разницу между HTTPS и HTTP средами при получении авторизации пользователя в разрешении. Сайт
Собственное улучшение
достигается за счет введения файла конфигурации манифеста веб-приложения, который вступает в силу в браузерах, поддерживающих PWA (худший результат в неподдерживаемой среде - запрос еще одного файла JSON):
<link rel = "manifest" href = "./ manifest.json">
Обратите внимание, что есть аналогичная вещь, называемая Application Cache (функция HTML5, устаревшая), и ее манифест представлен другим способом:
<html manifest="example.appcache">
...
</html>
Поскольку эти два метода введения различны, манифест веб-приложения и кэш приложения не имеют отношения к делу, и не стоит беспокоиться об историческом багаже.
PSApplication Cache лучше поддерживает SPA, но не подходит для многостраничных приложений, но есть много проблем, поэтому я не буду здесь подробно рассказывать.
Примеры содержимого манифеста веб-приложения значка на главном экране :
{
"short_name": "主屏显示的应用名称",
"name": "安装banner显示的应用名称",
"icons": [
{
"src": "launcher-icon-1x.png",
"type": "image/png",
"sizes": "48x48",
"density": "1.0"
},
{
"src": "launcher-icon-2x.png",
"type": "image/png",
"sizes": "96x96",
"density": "1.0"
},
{
"src": "launcher-icon-4x.png",
"type": "image/png",
"sizes": "192x192",
"density": "1.0"
}
],
"start_url": "index.html?launcher=true"
}
Баннер установки PS - это всплывающая панель, аналогичная получению разрешений. Пользователи могут выбрать: добавить на главный экран или отменить. При соблюдении определенных условий Chrome автоматически отобразит баннер установки. Подробнее см. Баннеры установки веб-приложений.
Таким образом, в идеале у нас есть значок главного экрана, и среда, поддерживающая манифест веб-приложения, выберет наиболее подходящий значок (ближайший к 48dp)
Примечание. Содержимое index.html должно быть минимальным содержимым, необходимым для рендеринга первого экрана. Чтобы добиться эффекта немедленной загрузки первого экрана, фрейм страницы с загрузкой и заполнителем по умолчанию может отображаться как оболочка приложения. Кроме того, для достижения производительности первого экрана, доступной за секунды, в PWA также рекомендуются другие традиционные методы оптимизации производительности первого экрана веб-приложения, такие как прямой вывод данных. Как упоминалось в начале, PWA не имеет преимуществ в производительности (первый экран), и традиционные методы оптимизации для веб-приложений по-прежнему необходимы.
На экран-заставку (Splash) можно
попасть с помощью значка главного экрана, а настраиваемое содержимое отображения процесса запуска включает в себя: заголовок, цвет фона и изображение. Новые элементы конфигурации следующие:
// 背景色
"background_color": "#2196F3",
// 主题色，包括工具栏
"theme_color": "#2196F3",
Изображение Выберите изображение, наиболее близкое к 128dp, из значков в качестве заставки; анимированные изображения не поддерживаются.
Кроме того, вы также можете указать режим отображения и ориентацию страницы:
// 全屏（隐藏浏览器的UI）
"display": "standalone",
// 显示浏览器外壳，像打开书签一样
"display": "browser",
// 横屏
"orientation": "landscape"
PS Примеры экранов-заставок и дополнительную информацию см. В разделе Добавление экрана-заставки для установленных веб-приложений в Chrome 47.
Специальное примечание: если файл manifest.json обновлен, эти изменения не вступят в силу автоматически, если пользователь повторно не добавит приложение на главный экран.
Системные уведомления не имеют
ничего общего с манифестом веб-приложения и полагаются на Push API. Вот простой пример:
// service-worker.js
self.addEventListener("push", function (event) {
event.waitUntil(
self.self.registration.showNotification("发布新文章啦", {
body: "有新文章发布啦,点击查看。"
})
);
});
Здесь не так много введения (в настоящее время (2017/12/15) почти можно считать, что этой функции не существует), потому что спецификация определяет API, но не предусматривает унифицированный протокол push, поэтому механизм push у каждого браузера разный, например Chrome GCM недоступен под нашим небом
Для получения дополнительной информации о Push API, пожалуйста, проверьте функцию push-уведомления [Service Worker] "Annihilated"
Кэш-
память Cache-proxy разделена на несколько частей:
Кэш статических ресурсов первого экрана (предварительный кеш)
Доступный кеш ресурсов (кеш времени выполнения)
Кэширование динамического содержимого (кеширование во время выполнения)
Кэш - это чистая операция с данными (включая постоянство), и сервис-воркеры могут работать в фоновом режиме, что особенно подходит для обработки вещей, не имеющих ничего общего со страницами и взаимодействиями. Таким образом, сервис-воркеры являются партнерами Cache API и Push API. Однако сам сервис-воркер также должен рассматриваться как «расширенный» элемент. В средах, которые не поддерживают сервис-воркеры, механизм кэширования следует пропускать, чтобы обеспечить работу базовой страницы. Простая схема обнаружения функций выглядит следующим образом:
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('./service-worker.js')
.then(function() { console.log('Service Worker Registered'); });
}Service worker завершает кэширование статических ресурсов первого экрана, включая App Shell в обработчике событий установки:
// service-worker.js
var cacheName = 'weatherPWA-step-6-1';
var filesToCache = [
// 入口URL
'/',
'/index.html',
'/scripts/app.js',
'/styles/inline.css',
// App Shell需要的资源
'/images/ic_add_white_24px.svg',
'/images/ic_refresh_white_24px.svg',
// 内容展示可能用到的资源
'/images/clear.png',
'/images/cloudy-scattered-showers.png',
'/images/cloudy.png',
'/images/fog.png',
'/images/partly-cloudy.png',
'/images/rain.png',
'/images/scattered-showers.png',
'/images/sleet.png',
'/images/snow.png',
'/images/thunderstorm.png',
'/images/wind.png'
];
self.addEventListener('install', function(e) {
console.log('[ServiceWorker] Install');
e.waitUntil(
caches.open(cacheName).then(function(cache) {
console.log('[ServiceWorker] Caching app shell');
//! 只要有一个失败就不接着做下一个了
return cache.addAll(filesToCache);
})
);
});
Конечно, вам также необходимо выполнить базовый контроль версий кеша:
// service-worker.js
self.addEventListener('activate', function(e) {
console.log('[ServiceWorker] Activate');
e.waitUntil(
caches.keys().then(function(keyList) {
return Promise.all(keyList.map(function(key) {
// 以为cacheName为cache key，如果存在旧的缓存，删除掉
if (key !== cacheName) {
console.log('[ServiceWorker] Removing old cache', key);
return caches.delete(key);
}
}));
})
);
// 要求立即激活service worker，避免边界case
return self.clients.claim();
});
Граничный случай PS относится к тому факту, что в некоторых случаях сервис-воркер не может быть немедленно восстановлен в активное состояние, что приводит к отсутствию кеша. Чтобы защитить эти граничные случаи, рекомендуется использовать GoogleChromeLabs / sw-precache для решения проблем управления кешем (включая истечение срока действия, политику обновления и т. Д.)
Кеш есть, а затем реализовать прокси-часть, перехватить запрос и ответить кешированным содержимым:
// service-worker.js
// 拦截请求
self.addEventListener('fetch', function(event) {
console.log('[ServiceWorker] Fetch', e.request.url);
// 自定义响应内容
e.respondWith(
// 查找缓存，没有才请求
caches.match(e.request).then(function(response) {
return response || fetch(e.request);
})
);
});
На этом этапе основной механизм кеширования-прокси готов. Мы сделали следующее:
Предварительное кеширование статических ресурсов по списку ресурсов
Запрос на перехват
Отправить кешированный контент в ответ на прошлое
Есть 3 соображения:
Кеш браузера может повлиять на обновление кеша, поэтому запрос в обработчике события установки не попадет в кеш, а напрямую попадет в сеть.
Выход из системы Service Worker не очистит кеш. Если ключ кеша останется прежним, вы получите старое содержимое кеша позже.
По умолчанию вновь зарегистрированный сервис-воркер не вступит в силу, пока страница не будет перезагружена, если не будет выполнена специальная обработка.
Кроме того, с нашей упрощенной реализацией все еще есть некоторые проблемы, такие как:
Контроль версий кэша основан на статическом кэше ключа, который необходимо изменять каждый раз при обновлении service-worker.js.
После изменения ключа кеша все кеши будут удалены, и запрос будет выполнен снова, что является пустой тратой статических ресурсов.
Отсутствие кеша времени выполнения, список ресурсов недостаточно гибкий, ожидайте более мощного кеша при доступе
Первая проблема не является хорошим решением, вторую проблему можно решить, разделив типы ресурсов, например:
// Shorthand identifier mapped to specific versioned cache.
var CURRENT_CACHES = {
font: 'font-cache-v' + FONT_CACHE_VERSION,
css: 'css-cache-v' + CSS_CACHE_VERSION,
img: 'img-cache-v' + IMG_CACHE_VERSION
};
За счет более детального управления версиями стоимость принудительного обновления кеша может быть до определенной степени снижена.Конечно, есть также HTTP-кеш под слоем кеша.Стоимость обновления кеша не очень критична.
Что касается кеширования во время выполнения, на самом деле нужен только последний маленький шаг:
Если кеш отсутствует, запросите ресурсы и кеш
подробности следующим образом:
// 查找缓存，没有才请求
caches.match(e.request).then(function(response) {
return response || fetch(e.request).then(function(res) {
return caches.open(dataCacheName).then(function(cache) {
// 并缓存起来
cache.put(e.request.url, res.clone());
return res;
)
})
})
Кроме того, вы можете выбрать подходящие стратегии кэширования в зависимости от типов ресурсов и требований сценария, например:
// service-worker.js
self.addEventListener('fetch', function(e) {
console.log('[Service Worker] Fetch', e.request.url);
var dataUrl = 'https://cache.domain.com/fresh/';
// 策略1：有实时性要求的资源，请求优先，fetch then cache
if (e.request.url.indexOf(dataUrl) > -1) {
e.respondWith(
caches.open(dataCacheName).then(function(cache) {
return fetch(e.request).then(function(response){
cache.put(e.request.url, response.clone());
return response;
});
})
);
} else {
// 策略2：一般资源，缓存优先，cache falling back to fetch
}
});
PS Дополнительные стратегии кеширования см. В справочном разделе.
3.
Официальная демо-версия Demo: Weather PWA, может быть недоступна в обычном режиме.
Перенос демонстрации (перенос официальной демонстрации на страницы github): https://ayqy.github.io/pwa/demo/weather-pwa/index.html
Страницы PSgithub очень подходят для использования в качестве тестового поля, стабильный и надежный HTTPS, нет ограничений на содержание публикуемого контента, вы можете выбросить его, будущие демо блога постепенно переместятся в прошлое (ранее размещенные на собственном FTP, что действительно глупо ...)
погода-pwa
Не очень оптимистичные новости: на самом деле пользовательская среда была специально подготовлена (официальный подлинный Chrome + официальная демонстрация), и на Mi 4 не было всплывающего баннера автоматической установки (возможно, рабочее положение и другие условия не соблюдены, см. Выше), нажмите вручную «Добавить на главный экран», тост был успешно добавлен, но на главном экране ничего нет ... Вот почему я не могу заинтересоваться рукописным вводом Демо, чтобы попробовать (конечно, основная причина - лень;))
4.
Международная станция Case Alibaba
AliExpress
Вы голодны: Странно, почему вы не почувствовали действие Кеша?
Обратите внимание, что скрытый режим может привести к тому, что обслуживающий персонал международной станции Alibaba выдаст следующие ошибки:
Неперехваченное (в обещании) исключение DOMException: квота превышена.
Нормальная среда может работать нормально
PS Чтобы узнать больше, ознакомьтесь с примерами использования | Интернет | Google | Разработчики
V. Сценарии приложений
Короче говоря, PWA - это обновленная версия веб-приложения, основным преимуществом которой является встроенная поддержка. Постепенно улучшенный способ «обновления» веб-приложения до PWA может быть выполнен без слишком больших затрат, что позволяет некоторым пользователям (среда, поддерживающая PWA) получить более быстрый (кэширование) и более удобный (значок на главном экране), как в родном интерфейсе (полноэкранный режим) )
Затем конкретные сценарии применения делятся на следующие категории:
Веб-приложение, в котором кеширование может принести очевидные преимущества
Хотите иметь офлайн-возможности или собственный опыт, или просто хотите веб-приложение со значком на главном экране
Поставщик веб-приложений или браузеров, который рассчитывает найти горячую точку в технологиях / помочь продвинуть их разработку.
Независимо от сценария приложения, сказав, что, как сказано в статье о кешировании (или о работнике?) В zxx, такая небольшая стоимость может сделать страницу недоступной.Если вы действительно видите преимущества кеширования, почему бы не сделать это. ?
Кроме того, все основные фреймворки, такие как Angular, React и Vue, предоставляют каркас PWA. Подробности см. В The Ultimate Guide to Progressive Web Applications.
Справочные материалы
Поваренная книга оффлайн: стратегия графического кэширования, хорошие вещи, для перевода достаточно посмотреть Поваренную книгу ServiceWorker
Как вы оцениваете перспективы развития прогрессивных веб-приложений?
Ваше первое прогрессивное веб-приложение: официальное руководство
Руководство по прогрессивным веб-приложениям для новичков: более полное руководство
Превратите свой веб-сайт в PWA: превратите свой сайт в прогрессивное веб-приложение