SlideShare a Scribd company logo
by Yura Myrosh
Connfa! Progressive Web App
development experience
About Yura Myrosh
4+ years experience in web development
Back-end (CodeIgniter, FuelPHP, Kohana, Laravel, NodeJs)
Front-end (AngularJs, Typescript)
About Connfa!
CMS + API
Android appiOS app Progressive Web App
Connfa! - Open Source mobility solution for Conferences and Events
Connfa! PWA
● Requests from users
● To learn new skills
● To promote Web App
development Services at
Lemberg
Why we’ve decided to develop web app?
Developed with
Angular 2 localForagemomentjs
GULPwebpack
Connfa! PWA features
✓ Progressive
✓ Responsive
✓ App-like
✓ Fresh
✓ Discoverable
✓ Installable
✓ Linkable
✓ Safe
✓ Connectivity independent
(Offline mode, service
workers)
✕ Re-engageable (Push
notifications)
What makes your web app
“progressive”
iOS:
<link rel="apple-touch-icon"
href="../public/images/icon.png"/>
<meta name="viewport" content="width=device-width">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style"
content="black">
<meta id="theme-color" name="theme-color"
content="#06335b">
<meta name="apple-mobile-web-app-title"
content="DrupalCon">
<meta name="msapplication-TileColor" content="#06335b">
Android
<link rel="manifest" href="../public/manifest.json">
{
"short_name": "DrupalCon",
"name": "Connfa Web App",
"icons": [
{
"src": "images/icon96@96.png",
"sizes": "96x96",
"type": "image/png"
},
],
"start_url": "/",
"display": "standalone",
"orientation": "portrait"
}
What makes your web app
“progressive”
https://youtu.be/cmGr0RszHc8?t=4m23s
Browsers support
11 14 49 54 10 41 10 all 53 53
50 55
51 56
52 57
53
52
51
49
9.1
TP 42
43
9.3 4.4.4
4.4
IE Edge Firefox Chrome Safari Opera iOS Safari Opera Mini
Android
Browser
Chrome
for Android
Desktop version
PWA vs Native app
PWA:
● Working with OS API is
impossible.
● Changes are deployed for all
users and all platforms
immediately without app
re-submissions.
● You don't need to care about
versioning of apps.
Native app:
● Working with OS API is better.
● Working with media and data
outside app is easier in native
apps.
● App re-submissions.
● App versioning and migrations.
Connfa! native app VS web app
(DrupalCon Dublin as an example)
Android Web App
Connfa! native app VS web app
(DrupalCon Dublin as an example)
Android Web App
Android Web App
Connfa! native app VS web app
(DrupalCon Dublin as an example)
Summary
● Ready to use on Android
● In five years plan for iOS safari
● Mobile users oriented
● Simple to start project (angular-cli)
Links
http://connfa.com/
http://drupalcondublin.connfa.com/
https://github.com/lemberg/connfa-webapp
https://developers.google.com/web/progressive-web-apps/
https://www.youtube.com/watch?v=cmGr0RszHc8
https://angular.io/
https://cli.angular.io/
Thank you for your attention!
Any questions?

More Related Content

What's hot

PWA - Progressive Web Apps
PWA - Progressive Web AppsPWA - Progressive Web Apps
PWA - Progressive Web Apps
Edy Segura
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
Optis
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
Saleh Rahimzadeh
 
Progressive web app
Progressive web appProgressive web app
Progressive web app
Deepak Upadhyay
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
Jana Moudrá
 
PWA demystified
PWA demystifiedPWA demystified
PWA demystified
Pradeep Patel, PMP®
 
Progressive web apps
 Progressive web apps Progressive web apps
Progressive web apps
Neha Sharma
 
Next Generation Mobile Web - PWA (Progressive Web App)
Next Generation Mobile Web  - PWA (Progressive Web App)Next Generation Mobile Web  - PWA (Progressive Web App)
Next Generation Mobile Web - PWA (Progressive Web App)
Nuri Cahyono
 
Progressive Web Apps are here!
Progressive Web Apps are here!Progressive Web Apps are here!
Progressive Web Apps are here!
Antonio Peric-Mazar
 
An introduction to Progressive Web Apps
An introduction to Progressive Web AppsAn introduction to Progressive Web Apps
An introduction to Progressive Web Apps
Kevin Farrugia
 
PWAs overview
PWAs overview PWAs overview
PWAs overview
TejinderMakkar
 
