Open Source iOS, Android App and WebApp for Conferences and Events To Learn more check out: - Yura Myrosh on Facebook - https://www.facebook.com/yura.myrosh - Yura Myrosh on Twitter - https://twitter.com/Yura_Myrosh - Connfa! official website - http://connfa.com/ - Learn more about Lemberg - http://lemberg.co.uk/

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

10. Desktop version

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)

16. 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/

17. Thank you for your attention!
Any questions?