Первый взгляд на PWA

внешний интерфейс

введение

PWA (Progressive web apps, Прогрессивные веб-приложения) очень популярны в последние два года, в чем его преимущества?

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

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

Service Worker

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

Жизненный цикл

Жизненный цикл сервис-воркера полностью не зависит от веб-страницы. Поэтому, если вы хотите использовать сервис-воркер на веб-странице, вам необходимо сначала зарегистрироваться. После регистрации браузер начнет соответствующие шаги установки в фоновом режиме. в общем, нам нужен сервис-воркер для кэширования некоторых статических файлов, поэтому в процессе установки указанные статические файлы будут кэшироваться.Если кеширование прошло успешно, установка сервис-воркера прошла успешно.Если какой-либо файл в середине не кэшируется , установка сервис-воркера завершается ошибкой, и он попытается повторить попытку при следующем перезапуске. Давайте рассмотрим конкретный пример. Диаграмма жизненного цикла (исходный кодdeveloper.Mozilla.org/this-cn/docs/…):

Простое приложение

Кажется, что выше введение, не горят желанием попробовать? Далее я буду использовать код, чтобы просто использовать сервис-воркер для кэширования файлов css и js на странице Конкретные примеры:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/cache1.css">
    <title>pwa</title>
  </head>
  <body>
    <div id="app">test1</div>
    <!-- built files will be auto injected -->
    <script src='/cache1.js'></script>
    <script>
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', function () {
          navigator.serviceWorker.register('/sw.js').then((registration) => {
            console.log('Service Worker Registration')
          }, (err) => {
            console.log(err)
          })
        })
      }
      self.addEventListener('fetch', () => {
        console.log('ss')
      })
    </script>
  </body>
</html>

SW.js:

var cacheName = 'my-cache'
var cacheList = ['/cache1.css', '/cache1.js']
self.addEventListener('install', function(event) {
  event.waitUntil(
    // 安装成功后向caches中存入需要缓存的文件  
    caches.open(cacheName).then(function (cache) {
        return cache.addAll(cacheList)
    })
  )
});
// 监听service worker fetch
self.addEventListener('fetch', function (event) {
  event.respondWith(
    caches.match(event.request)
        .then(function(response) {
            // 在缓存中查找到匹配的请求，就从缓存返回
            if (response) {
                console.log(response)
                return response;
            }
            // 缓存中没有查找到对应请求，继续网络请求
            return fetch(event.request);
        }
    )
  );
})

Как показано в приведенном выше примере, используйте сервис-воркер для кэширования cache1.js и cache1.css в запросе страницы, а затем обновите страницу, запрос страницы станет следующим:

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

pwa в vue-cli3

В последнюю версию скаффолдинга vue интегрирован подключаемый модуль pwa, который упрощает реализацию pwa. Вам нужно только настроить атрибут pwa в файле vue.config.js для автоматического создания соответствующего файла конфигурации service-worker.js. :портал, ядром которого является интеграция Workbox, разработанного командой Google, поэтому вы можете обратиться к более подробной конфигурации pwa:портал, который содержит все элементы конфигурации рабочего ящика. Здесь необходимо обратить внимание на атрибут runtimeCaching. Этот атрибут предоставляет пять стратегий кэширования:

  • CacheFirst: данные в кеше будут взяты первыми, если нет, то будет запрошена сеть.Если сеть выйдет из строя, будет сообщено об ошибке.
  • CacheOnly: получить только из кеша, если нет, будет сообщено об ошибке
  • NetworkFirst: сначала получить его из сети, если нет, получить его из кеша и сообщить об ошибке, если кеш не сможет его получить.
  • NetworkOnly: получено только из сети, в противном случае будет сообщено об ошибке
  • StaleWhileRevalidate: получение из сети во время кэша, кэша, если он доступен, буфера выборки данных или запроса из сети, пока кэш обновляется сетевыми запросами.

Более подробные стратегии кэширования см.портал, Еще одна проблема, на которую следует обратить внимание в стратегии кэширования, — это проблема стратегии одного и того же источника.Как правило, workbox не кэширует междоменные запросы ресурсов, потому что при кэшировании междоменных ресурсов workbox не может определить, междоменный запрос выполнен успешно, в случае неудачи пользователь не сможет получить данные ответа, но при стратегиях NetworkFirst и StaleWhileValidate междоменные ресурсы могут кэшироваться, т. к. кэш этих двух стратегий будет регулярно обновляться , даже если есть неудачный запрос, время кеша мало, для получения подробной информации см.портал

совместимость

ServiceWorker настолько хорош, есть ли какие-либо проблемы? Его самая большая проблема должна заключаться в его совместимости. Он не поддерживается до iOS 11.3. Для получения подробной информации см.:портал, поэтому скаффолдинг vue по умолчанию отключен под ios при интеграции

Суммировать

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

Категории