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

@webmaxru

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

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

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

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

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

Организатор Mobile / Web / PWA митапов в Осло и Лондоне
Организатор конференций Mobile Era и ngVikings в Скандинавии
Ответственный за поток о веб-разработке 404fest в Самаре

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

@webmaxru

The World Wide Web is the New Software Platform
The Web Browser is the New Operating System
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

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

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

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

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

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

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

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

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

@webmaxru

The World Wide Web is the New Software Platform

The Web Browser is the New Operating System

JavaScript is the de facto Programming Language of the Web

Январь, 2008

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

69.7%

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

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

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

Решения

Кэширование

Установка

HTTP Cache

AppCache

Save page as... (complete)

Chrome Apps

Electron

NativeScript, React Native

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

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

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

нативно

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

<

>

=

=

+

Application shell

Web App Manifest

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

Работают по HTTPS

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

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

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

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

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

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

Обновления

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

Логически

Физически