connfa! progressive web app

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?