Why your website should be a progressive web application (PWA)
Why your website should be a progressive web application (PWA)  Why your website should be a progressive web application (PWA)
Why your website should be a progressive web application (PWA)
DBS Interactive
 
Progressive Web Apps - Up & Running
Progressive Web Apps - Up & RunningProgressive Web Apps - Up & Running
Progressive Web Apps - Up & Running
Suraj Kumar
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
Software Infrastructure
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
Suraj Kumar
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
Akshay Sharma
 
PWA - Progressive Web App
PWA - Progressive Web AppPWA - Progressive Web App
PWA - Progressive Web App
Robert Robinson
 
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
Robert Nyman
 
Jws masterclass progressive web apps
Jws masterclass progressive web appsJws masterclass progressive web apps
Jws masterclass progressive web apps
Alexandre Marreiros
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
Ezekiel Chentnik
 

What's hot (20)

PWA - Progressive Web Apps
PWA - Progressive Web AppsPWA - Progressive Web Apps
PWA - Progressive Web Apps
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
 
Progressive web app
Progressive web appProgressive web app
Progressive web app
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
PWA demystified
PWA demystifiedPWA demystified
PWA demystified
 
Progressive web apps
 Progressive web apps Progressive web apps
Progressive web apps
 
Next Generation Mobile Web - PWA (Progressive Web App)
Next Generation Mobile Web  - PWA (Progressive Web App)Next Generation Mobile Web  - PWA (Progressive Web App)
Next Generation Mobile Web - PWA (Progressive Web App)
 
Progressive Web Apps are here!
Progressive Web Apps are here!Progressive Web Apps are here!
Progressive Web Apps are here!
 
An introduction to Progressive Web Apps
An introduction to Progressive Web AppsAn introduction to Progressive Web Apps
An introduction to Progressive Web Apps
 
PWAs overview
PWAs overview PWAs overview
PWAs overview
 
Why your website should be a progressive web application (PWA)
Why your website should be a progressive web application (PWA)  Why your website should be a progressive web application (PWA)
Why your website should be a progressive web application (PWA)
 
Progressive Web Apps - Up & Running
Progressive Web Apps - Up & RunningProgressive Web Apps - Up & Running
Progressive Web Apps - Up & Running
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
 
PWA - Progressive Web App
PWA - Progressive Web AppPWA - Progressive Web App
PWA - Progressive Web App
 
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
 
Jws masterclass progressive web apps
Jws masterclass progressive web appsJws masterclass progressive web apps
Jws masterclass progressive web apps
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
 

Similar to Connfa! Progressive web app

#Devcamp17: Développement d’une Progressive Web Application (PWA) avec le sta...
#Devcamp17: Développement d’une Progressive Web Application (PWA) avec le sta...#Devcamp17: Développement d’une Progressive Web Application (PWA) avec le sta...
#Devcamp17: Développement d’une Progressive Web Application (PWA) avec le sta...
Ezéchiel Amen AGBLA
 
Progressive web apps for e commerce
Progressive web apps for e commerceProgressive web apps for e commerce
Progressive web apps for e commerce
ShantanuApurva1
 
Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016
Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016
Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016
Maxime Czetwertynski
 
Progressive Web Apps –The Future of Apps
Progressive Web Apps –The Future of Apps   Progressive Web Apps –The Future of Apps
Progressive Web Apps –The Future of Apps
Ashish Saxena
 
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile PresenceGo for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Magic Software
 
Talk for DevFest 2021 - GDG Bénin
Talk for DevFest 2021 - GDG BéninTalk for DevFest 2021 - GDG Bénin
Talk for DevFest 2021 - GDG Bénin
Ezéchiel Amen AGBLA
 
portfolio
portfolioportfolio
portfolio
Oleh Leha
 
Progressive web apps For e-Commerce- How do they go hand-in-hand?
Progressive web apps For e-Commerce- How do they go hand-in-hand?Progressive web apps For e-Commerce- How do they go hand-in-hand?
Progressive web apps For e-Commerce- How do they go hand-in-hand?
ShantanuApurva1
 
Developing cross platforms mobile applications using the Apache Cordova
Developing cross platforms mobile applications using the Apache CordovaDeveloping cross platforms mobile applications using the Apache Cordova
Developing cross platforms mobile applications using the Apache Cordova
Mahmoud Tolba
 
