Now I will show how to publish 2 PWA within the same domain. This app randomly generates Yes or No.
First PWA
The first application is – Yes / No Wheel.
First you need to create a manifest.json
{
"name": "Yes or No Wheel",
"short_name": "Yes / No Wheel",
"start_url": "/yes-no-decision-maker/wheel-spinner/",
"scope": "/yes-no-decision-maker/wheel-spinner/",
"display": "standalone",
"background_color": "#607D8B",
"theme_color": "#607D8B",
"description": "Yes or No? Spin the wheel to decide.",
"icons": [{
"src": "/img/icons/pwa_48.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "/img/icons/pwa_96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/img/icons/pwa_144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "/img/icons/pwa_192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/img/icons/pwa_512.png",
"sizes": "512x512",
"type": "image/png"
}]
}
Then we create a service worker
const cacheVersion = 'v1';
const urlsToPrefetch = [
'/yes-no-decision-maker/wheel-spinner/',
];
this.addEventListener('install', function(event) {
event.waitUntil(
caches.open(cacheVersion).then(function(cache) {
return cache.addAll(urlsToPrefetch);
})
);
});
this.addEventListener('fetch', event => {
let responsePromise = caches.match(event.request).then(response => {
return response || fetch(event.request)
});
event.respondWith(responsePromise);
});
Now we connect the manifest.json
<link rel="manifest" href="https://igenerator.net/yes-no-decision-maker/wheel-spinner/manifest.json">
Register service worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/yes-no-decision-maker/wheel-spinner/sw.js', { scope: '/yes-no-decision-maker/wheel-spinner/' }).then(function(registration) {
console.log('Service worker registration succeeded:', registration);
}).catch(function(error) {
console.log('Service worker registration failed:', error);
});
} else {
console.log('Service workers are not supported.');
}
Second PWA
Second application – Yes / No Button. We do by analogy as in the first case, replacing only the URL and the name of the application.
Top comments (0)