motion graphic developer
ui/ux
front end developer
project management
consulting
web development
consulting
2006
faculty in Quincy College
SEO
2012
data visualization
2015
2016
A Progressive Web App uses modern web capabilities to deliver an app-like user experience.” – Progressive Web Apps
https://
service worker
service worker
https://
the average app mostly loses its entire userbase within a few months.” – Andrew Chen, Supply Growth @ Uber.
https://
accessible through URLs, and indexed by search engins, due to W3C manifests and registration of Service Worker
service worker
doesn't take as much space, extends the battery life, less data usage
application shell model provides an interface of native apps ( scrolling, navigation )
PWA
true story about lie-fi...
reliable
network connectivity is an enhancement
ecommerce
don't wait until all browsers will support it
collection of technologies, design concepts, and Web APIs that work in tandem
npm install -g lighthouse
lighthouse https://mobile.twitter.com/home
python -m SimpleHTTPServer
Use chrome://apps
A manifest is a simple JSON that contains data about a website
{
"name": "CSS Development Conference",
"short_name": "CssDevConf",
"lang": "en-US",
"start_url": "/index.html",
"display": "standalone",
"background_color": "#555",
"icons": [
{
"src": "\/android-icon-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
}
]
}
Invalid manifest file won't be count at all, means no PWA
<link rel="manifest" href="manifest.json">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="application-name" content="CssDevConf">
<meta name="apple-mobile-web-app-title" content="CssDevConf">
<meta name="msapplication-starturl" content="/index.html">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
add to your index.html
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
service workers
Service Workers is an event based script that provides offline experience, push notifications and caching.
npm install --save sw-toolbox
git clone https://github.com/GoogleChrome/sw-toolbox.git
if (‘serviceWorker’ in navigator) {
window.addEventListener(‘load’, function() {
navigator.serviceWorker.register(‘/sw.js’).then(
function(registration) {
console.log(‘ServiceWorker: registered‘, registration.scope); },
function(err) {
console.log(‘ServiceWorker: failed: ‘, err);
});
});
}
importScripts('js/sw-toolbox/sw-toolbox.js');
toolbox.cacheFirst();
toolbox.networkFirst();
toolbox.precache(['index.html','style/style.css']);
toolbox.router.get(
'/images/*',
toolbox.cacheFirst) ,
{cache; {
Name: 'images' ,
maxEntries: 6
}}
);
toolbox.router.get(
'/*',
toolbox.networkFirst,
{networkTimeoutSeconds: 3}
);
both being used for client-server communications
SW require that &just don’t work otherwise
AMP provides reliably fast web components for first load
traditional HTML document with some restrictions
responsible for quick HMTL rendering
which makes it possible for the browser to render an AMP cache
located between the customer and the network and act as a proxy to cache content
like Web Workers
postMessage();
Unlike Web Workers
service worker
if ('serviceWorker' in navigator) {
//checking for browser support then register
navigator.serviceWorker
.register('./sw.js')
//logging the scope of the service worker
.then(function(registration) {
console.log('ServiceWorker: registered, scope is:',
registration.scope);
});}
<link rel="serviceworker" href="sw.js" scope="/link/">
//to keep track of the version of SW
var cacheName = 'cache1';
//to separate app shell from data
var filesToCache = ['/', '/index.html'];
self.addEventListener('install', function(e) {
console.log('ServiceWorker: install event fired');
//lets the browser know when installation was
//completed successfully or failed
e.waitUntil(
//open the cache
caches.open(cacheName).then(function(cache) {
console.log('ServiceWorker: caching app shell');
//Confirm whether all the required assets are cached or not
return cache.addAll(filesToCache);
})
);
});
self.addEventListener('activate', function(e) {
console.log('[ServiceWorker] Activate');
//remove old cache here if any of the app shell files changed
});
Activate() is cache management
Let's now serve the app shell from the cache
self.addEventListener('fetch', function(e) {
console.log('[ServiceWorker] Fetch', e.request.url);
e.respondWith(
caches.match(e.request).then(function(response) {
return response || fetch(e.request);
})
);
});
service worker
service worker
service worker
service worker
blank page == no registered service worker on the page
page with registered service worker
user-select: none;
/* iOS */
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
/* Android */
font-family: 'RobotoRegular', 'Droid Sans', sans-serif;
users don't expect the web behaves like a native app.
(full screen mode, push notifications or work offline)