Why Progressive Web Apps For WordPress - WordCamp Finland
Why Progressive Web Apps For WordPress - WordCamp FinlandWhy Progressive Web Apps For WordPress - WordCamp Finland
Why Progressive Web Apps For WordPress - WordCamp Finland
Imran Sayed
 
Building Progressive Web Apps.docx
Building Progressive Web Apps.docxBuilding Progressive Web Apps.docx
Building Progressive Web Apps.docx
Savior_Marketing
 
Why progressive apps for WordPress - WordSesh 2020
Why progressive apps for WordPress - WordSesh 2020Why progressive apps for WordPress - WordSesh 2020
Why progressive apps for WordPress - WordSesh 2020
Imran Sayed
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
Alexandre Tarifa
 
Around mobile and web development At Latent.pptx
Around mobile and web development At Latent.pptxAround mobile and web development At Latent.pptx
Around mobile and web development At Latent.pptx
LatentHQ1
 
Planning Your Progressive Web App
Planning Your Progressive Web AppPlanning Your Progressive Web App
Planning Your Progressive Web App
Jason Grigsby
 
SmithaKB5yrsExp
SmithaKB5yrsExpSmithaKB5yrsExp
SmithaKB5yrsExp
Smitha Kb
 
Introduction of Monaca
Introduction of MonacaIntroduction of Monaca
Introduction of Monaca
Hideshi Ogoshi
 
Introduction to Cross-Platform Hybrid Mobile App Development
Introduction to Cross-Platform Hybrid Mobile App DevelopmentIntroduction to Cross-Platform Hybrid Mobile App Development
Introduction to Cross-Platform Hybrid Mobile App Development
Özcan Zafer AYAN
 
IRJET-Garbage Monitoring and Management using Internet of things
IRJET-Garbage Monitoring and Management using Internet of thingsIRJET-Garbage Monitoring and Management using Internet of things
IRJET-Garbage Monitoring and Management using Internet of things
IRJET Journal
 
Progressive Web Apps (PWAs) - Transforming the Future of Full-Stack Developme...
Progressive Web Apps (PWAs) - Transforming the Future of Full-Stack Developme...Progressive Web Apps (PWAs) - Transforming the Future of Full-Stack Developme...
Progressive Web Apps (PWAs) - Transforming the Future of Full-Stack Developme...
mohitreal1995
 

Similar to Connfa! Progressive web app (20)

#Devcamp17: Développement d’une Progressive Web Application (PWA) avec le sta...
#Devcamp17: Développement d’une Progressive Web Application (PWA) avec le sta...#Devcamp17: Développement d’une Progressive Web Application (PWA) avec le sta...
#Devcamp17: Développement d’une Progressive Web Application (PWA) avec le sta...
 
Progressive web apps for e commerce
Progressive web apps for e commerceProgressive web apps for e commerce
Progressive web apps for e commerce
 
Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016
Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016
Progressive Web App - Jeff Burtoft at microsoft zaventem 03-10-2016
 
Progressive Web Apps –The Future of Apps
Progressive Web Apps –The Future of Apps   Progressive Web Apps –The Future of Apps
Progressive Web Apps –The Future of Apps
 
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile PresenceGo for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
 
Talk for DevFest 2021 - GDG Bénin
Talk for DevFest 2021 - GDG BéninTalk for DevFest 2021 - GDG Bénin
Talk for DevFest 2021 - GDG Bénin
 
portfolio
portfolioportfolio
portfolio
 
Progressive web apps For e-Commerce- How do they go hand-in-hand?
Progressive web apps For e-Commerce- How do they go hand-in-hand?Progressive web apps For e-Commerce- How do they go hand-in-hand?
Progressive web apps For e-Commerce- How do they go hand-in-hand?
 
Developing cross platforms mobile applications using the Apache Cordova
Developing cross platforms mobile applications using the Apache CordovaDeveloping cross platforms mobile applications using the Apache Cordova
Developing cross platforms mobile applications using the Apache Cordova
 
Why Progressive Web Apps For WordPress - WordCamp Finland
Why Progressive Web Apps For WordPress - WordCamp FinlandWhy Progressive Web Apps For WordPress - WordCamp Finland
Why Progressive Web Apps For WordPress - WordCamp Finland
 
Building Progressive Web Apps.docx
Building Progressive Web Apps.docxBuilding Progressive Web Apps.docx
Building Progressive Web Apps.docx
 
