Sara Harkousse
@Sara_harkousse
@Maydeeapp
@Sara_harkousse
Tech Lead, Développeuse front-end Web à Dassault Systèmes
Développeuse Full stack à Maydée
"Duchess France" Leader & Marraine dans "Elles Bougent"
@Maydeeapp
Maydée est une association dont l'objectif est de sensibiliser à l'inégale répartition des tâches domestiques entre les femmes et les hommes et à son impact sur les vies des femmes.
https://www.maydee.fr
Aperçu de la V1 de l'application. Lancement de la version bêta à l'automne 2017.
@Maydeeapp @Sara_harkousse
HTML
CSS
JavaScript
Polymer
Node
MongoDB
Express
Client
Serveur
Maydée est une Progressive Web App ( ) développée "from scratch".
Pourquoi utiliser une ?
@Maydeeapp @Sara_harkousse
d'Objects connectés au Web
Source: we are social
@Maydeeapp @Sara_harkousse
Source: comScore Mobile Metrix, Juin 2015
Sites Web
Applications Mobiles
@Maydeeapp @Sara_harkousse
du temps de navigation sur leurs 3 applications mobiles préférées.
Source: comScore Mobile Metrix, Juin 2015
Les utilisateur.trice.s de smartphone passent
@Maydeeapp @Sara_harkousse
Caractéristiques
Usage
@Maydeeapp @Sara_harkousse
whatwebcando.today
Une , c'est quoi?
@Maydeeapp @Sara_harkousse
Responsive
Indépendante de la connectivité
App-like
Actualisée
Sécurisée
Facile à trouver
Engageante
Installable
@Maydeeapp @Sara_harkousse
Responsive: s'adapte à la taille du navigateur ( pc, tablette, mobile, ...)
SPA (layout (App Shell) + contenu dynamique)
@Maydeeapp @Sara_harkousse
Capacité à fonctionner en l’absence d’une connexion internet et Lie-Fi.
Service Worker
Un script JavaScript en arrière plan
Un proxy côté client
Utilise Fetch et Cache APIs
@Maydeeapp @Sara_harkousse
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
console.log('ServiceWorker registration failed: ', err);
});
});
}
@Maydeeapp @Sara_harkousse
var CACHE_NAME = 'app-cache-v1';
var urlsToCache = [
'/',
'/styles/styles.css',
'/script/app.js'
];
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
});
Si le Service Worker est nouveau, il sera installé.
Cache API est utilisé pour sauvegarder les ressources essentielles au fonctionnement offline.
@Maydeeapp @Sara_harkousse
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
// Cache hit - return response
if (response) {
return response;
}
return fetch(event.request);
}
)
);
});
Fetch API est utilisé pour faire les requête a serveur.
@Maydeeapp @Sara_harkousse
L'app Shell et les données sont toujours à jour.
Suppression des données obsolètes à l'activation du Service Worker.
self.addEventListener('activate', function(event) {
var cacheWhitelist = ['app-cache-v1', 'data-cache-v1'];
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(cacheName) {
if (cacheWhitelist.indexOf(cacheName) === -1) {
return caches.delete(cacheName);
}
})
);
})
);
});
@Maydeeapp @Sara_harkousse
Les Service Workers ne fonctionnent qu'en localhost ou HTTPS.
@Maydeeapp @Sara_harkousse
L’application est indexée dans les moteurs de recherche.
@Maydeeapp @Sara_harkousse
L’application s'installe telle une application native.
@Maydeeapp @Sara_harkousse
Web App Manifest
Name
Icon
Splash screen
Start url
{
"name": "my app",
"short_name": "my app",
"theme_color":"#ffffff",
"background_color":"#ffffff",
"start_url": "index.html?launcher=true",
"icons": [
{
"src": "launcher-icon-1x.png",
"type": "image/png",
"sizes": "48x48"
},
{
"src": "launcher-icon-2x.png",
"type": "image/png",
"sizes": "96x96"
},
{
"src": "launcher-icon-4x.png",
"type": "image/png",
"sizes": "192x192"
}
]
}
<link rel="manifest" href="/manifest.json">
@Maydeeapp @Sara_harkousse
Les Notifications Push
Client:
1- Demande de permission à l'utilisateur.trice.
2- Recevoir l'objet PushSubscription du navigateur
3- Envoyer l'objet PushSubscription au serveur
Demande de permission sur Desktop
Demande de permission sur Mobile
@Maydeeapp @Sara_harkousse
Serveur:
Envoyer des push à l'utilisateur.trice
Service Worker:
Ecouter les événements push
Afficher les notifications
@Maydeeapp @Sara_harkousse
self.addEventListener('push', function(event) {
const promiseChain = self.registration.showNotification('Hello, World.');
event.waitUntil(promiseChain);
});
Comment créer une rapidement?
@Maydeeapp @Sara_harkousse
create-react-app
npm install -g create-react-app
create-react-app my-react-app
cd my-react-app
npm start
@Maydeeapp @Sara_harkousse
polymer-cli
npm install -g polymer-cli
cd my-polymer-app
polymer init
> polymer-2-starter-kit
polymer build
polymer serve --open
Comment on teste la qualité d'une ?
@Maydeeapp @Sara_harkousse
@Maydeeapp @Sara_harkousse
Maydée est à la recherche de nouveaux talents !
Rendez-vous sur
maydee.fr/benevolat/
Julie Hebting - Co-fondatrice Responsable développement projet
Sara Harkousse - Co-fondatrice CTO Maydéeapp
Linda Cusatis
Cheffe de projet web
Sébastien Le Bote
CTO Infrastructure
Stéphanie Herr
Community Manager
@Sara_harkousse