Progressive Web Appsin Production

Timofey Lavrenyuk

Intro

Проблема

MWC 2016 Samsung Galaxy S7

PWA

Процесс установки приложения

• Зайти в Play Market

• Найти в Play Market

• Нажать кнопку “Скачать”

• Подтвердить права

• Подождать, пока скачается

• Использовать

Progressive Web App

Progressive Web App

• Быстро устанавливается

• Работает Offline• Имеет “нативные”

возможности

Быстрая установка

manifest.json

Работа Offline

Service Worker

• Работает отдельным процессом

• Работает только с HTTPS

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

• Имеет доступ к кэшу

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

• Поваляет создавать фоновые задачи

1) Зарегистрировать

2) Создать файл service worker-a

AppCache

Service Worker Libraries

• sw-precache• sw-toolbox• sw-offline-google-analytics

sw-precache webpack

sw-toolbox

Нативные возможности

• Geolocation• Camera• Microphone• Network connection type and status• Push• IndexedDB• Web Payments• Background Sync• Sharing• …

Background Sync

Background Syncapp.js

sw.js

Хранение данных задачи

Periodic Background Sync

WEB Share API

WEB Share API

Работает начиная с 55 версии Chrome как Origin Trial

Chrome Origin Trial

Persistent Storage

Persistent Storage

Работает только если:

1) Сайт добавлен в закладки2) Сайт добавлен в Home Screen3) У сайта есть права на Push Уведомления

To be continue…

Кто использует PWA

ВыводPWA + = ?

Спасибо за внимание

Timofey Lavrenyuk