Максим Сальников

@webmaxru

Погружение в глубокий офлайн –

веб способен на это!

Что значит готовность веб-приложения к офлайн

И как еe достичь прямо сегодня

Максим Сальников

  • Организатор Mobile / Web / PWA митапов в Осло и Лондоне

  • Организатор конференций Mobile Era и ngVikings в Скандинавии

  • Ответственный за поток о веб-разработке 404fest в Самаре

Ответственный за успех Azure-разработчиков в Microsoft

@webmaxru

  1. The World Wide Web is the New Software Platform

  2. The Web Browser is the New Operating System

  3. JavaScript is the de facto Programming Language of the Web 

 Web Browser as an Application Platform: The Lively Kernel Experience

Antero Taivalsaari, Tommi Mikkonen, Dan Ingalls, Krzysztof Palacz

Январь, 2008

Веб – отличная платформа для приложений

Браузеры

  • Почти на каждом устройстве с UI

  • Автообновляемые

  • API для доступа к аппаратным ресурсам

JavaScript

Браузеры

  • Разносторонний язык

  • Мощный инструментарий

  • Поступательно развивается в правильном направлении

Веб – отличная платформа для приложений

JavaScript

Движки JS

Браузеры

  • Курс на производительность

  • Возможности встраивания

Веб – отличная платформа для приложений

JavaScript

Движки JS

Интерфейсы

Браузеры

  • Удобные инструменты для создания адаптивных интерфейсов

  • Повышенное внимание доступности

  • Разнообразие высококачественных библиотек компонентов

Веб – отличная платформа для приложений

Сообщество

JavaScript

Движки JS

Интерфейсы

Браузеры

https://insights.stackoverflow.com/survey/2019

69.7%

Веб – отличная платформа для приложений

Сообщество

JavaScript

Движки JS

Интерфейсы

Браузеры

Проблемы?

Завязан на состояние подключения к сети

(по историческим причинам)

Веб – отличная платформа для приложений

Решения

Кэширование

Установка

  • HTTP Cache

  • AppCache

  • Save page as... (complete)

  • Chrome Apps

  • Electron

  • NativeScript, React Native

Еще одно определение PWA

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

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

https://developer.mozilla.org/ru/docs/Web/Progressive_web_apps

работают везде*

* но не все возможности доступны везде**

нативно

** применяем стратегию прогрессивного улучшения

Офлайн-готовность 

<

>

=

=

+

Application shell

Web App Manifest

Быстрые, адаптивные, mobile-first

Работают по HTTPS

https://developers.google.com/web/updates/2019/06/pwa-install-addressbar

Установка приложения "как нативного"

Офлайн-готовность приложения

  • Само приложение

  • Потребляемые данные

  • Действия офлайн

  • Ошибки соединения

  • Обновления

  • Возможности платформы

  • Всегда доступно

  • Осмысленно сохраняются

  • Тщательно записываются

  • Не прерывают задачу

  • Явные и неявные

  • Использутся на всю катушку!

Сохраняя при этом природу веба!

Оболочка приложения

Давайте спроектируем App Shell

My App

  • Определить ресурсы

  • Закэшировать

  • Выдать из кэша

  • Управлять версиями

}

Сервис-воркер

Логически

Физически

-файл(ы)

Вебсайт

Сервис-воркер

Браузер/ОС

Event-driven worker

Кэш

fetch
push
sync

Предварительное кэширование

self.addEventListener('install', event => {
  
    // Помещаем ресурсы app shell в Cache Storage

})
self.addEventListener('activate', event => {
  
    // Удаляем из Cache Storage устаревшие версии

})

handmade-service-worker.js

Перехватываем запросы

self.addEventListener('fetch', event => {
  
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request)
    })   
  )

})

handmade-service-worker.js

Внезапно...

https://twitter.com/sanketsahu/status/1133223194888773632

В реальности...

Редиректы?

Fallback?

Opaque response?

Версионность?

Инвалидация кэша?

Обновление спецификаций?

Размер локального хранилища?

Переменные имена ресурсов?

Feature detection?

Минимально необходимое обновление кэша?

Стратегии кэширования?

Роутинг?

Точные настройки стратегий?

Модульность?

Я вижу старую версию!!!

https://developers.google.com/web/tools/workbox/

  • Определить ресурсы

  • Закэшировать

  • Выдать из кэша

  • Управлять версиями

}

Есть ли помощник?

# Будем использовать как модуль Node
$ npm install workbox-build --save-dev

И множество других модулей

Конфигурация

var workboxConfig = {
  globDirectory: 'dist/',
  globPatterns: [
    '**/*.{txt,png,ico,html,js,json,css}'
  ],
  swSrc: 'src/workbox-service-worker.js',
  swDest: 'dist/sw.js'
}

workbox-build.js

Исходник сервис-воркера

// Загрузим с Google CDN (но лучше иметь локально)
importScripts('https://googleapis.com/.../workbox-sw.js')

// Все остальное
workbox.precaching.precacheAndRoute([])

src/workbox-service-worker.js

Кэширование, выдача, управление версиями

Билд-скрипт

const {injectManifest} = require('workbox-build')

var workboxConfig = {...}

// Наполняем сервис-воркер информацией о ресурсах
injectManifest(workboxConfig).then(({count, size}) => {
    console.log(`Generated ${workboxConfig.swDest},
    which will precache ${count} files, ${size} bytes.`)
})

