Aplikacje progresywne powoli zmieniają status quo w świecie mobile. Podczas prezentacji Bartosza dowiemy się czym są takie aplikacje i jak wdrożyć to nowe podejście w twoje strony oparte na WordPressie. *** Bartosz Bilicki podczas WordCamp Lublin 2017: http://2017.lublin.wordcamp.org/session/progresywny-wordpress/

1. Progresywny WordPress
Bartek Bilicki

2. Aplikacja natywna (Java / Swift / Objective C / C# ... )
WebView (Chromium)
Aplikacja webowa (HTML / CSS / JS ...)
Systemowe API
APLIKACJE HYBRYDOWE

4. http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html
WEJŚŚCIE DO SKLEPU
WYSZUKIWANIE APLIKACJI
ZAINSTALUJ
AKCEPTACJA UPRAWNIEŃŃ
TRWA POBIERANIE...
SUKCES!
800
640
512
410
328
262
1000

5. 60%40%
6 / 10 aplikacji w Google Play
nikt nigdy nie pobierze.
https://medium.com/javascript-scene/why-native-apps-really-are-doomed-native-apps-are-doomed-pt-2-e035b43170e9

6. ŚREDNIA LICZBA POBRAŃ
APLIKACJI / MIESIĄC / UŻYTKOWNIK
https://medium.com/javascript-scene/why-native-apps-really-are-doomed-native-apps-are-doomed-pt-2-e035b43170e9

7. PROGRESSIVE
WEB APPS

8. - pobieranie bez udziału sklepu
- możliwość linkowania do aplikacji
- treść indeksowana przez Google
- lżejsza niż aplikacje hybrydowe
APLIKACJE PROGRESYWNE
- dostępne pod wiele systemów

9. WebView
Aplikacja webowa (HTML / CSS / JS ...)
Web API
whatwebcando.today
APLIKACJE PROGRESYWNE

10. SZYBKIE
NIEZAWODNE
ANGAŻUJĄCE

11. 1. ZAANGAŻOWANIE

12. IKONKA APLIKACJI

13. NOTYFIKACJE PUSH

14. "display":
"browser"
"display":
"standalone"
TRYBY WYŚWIETLANIA

15. {
"short_name": "Pokedex.org",
"name": "Pokedex.org",
"display": "standalone",
"icons": [
{
"src": "img/icon-48.png",
"sizes": "48x48",
"type": "image/png"
},
// more icons...
{
"src": "img/icon-196.png",
"sizes": "196x196",
"type": "image/png"
}
],
"start_url": "index.html?launcher=true",
"theme_color": "#a040a0",
"background_color": "#EEEEEE"
}
https://www.pokedex.org/manifest.json
WEB APP MANIFEST

16. 2. NIEZAWODNOŚĆ

17. http://caniuse.com/#feat=serviceworkers
klient serwer
SERVICE WORKER

18. https://

19. 3. SZYBKOŚĆ

20. Push
Render
Pre-cache
Lazy-load
WZORZEC PRPL

21. SKELETONS SCREENS

22. https://developers.google.com/web/progressive-web-apps/checklist
https://developers.google.com/web/tools/lighthouse/
CHECKLISTA

23. PWA.ROCKS

24. 76% wzrost konwersji wśród
użytkowników web
aktywni użytkownicy / mc:
30% wzrost - Android
14% wzrost - iOS
4x wyższa konwersja z "Add to
homescreen"
https://medium.com/javascript-scene/why-native-apps-really-are-doomed-native-apps-are-doomed-pt-2-e035b43170e9
ALIBABA

25. PWA + WordPress

26. 1. Web Manifest
{
"short_name": "",
"name": "",
"icons": [
{
"src": "",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "/",
"background_color": "",
"theme_color": "",
"display": "standalone"
}

27. 2. WordPress REST API
Posts /wp/v2/posts
Post Revisions /wp/v2/revisions
Categories /wp/v2/categories
Tags /wp/v2/tags
Pages /wp/v2/pages
Comments /wp/v2/comments
Taxonomies /wp/v2/taxonomies
Media /wp/v2/media
Users /wp/v2/users
Post Types /wp/v2/types
Post Statuses /wp/v2/statuses
Settings /wp/v2/settings

28. 3. Service Workers
const CACHE_NAME = 'wordpress-cache-v1';
// List of files which are store in cache.
let filesToCache = [
'/',
'/wp-content/themes/naszmotyw/main.css',
'/wp-content/themes/naszmotyw/main.js'
];
self.addEventListener('install', function (evt) {
evt.waitUntil(
caches.open(CACHE_NAME).then(function (cache) {
return cache.addAll(filesToCache);
}).catch(function (err) {
// Snooze errors...
// console.error(err);
})
);
});
self.addEventListener('fetch', function (evt) {
// Snooze logs...
// console.log(event.request.url);
evt.respondWith(
// Firstly, send request..
fetch(evt.request).catch(function () {
// When request failed, return file from cache...
return caches.match(evt.request);
})
);
});

29. linkedin.com/in/bilicki
bartekbilicki@gmail.com
slides.com/bartoszbilicki