Why progressive apps for WordPress - WordSesh 2020
Why progressive apps for WordPress - WordSesh 2020Why progressive apps for WordPress - WordSesh 2020
Why progressive apps for WordPress - WordSesh 2020
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Around mobile and web development At Latent.pptx
Around mobile and web development At Latent.pptxAround mobile and web development At Latent.pptx
Around mobile and web development At Latent.pptx
 
Planning Your Progressive Web App
Planning Your Progressive Web AppPlanning Your Progressive Web App
Planning Your Progressive Web App
 
SmithaKB5yrsExp
SmithaKB5yrsExpSmithaKB5yrsExp
SmithaKB5yrsExp
 
Introduction of Monaca
Introduction of MonacaIntroduction of Monaca
Introduction of Monaca
 
Introduction to Cross-Platform Hybrid Mobile App Development
Introduction to Cross-Platform Hybrid Mobile App DevelopmentIntroduction to Cross-Platform Hybrid Mobile App Development
Introduction to Cross-Platform Hybrid Mobile App Development
 
IRJET-Garbage Monitoring and Management using Internet of things
IRJET-Garbage Monitoring and Management using Internet of thingsIRJET-Garbage Monitoring and Management using Internet of things
IRJET-Garbage Monitoring and Management using Internet of things
 
Progressive Web Apps (PWAs) - Transforming the Future of Full-Stack Developme...
Progressive Web Apps (PWAs) - Transforming the Future of Full-Stack Developme...Progressive Web Apps (PWAs) - Transforming the Future of Full-Stack Developme...
Progressive Web Apps (PWAs) - Transforming the Future of Full-Stack Developme...
 

More from Lemberg Solutions

`People Management` by Roman Paska
`People Management` by Roman Paska`People Management` by Roman Paska
`People Management` by Roman Paska
Lemberg Solutions
 
Common iPhone Mistakes. An Efficient Guide for QA's and iOS Developers.
Common iPhone Mistakes. An Efficient Guide for QA's and iOS Developers.Common iPhone Mistakes. An Efficient Guide for QA's and iOS Developers.
Common iPhone Mistakes. An Efficient Guide for QA's and iOS Developers.
Lemberg Solutions
 
Open Social
Open Social Open Social
Open Social
Lemberg Solutions
 
Drupal services - Lemberg Solutions
Drupal services - Lemberg SolutionsDrupal services - Lemberg Solutions
Drupal services - Lemberg Solutions
Lemberg Solutions
 
Connected car
Connected carConnected car
Connected car
Lemberg Solutions
 
'What is iBeacon?' by Roman Malinovskyi
'What is iBeacon?' by Roman Malinovskyi'What is iBeacon?' by Roman Malinovskyi
'What is iBeacon?' by Roman Malinovskyi
Lemberg Solutions
 
`From Prototype to Drupal` by Andrew Ivasiv
`From Prototype to Drupal` by Andrew Ivasiv`From Prototype to Drupal` by Andrew Ivasiv
`From Prototype to Drupal` by Andrew Ivasiv
Lemberg Solutions
 
Drush deploy presentation by Goruachev Mikhail
Drush deploy presentation by Goruachev MikhailDrush deploy presentation by Goruachev Mikhail
Drush deploy presentation by Goruachev Mikhail
Lemberg Solutions
 
Tips On Getting Everything You Can Out of Drupal Form API'
Tips On Getting Everything You Can Out of Drupal Form API' Tips On Getting Everything You Can Out of Drupal Form API'
Tips On Getting Everything You Can Out of Drupal Form API'
Lemberg Solutions
 
Restful webservices
Restful webservicesRestful webservices
Restful webservices
Lemberg Solutions
 
Web Portfolio
Web PortfolioWeb Portfolio
Web Portfolio
Lemberg Solutions
 
Introducing Lemberg
Introducing LembergIntroducing Lemberg
Introducing Lemberg
Lemberg Solutions
 

More from Lemberg Solutions (12)

`People Management` by Roman Paska
`People Management` by Roman Paska`People Management` by Roman Paska
`People Management` by Roman Paska
 
Common iPhone Mistakes. An Efficient Guide for QA's and iOS Developers.
Common iPhone Mistakes. An Efficient Guide for QA's and iOS Developers.Common iPhone Mistakes. An Efficient Guide for QA's and iOS Developers.
Common iPhone Mistakes. An Efficient Guide for QA's and iOS Developers.
 
