Download to read offline
![{
"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](https://image.slidesharecdn.com/bartoszbilicki-170907075025/85/Progresywny-WordPress-15-320.jpg)
![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"
}](https://image.slidesharecdn.com/bartoszbilicki-170907075025/85/Progresywny-WordPress-26-320.jpg)
![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);
})
);
});](https://image.slidesharecdn.com/bartoszbilicki-170907075025/85/Progresywny-WordPress-28-320.jpg)
Uploaded byWordCamp Polska
Progresywny WordPress
The document discusses the advantages of progressive web apps (PWAs) over native and hybrid applications, emphasizing their accessibility, faster performance, and high user engagement. It explains the technical aspects such as the web app manifest, service workers, and caching strategies, and provides examples of implementation using WordPress REST API. The potential for increased conversion rates and active user engagement in PWAs is highlighted, along with links to further resources and checklists.
More Related Content
Progresywny WordPress
- 1.
- 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 WYSZUKIWANIEAPLIKACJI ZAINSTALUJ AKCEPTACJA UPRAWNIEŃŃ TRWA POBIERANIE... SUKCES! 800 640 512 410 328 262 1000
- 5. 60%40% 6 / 10aplikacji 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.
- 8. - pobieranie bezudział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.
- 11.
- 12.
- 13.
- 14.
- 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.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24. 76% wzrost konwersjiwś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.
- 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 RESTAPI 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 constCACHE_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.