The final product
Check this repository the final Website.
Grow Consulting will help you identify the best opportunities for your company's growth.
Some dependencies that will help us on our way. See Package.json
parcel
tailwindcss
@mischnic/parcel-namer-preserve-structure -> Tries to retain the existing folder structure of your source files.
@parcel/service-worker @parcel/transformer-webmanifest -> It will allow us to obtain a pwa
lozad -> Lazy loader
parcel-reporter-multiple-static-file-copier
.parcelsrc File
{
"extends": ["@parcel/config-default"],
"transformers": {
"*.ico": ["@parcel/transformer-raw"],
"*.woff": ["@parcel/transformer-raw"],
"*.woff2": ["@parcel/transformer-raw"],
"*.webmanifest": ["@parcel/transformer-webmanifest"]
},
"namers": ["@mischnic/parcel-namer-preserve-structure"],
"optimizers": {
"*.html": ["parcel-optimizer-ogimage", "..."]
},
"compressors": {
"*.{html,css,js,svg,map}": [
"...",
"@parcel/compressor-gzip",
"@parcel/compressor-brotli"
]
},
"reporters": ["...", "parcel-reporter-multiple-static-file-copier"]
}
At this point we have the js parcels correctly and can start with npm run dev
Necessary configuration with parcel js to obtain a pwa
Service Worker Register
navigator.serviceWorker.register(
new URL('./sw.js', import.meta.url),
{type: 'module'}
);
Sw
import {manifest, version} from '@parcel/service-worker';
self.addEventListener('install', e => {
e.waitUntil(
caches.open(version)
.then(cache => {
return cache.addAll(manifest)
.then(() => self.skipWaiting())
})
.catch(err => console.log('Falló registro de cache', err))
)
})
self.addEventListener('activate', e => {
const cacheWhitelist = [version]
e.waitUntil(
caches.keys()
.then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (cacheWhitelist.indexOf(cacheName) === -1) {
return caches.delete(cacheName)
}
})
)
})
.then(() => self.clients.claim())
)
})
self.addEventListener('fetch', e => {
e.respondWith(
caches.match(e.request)
.then(res => {
if (res) {
return res
}
return fetch(e.request)
})
)
})
Manifest.json
{
"name": "GROW",
"short_name": "GROW",
"description": "Suma un aliado en la mejora de la productividad de tu organización. Nuestro equipo multidisciplinario te ayudará a identificar las mejores oportunidades de crecimiento para tu negocio",
"background_color": "#fff",
"theme_color": "#fff",
"display": "standalone",
"start_url": "./?utm_source=pwa",
"orientation": "portrait",
"id": "/",
"lang": "es",
"icons": [
{
"src": "./assets/images/favicons/grow-16.png",
"sizes": "16x16",
"type": "image/png"
},
{
"src": "./assets/images/favicons/grow-32.png",
"sizes": "32x32",
"type": "image/png"
},
{
"src": "./assets/images/favicons/grow-57.png",
"sizes": "57x57",
"type": "image/png"
},
{
"src": "./assets/images/favicons/grow-72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "./assets/images/favicons/grow-114.png",
"sizes": "114x114",
"type": "image/png"
},
{
"src": "./assets/images/favicons/grow-144.png",
"sizes": "144x144",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "./assets/images/favicons/grow-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "./assets/images/favicons/grow-256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "./assets/images/favicons/grow-384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "./assets/images/favicons/grow-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
Top comments (0)