Progressive Web App Source Code
Convert Any Website to Android and IOS App
Links To Be Added in the Index Page
<link rel="manifest" href="./manifest.webmanifest">
<script src="./index.js" type="module">
manifest.webmanifest FILE
{
"name": "Thumbnail Downloader YouTube",
"short_name": "Thumbnailforyt",
"start_url": ".",
"display": "standalone",
"background_color": "#fff",
"description": "Fastest YouTube Thumbnail Downloader",
"icons": [
{
"src": "img/android-icon-36x36.png",
"sizes": "36x36",
"type": "image/png"
},
{
"src": "img/android-icon-48x48.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "img/android-icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "img/android-icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "img/android-icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "img/android-icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "img/logo.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
index.js FILE
window.addEventListener('load', () => {
registerSW();
});
async function registerSW() {
if ('serviceWorker' in navigator) {
try {
await navigator.serviceWorker.register('./sw.js');
} catch (e) {
console.log(`SW registration failed`);
}
}
}
sw.js FILE
const cacheName = 'vaahan';
const staticAssets = [
'./',
'./index.html',
'./custom.css',
'.custom.js',
'./index.js',
];
self.addEventListener('install', async e => {
const cache = await caches.open(cacheName);
await cache.addAll(staticAssets);
return self.skipWaiting();
});
self.addEventListener('activate', e => {
self.clients.claim();
});
self.addEventListener('fetch', async e => {
const req = e.request;
const url = new URL(req.url);
if (url.origin === location.origin) {
e.respondWith(cacheFirst(req));
} else {
e.respondWith(networkAndCache(req));
}
});
async function cacheFirst(req) {
const cache = await caches.open(cacheName);
const cached = await cache.match(req);
return cached || fetch(req);
}
async function networkAndCache(req) {
const cache = await caches.open(cacheName);
try {
const fresh = await fetch(req);
await cache.put(req, fresh.clone());
return fresh;
} catch (e) {
const cached = await cache.match(req);
return cached;
}
}
