Embed Size (px)
Citation preview
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/[email protected]",
"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?
