Intro (What, why, how) -> Reliable (Databases, Always available) -> Fast () -> engajable
13% web vs 87% App 80% of time spent is in users top 3 apps
Native app to open is fast and work offline and has push notification. Web is reacher than native apps
The average user install 0 apps per month Mobile user use 1000 sites per month.
40% of user abandona um site se demora mais de 3 segundos.
- Reach
- 1B montly mobyle chrome users
- Reach on mobile web 2.5x of apps
- 3.3 (app) vs 8.9 (web) montly unique visitors
- 201.8 (app) vs 10.9 (web) average minutes per visitor
- Acquisition costs
- Selio: €4 vs €0.35 per user aquisition
- Conversion
- AliExpress: 2x more page views, 74% increase in time, 82% more conversion on iOS
- Reliable
- fast
- engajable
Load instatly and never show the downasaur, even in uncertain network conditions
Respond quickly to user interaction with silky smooth animations and no janky scrolling
Fell like a natural app on the device withe an inmmersive user experience
- No Play store or App store
- Easy access
- Simple A/B test
- Challanges to update an app on low networks
- On 2G net SW improve 3 times the loading
- Konga.com
- They started from scratch
- 92% less data for inital data
- 82% less data to make the first transactaion
- Just a part of the site
- airberlin
- < 1s initial loading
- airberlin
- The wasthingon post
- 80ms page load
- Focus on feature (Just a specific feature)
- The weather company (Pus notifications)
- booking.com
- SW
- Web Manifest
- App shell vs content
- Minimum resources for the first view
- We cache it on the SW
- Break the design with the core components
- What needs to be on screen
- What are others ui component for the app
- What supporting resource are needed (JS, css)
- Server-Side Rendering
- AJAX requests
- Combination of Both. Inject the data into the JS
- Local Storage
- Caches
- IndexedDb
- Easy to use
- Sync
-
Easy to use
-
Async
-
Fast
-
Not really well supported
-
Fast
-
Async
-
Well supported
-
Hard to use (can use a lib like localforage or lovefield)
Run in background (Caches and offline) Listen events from browser or server (Push notifications) Intercept network request, modify or redirect.
- Browser support
- HTTPS (or localhost)
- inside your application
- Progressive enhacement
if ('serviceWorker' in navigator) {
// the scope is the entire root
navigator.serviceWorker.register('/sw.js')
.then();
}
- Cache files for the app-shell
- version of the cache (Every change should update the cache.)
var cacheName = 'weatherPWA-v1';
var filesToCache = [...] list of url
self.addEventListener('install', function(e) {
e.waitUntil(
caches.open(cacheName).then(function(cache) {
return cache.addAll(filesToCache); //Atomic operation
});
);
})
- clean old caches
self.addEventListener('activate', function(e) {
e.waitUntil(
caches.keys().then(function(keyList) {
return Promise.all(keyList.map(function(key) {
if (key !== cacheName && key !== dataCacheName) {
return caches.delete(key)
}
}))
})
)
})
- fetch events for low connections and no network
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);
})
)
})
- Automagically pre-cache your files.
- Generate a sw
npm install sw-precache
swPrecache.write(<'service-worker.js'>, swOptions);
gulp.task('generate-sw', function () {
var swOptions = {
staticFileGlobs: [
'./*.html',
'./images/*.{png,svg,gif,jpg}',
'./scripts/**/*.js',
'./styles/**/*.css'
],
stripPrefix: '.',
runtimeCaching: [{
urlPattern: /^https:\/\/wtf-data-api\.com/,
handler: 'networkFirst',
options: {
cache: {
name: 'dataApi'
}
}
}]
}
return swPrecache.write('service-worker.js', swOptions);
})
- json
- how app appears to user
- how app behaviros when lunched
- chrome and opera
{
name,
short_name
start_url: /index.html?hs=true,
icons: [{
src,
sizes
}],
background_color,
theme_color,
display,
orientation
}
48x48 96x96 128x128 144x144 192x192 256x256 384x384 512x512
Chrome use 48 and 128.
<link re=manifest href=manifest.json />
<link rel="apple-touch-icon" sizes="" href="">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-status-bar-style" content="black-translucent">
Needs to add some padding for the status bar be visible.
- Add your app to home screen
- Chrome logic:
- service worker
- web manifest
- engaged user
- Offline cookbook
- Promises
- Push notifications
- Web Payments API
- Credential Management API
- pwa.rocks
For more resources on building progressive web apps, take a look at https://developers.google.com/web/progressive-web-apps
Service Worker cookbook: https://serviceworke.rs/
Pokedex.org: http://www.pocketjavascript.com/blog/2015/11/23/introducing-pokedex-org
Offline Web Apps on GitHub Pages https://hacks.mozilla.org/2015/11/offline-web-apps-on-github-pages/
Progressive Web Apps: Escaping Tabs Without Losing Our Soul https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/