Pwa - native apps power in web

PWA - native apps
power in web
Борис Могила
IG “RIA” (dom.ria.com - напрям “Новобудови України”)

Джерело: comScore Mobile Metrix, U.S., Age 18+, June 2015
1000Порівняння найпопулярніших мобільних додатків та
1000 -найпопулярніших мобільних веб ресурсів

Швидкість
WEB PWA NATIVE

Offline підтримка
WEB PWA NATIVE

Доступ з головного
екрана
WEB PWA NATIVE

Push повідомлення
WEB PWA NATIVE

Потреба завантаження
WEB PWA NATIVE

Розміщення в
app store
WEB PWA NATIVE

Шарінг і доступ по
посиланню
WEB PWA NATIVE

Не потрібно оновлювати
WEB PWA NATIVE

Twitter
● 65% приріст перегляду сторінок за сесію
● На 75% збільшилася кількість твітів
● На 20% зменшився показник відмов

AliExpress
● 104% нових користувачів
● 82% збільшення коефіцієнта конверсії на
iOS
● В 2 рази збільшилась кількість
переглянутих сторінок
● Тривалість перебування на сайті
збільшилась на 74%

Alibaba
● На 76% збільшилась кількість конверсій
● На 14% більше користувачів для IOS і на
30% для Andoid
● В 4 рази більше користувачів додають
додаток на головний екран

Основні принципи PWA
● Передача даних по протоколу HTTPS
● Адаптивний дизайн
● Як мінімум стартова сторінка
завантажується offline
● Описані дані для додавання на головний
екран

Основні принципи PWA
● Швидке завантаження навіть на
повільному інтернеті
● Кросбраузерність
● Перехід між сторінками без відчуття
завантаження
● Кожна сторінка повинна мати окремий url

Принципи PRPL
● Завантажити критичні ресурси для для
початкової сторінки
● Від малювати початкову сторінку
● Закешувати інші сторінки
● Ліниве завантаження інших сторінок за
потребою

if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/service-worker.js')
.then(registration => {
console.log('registred ->', registration.scope)
})
.catch(error => {
console.log('error->', error)
});
}

Встановлення
Життєвий цикл
Активація Помилка
Режим
очікування
Зупинка Push повідомлення /
Запит / Повідомлення

var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = [
'/',
'/styles/main.css',
'/script/main.js'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(urlsToCache))
);
});
Встановлення

self.addEventListener('activate', event => {
var cacheWhitelist = ['pages-cache-v1', 'blog-posts-cache-v1'];
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (cacheWhitelist.includes(cacheName)) return;
return caches.delete(cacheName);
})
);
})
);
});
Активація

self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => {
//ваша стратегія обробки запитів
})
)
});
Запит

Стратегії
1. Offline-first
2. Offline-second
3. Тільки кеш
4. Тільки з сервера
https://goo.gl/4RKJKd

Push notifications
1. Своєчасно
2. Чіткі
3. Доречні
https://goo.gl/RAHXHU

{
body: 'Here is a notification body!',
icon: 'images/example.png',
vibrate: [100, 50, 100],
data: {
dateOfArrival: Date.now(),
primaryKey: 1
},
actions: [
{action: 'explore', title: 'Explore this new world',
icon: 'images/checkmark.png'},
{action: 'close', title: 'Close notification',
icon: 'images/xmark.png'},
]
}

manifest.json
{
"name": "DOM.RIA",
"short_name": "DOM.RIA",
"icons": [
{
"src": "https://dom.riastatic.com/css/images/128x128.png",
"sizes": "128x128",
"type": "image/png"
},
…,
],
"start_url": start_url + '?utm_souce=homescreen',
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#f09213"
} https://goo.gl/qKjzEi

amp + service worker
<script async custom-element="amp-install-serviceworker" src="
https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js">
</script>
<amp-install-serviceworker src="/sw.js"
data-iframe-src="/"
layout="nodisplay">
</amp-install-serviceworker>

● sw-precache
● sw-toolbox
● React CLI
● Vue CLI
● Preact CLI
● Polimer CLI

1. https
2. Service worker лише з оригінального
домену
3. Статика з іншого домена
4. IOS і EDGE
5. scope на amp
Підводні камені

https://goo.gl/xpFQ4s Сторінка

Credential Management API
mobile
Demo time

https://developers.google.com/web/progressive-web-apps/
https://developers.google.com/web/ilt/pwa/
https://www.youtube.com/user/ChromeDevelopers
https://whatwebcando.today/
https://serviceworke.rs/
Корисні посилання

site : https://boryamogila.github.io/
facebook: Boris Mogila
twitter: Borya Mogila
email: bora.mog@gmail.com,
Контактні дані

Дякую за увагу
Посилання на презентацію: https://goo.gl/Uu62AT

Pwa - native apps power in web

Recommended

Recommended

More Related Content

Featured

Featured (20)

Pwa - native apps power in web

Editor's Notes