workbox-build.js

Интеграция с билдом приложения

{
  "scripts": {
    "build-pwa": "npm run build-app &&
                  node workbox-build.js"
  }
}

package.json

Данные приложения

Перехват запросов

self.addEventListener('fetch', event => {

  if (event.request.url.indexOf('/api/breakingnews') != -1) {
    event.respondWith(
      // Стратегия Network-First
    )
  } else if (event.request.url.indexOf('/api/archive') != -1 {
    event.respondWith(
      // Стратегия Cache-First
    )
  }
})

handmade-service-worker.js

Пути и стратегии

workbox.routing.registerRoute(
  new RegExp('/api/breakingnews'),
  new workbox.strategies.NetworkFirst()
)

src/workbox-service-worker.js

workbox.routing.registerRoute(
  new RegExp('/api/archive'),
  new workbox.strategies.CacheFirst({
    plugins: [...]
  })
)

Стратегии

  • CacheFirst

  • CacheOnly

  • NetworkFirst

  • NetworkOnly

  • StaleWhileRevalidate

Плагины

  • Expiration

  • CacheableResponse

  • BroadcastUpdate

  • BackgroundSync

  • ...ваш собственный?

Сохранение офлайн-действий

Background sync

  • Одноразовое событие офлайн->онлайн

  • Работает при закрытом приложении

https://developers.google.com/web/updates/2015/12/background-sync

const swReg = await navigator.serviceWorker.ready
if ('sync' in swReg) {
  // Сохраняем данные в IndexedDB и...
  swReg.sync.register('postTweet')
}

main.js

self.addEventListener('sync', event => {
  if (event.tag == 'postTweet') {
    event.waitUntil(
        // Извлекаем из IndexedDB и отправляем на сервер
    )
  }
})

handmade-service-worker.js

const postTweetPlugin =
    new workbox.backgroundSync.Plugin('tweetsQueue', {
        maxRetentionTime: 24*60 // Продолжительность попыток
    })

src/workbox-service-worker.js

workbox.routing.registerRoute(
  /(http[s]?:\/\/)?([^\/\s]+\/)post-tweet/,
  new workbox.strategies.NetworkOnly({
    plugins: [postTweetPlugin]
  }),
  'POST'
)

https://developers.google.com/web/tools/workbox/modules/workbox-background-sync

Загрузки под контролем

Background fetch

  • Авто-остановка/продолжение загрузок (down/up)

  • Отслеживание состояния и прогресса в коде

  • Работает при закрытом приложении

  • Пользователь управляет и следит за процессом

https://developers.google.com/web/updates/2018/12/background-fetch

const swReg = await navigator.serviceWorker.ready

await swReg.backgroundFetch.fetch(
  'my-series',
  ['s01e01.mpg', 's01e02.mpg'],
  {
    title: 'Первый сезон',
    downloadTotal: 600 * 1024 * 1024
   }
)

main.js

self.addEventListener('backgroundfetchsuccess', event => {
  event.waitUntil(
    (async function() {
      try {
        // Помещаем ресурс в Cache Storage
        ...
        await event.updateUI({ title: `Загружено!` })
      } catch (err) {
        await event.updateUI({ title: `Ошибка: ${err}` })
      }
    })()
  )
})

src/service-worker.js

Подробнее и с примерами

https://medium.com/@webmaxru/background-fetch-api-get-ready-to-use-it-69cca522cd8f

Планирование обновлений

https://developers.google.com/web/updates/2019/08/periodic-background-sync

Periodic background sync

  • Cron в браузере

  • Не зависит от сети

  • Периодичность задается разработчиком

  • Другой API для этого

  • Работает только онлайн

  • Браузер решает

const swReg = await navigator.serviceWorker.ready

if ('periodicSync' in swReg) {

  swReg.periodicSync.register('refreshTweets', {
    // Минимальный период - 24 часа
    minInterval: 24 * 60 * 60 * 1000,
  })

}

main.js

self.addEventListener('periodicsync', event => {
  if (event.tag === 'refreshTweets') { 
    event.waitUntil(
    	// [Может быть] Выполняем полезные действия
    )
  }
})

src/service-worker.js

  • Тип сетевого соединения?

  • Режим экономии трафика?

  • Доступное место на устройстве?

chrome://flags/#enable-devtools-experim

Отладка фоновых сервисов

А что насчет "другого API"

https://stackoverflow.com/questions/56432441/is-there-a-way-to-schedule-offline-notifications-in-a-pwa/56435090#56435090

  • Notification Triggers

  • Scheduled Task

Еще инструментов?

https://developers.google.com/web/updates/2019/08/native-file-system

Native File System API

https://developers.google.com/web/updates/2018/12/badging-api

Badging API

https://developers.google.com/web/updates/2019/08/contact-picker

Contact Picker API

Готовы к взлету

https://goo.gle/fugu-api-tracker

Почти 100 новых API

  • Полноценная платформа для приложений

  • Механизмы офлайн-готовности

  • Отличный инструментарий

  • Главное — пользовательский опыт

Всё только начинается!

Веб сегодня

bit.ly/go-pwa

  • 2000+ участников

  • Представители браузеров, фреймворков, библиотек

t.me/pwa_ru

  • Все о PWA на русском языке

Спасибо!

@webmaxru

Максим Сальников

Есть вопрос?

@webmaxru

Максим Сальников

Made with Slides.com