app share of time spent on mobile.
next gen. Webapps => Progressive Web Apps
What is a Progressive Web App?
index.html
<head>
...
<link rel="manifest" href="/manifest.json">
</head>
manifest.json
{
name: "Meine App",
start_url: "/",
description: "Meine erste Progressive Web App",
theme_color: "#1d1d1b",
background_color: "#ffffff",
display: "standalone",
orientation: "any",
icons: [
{
src: "/path/to/app-icon-512x512.png",
type: "image/png",
sizes: "512x512"
}
],
}
index.html
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js');
}
</script>
service-worker.js
self.addEventListener('install', (event) => console.log('serviceworker install..'));
self.addEventListener('activate', (event) => console.log('serviceworker installed.'));
self.addEventListener('fetch', (event) => {
console.log(`Request Method ${event.request.method}`);
console.log(`Handling fetch event for ${event.request.url}`);
});
"Lie-Fi"
![]() |
![]() |
![]() |
SPA - Precache/index.html/styles.css /app.js /logo.svg |
MPA - Precache//offline/ /styles.css /ui.js /logo.svg |
open source
50%+ market share
modular architecture