а 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