Open Social
Open Social Open Social
Open Social
 
Drupal services - Lemberg Solutions
Drupal services - Lemberg SolutionsDrupal services - Lemberg Solutions
Drupal services - Lemberg Solutions
 
Connected car
Connected carConnected car
Connected car
 
'What is iBeacon?' by Roman Malinovskyi
'What is iBeacon?' by Roman Malinovskyi'What is iBeacon?' by Roman Malinovskyi
'What is iBeacon?' by Roman Malinovskyi
 
`From Prototype to Drupal` by Andrew Ivasiv
`From Prototype to Drupal` by Andrew Ivasiv`From Prototype to Drupal` by Andrew Ivasiv
`From Prototype to Drupal` by Andrew Ivasiv
 
Drush deploy presentation by Goruachev Mikhail
Drush deploy presentation by Goruachev MikhailDrush deploy presentation by Goruachev Mikhail
Drush deploy presentation by Goruachev Mikhail
 
Tips On Getting Everything You Can Out of Drupal Form API'
Tips On Getting Everything You Can Out of Drupal Form API' Tips On Getting Everything You Can Out of Drupal Form API'
Tips On Getting Everything You Can Out of Drupal Form API'
 
Restful webservices
Restful webservicesRestful webservices
Restful webservices
 
Web Portfolio
Web PortfolioWeb Portfolio
Web Portfolio
 
Introducing Lemberg
Introducing LembergIntroducing Lemberg
Introducing Lemberg
 

Connfa! Progressive web app

  • 1. by Yura Myrosh Connfa! Progressive Web App development experience
  • 2. About Yura Myrosh 4+ years experience in web development Back-end (CodeIgniter, FuelPHP, Kohana, Laravel, NodeJs) Front-end (AngularJs, Typescript)
  • 3. About Connfa! CMS + API Android appiOS app Progressive Web App Connfa! - Open Source mobility solution for Conferences and Events
  • 4. Connfa! PWA ● Requests from users ● To learn new skills ● To promote Web App development Services at Lemberg Why we’ve decided to develop web app?
  • 5. Developed with Angular 2 localForagemomentjs GULPwebpack
  • 6. Connfa! PWA features ✓ Progressive ✓ Responsive ✓ App-like ✓ Fresh ✓ Discoverable ✓ Installable ✓ Linkable ✓ Safe ✓ Connectivity independent (Offline mode, service workers) ✕ Re-engageable (Push notifications)
  • 7. What makes your web app “progressive” iOS: <link rel="apple-touch-icon" href="../public/images/icon.png"/> <meta name="viewport" content="width=device-width"> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta id="theme-color" name="theme-color" content="#06335b"> <meta name="apple-mobile-web-app-title" content="DrupalCon"> <meta name="msapplication-TileColor" content="#06335b"> Android <link rel="manifest" href="../public/manifest.json"> { "short_name": "DrupalCon", "name": "Connfa Web App", "icons": [ { "src": "images/icon96@96.png", "sizes": "96x96", "type": "image/png" }, ], "start_url": "/", "display": "standalone", "orientation": "portrait" }
  • 8. What makes your web app “progressive” https://youtu.be/cmGr0RszHc8?t=4m23s
  • 9. Browsers support 11 14 49 54 10 41 10 all 53 53 50 55 51 56 52 57 53 52 51 49 9.1 TP 42 43 9.3 4.4.4 4.4 IE Edge Firefox Chrome Safari Opera iOS Safari Opera Mini Android Browser Chrome for Android
  • 11. PWA vs Native app PWA: ● Working with OS API is impossible. ● Changes are deployed for all users and all platforms immediately without app re-submissions. ● You don't need to care about versioning of apps. Native app: ● Working with OS API is better. ● Working with media and data outside app is easier in native apps. ● App re-submissions. ● App versioning and migrations.
  • 12. Connfa! native app VS web app (DrupalCon Dublin as an example) Android Web App
  • 13. Connfa! native app VS web app (DrupalCon Dublin as an example) Android Web App
  • 14. Android Web App Connfa! native app VS web app (DrupalCon Dublin as an example)
  • 15. Summary ● Ready to use on Android ● In five years plan for iOS safari ● Mobile users oriented ● Simple to start project (angular-cli)
  • 17. Thank you for your attention! Any questions?