а PWA-решение — одно

Maxim Salnikov

@webmaxru

Фреймворков много,

Как сделать веб-приложение прогрессивным

Используя силу вашего любимого фреймворка

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

@webmaxru

  • Google Developer Expert, Microsoft MVP

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

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

Full-stack разработчик "приложений из будущего" в ForgeRock

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

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

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

Кросс-платформенные?

Browser

Desktop

Mobile

За флагом

OS

#YearOfPWA

Онлайн больше не обязателен

Установка без хлопот  

Получение уведомлений

Service Worker API

Web App Manifest

Новые преимущества?

Полноценное приложение

}

}

Что нам дают фреймворки?

=

+

Application shell

Web App Manifest

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

Использует HTTPS

Возьмем тройку самых популярных

Angular

SW библиотека

Включено

Настройка

Расширение

Angular

Service Worker

Web App Manifest

App Shell

Runtime Caching

Push Notifications

Update Flow

$ ng add @angular/pwa

Vue.js

SW библиотека

Включено

Настройка

Расширение

Workbox

Web App Manifest

App Shell

Runtime Caching

$ vue add @vue/pwa

React

SW библиотека

Включено

Настройка

Расширение

sw-precache

create-react-app my-react-pwa

Web App Manifest

App Shell

Runtime Caching

Workbox

Встроенные механизмы PWA

Плюсы

Минусы

  • Бесшовная интеграция

  • Быстрый старт

  • Ограниченные возможности настройки

  • Сложность или невозможность расширения функциональности

  • Не всегда подходит для уже существующих приложений

Давайте все настроим сами!

Требования

  • Автоматизация основных задач сервис-воркера

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

  • Независимость от фреймворка

  • Интеграция с фреймворком

  • CI/CD-готовность

Построим App shell

My App

  • Выбрать только нужные файлы

  • Создать массив с их именами и хеш-суммами

  • Первая загрузка: поместить файлы в Cache Storage

  • Следующие загрузки: выдавать их из Cache Storage

  • Используя хеш, обнаруживать обновленные файлы и помещать в Cache Storage *

  • При n+1 загрузке выдавать уже эти обновленные файлы

Доступна новая версия.

Обновить?

1

2

3

  • Application shell

  • Динамическое кеширование, используя стратегии

  • Гарантированные сетевые запросы

  • Аналитика Google для оффлайна

  • Коммуникация с приложением

Все ещё используя наш собственный сервис-воркер!

Режимы работы

  • Workbox CLI

  • Webpack plugin

  • Node module

# Installing the Workbox Node module
$ npm install workbox-build --save-dev

Билд-скрипт

// We will use injectManifest mode
const {injectManifest} = require('workbox-build')

// Sample configuration with the basic options
var workboxConfig = {...}

// Calling the method and output the result
injectManifest(workboxConfig).then(({count, size}) => {
    console.log(`Generated ${workboxConfig.swDest},
    which will precache ${count} files, ${size} bytes.`)
})

workbox-build-inject.js

Список файлов для app shell

[
  {
    "url": "index.html",
    "revision": "34c45cdf166d266929f6b532a8e3869e"
  },
  {
    "url": "favicon.ico",
    "revision": "b9aa7c338693424aae99599bec875b5f"
  },
  ...
]

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

// Sample configuration with the basic options
var workboxConfig = {
  globDirectory: 'dist/angular-pwa/',
  globPatterns: [
    '**/*.{txt,png,ico,html,js,json,css}'
  ],
  swSrc: 'src/service-worker.js',
  swDest: 'dist/angular-pwa/service-worker.js'
}

workbox-build-inject.js

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

// Importing Workbox itself from Google CDN
importScripts('https://googleapis.com/workbox-sw.js');

// Precaching and setting up the routing
workbox.precaching.precacheAndRoute([])

src/service-worker.js

1

2

Интеграция с общим build flow

{
  "scripts": {
    "build-prod": "ng build --prod &&
                   node workbox-build-inject.js"
  }
}

package.json

Файлы приложения

Список файлов для app shell

Файл сервис-воркера

Через хеш-суммы

Через вставку

Сервис-воркер способен на большее!

// App shell
workbox.precaching.precacheAndRoute([])

// Runtime caching
workbox.routing.registerRoute(
  /(http[s]?:\/\/)?([^\/\s]+\/)api/,
  workbox.strategies.networkFirst()
)

// Push notifications
self.addEventListener('push', (event) => {...})

src/service-worker.js

if ('serviceWorker' in navigator) {
    navigator.serviceWorker
        .register('/service-worker.js')
}

Регистрация сервис-воркера

Требования

  • Feature detection

  • Регистрация после полной загрузки и рендеринга UI приложения

  • Отслеживание событий, связанных с сервис-воркером

Доступна новая версия приложения. Перезагрузить страницу?

  • Был ли обновлен файл сервис-воркера?

  • Была ли обновлена версия приложения?

register-service-worker

import { register } from 'register-service-worker'

platformBrowserDynamic().bootstrapModule(AppModule)
  .then( () => {
      register('/service-worker.js')
  })

main.ts

$ npm install register-service-worker --save

Для Angular

Событие обновления сервис-воркера

register('/service-worker.js', {







})

3

    updated (registration) {
        if (confirm(`New content is available!
                     Click OK to refresh`)) {
            window.location.reload();
        }
    }

Советы

  • Будьте уверены в каждом ресурсе, который планируете поместить в Cache Storage

  • Осторожнее с кешированием ресурсов с других origins

  • Установите на веб-сервере заголовок, запрещающий кеширование для файла вашего сервис-воркера

Cache-Control: max-age=0

Kill switch

self.addEventListener('install', (e) => {
  self.skipWaiting();
});

self.addEventListener('activate', (e) => {
  self.registration.unregister()
    .then(() => {
      return self.clients.matchAll();
    })
    .then((clients) => {
      clients.forEach((client) => client.navigate(client.url));
    });
});
  • 1700+ разработчиков

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

Спасибо!

Maxim Salnikov

@webmaxru

Ваши вопросы?

Фреймворков много, а PWA-решение одно

By Maxim Salnikov

Фреймворков много, а PWA-решение одно

There is no doubt that 2018 is the year when Progressive Web Apps will get the really broad adoption and recognition by all the involved parties: browser vendors (finally, all the major ones), developers, users. How does PWA concept play with YOUR favorite framework? React, Angular, Vue, #FrameworkOfTheWeek? In my technical session we’ll check what major frameworks creators prepared for us regarding scaffolding / adding PWA features (spoiler: only basic features), and switch to Workbox. We’ll see that Workbox is a library providing many sophisticated service worker features in a simple, developer-friendly form. Also, we’ll talk about another advantage of Workbox - the flexibility: you build your own service worker and automate some tasks using this library. As the outcome, you’ll be ready to make a production-ready PWA from the app built on any framework.

  • 1,922