Presentación asociada al taller aquí
Twitter: @susomejias , Portfolio: susomejias.es, Blog: blog.susomejias.es
-
Disponer de unos conocimientos mínimos en html, JavaScript, npm y CSS.
-
Conexión a internet.
-
Disponer de un navegador web ya sea Chrome(recomendado) o firefox.
-
Disponer de un editor de código, recomendable Visual Studio Code.
-
Extensión LiveServer o similar para Visual studio code.
-
Node JS instalado en tu equipo.
-
Npm instalado en tu equipo.
Partiendo del proyecto contenido dentro de la carpeta withoutOptimizing, el cuál está construido sin tener en cuenta los procesos de optimización adecuados. En este taller se aplicarán buenas prácticas y conocimientos para optimizar este proyecto y convertirlo en un proyecto web optimizado y en una PWA. Obteniendo como resultado un proyecto similar al contenido dentro de la carpeta optimizing.
-
Librerías y fuentes.
-
Accedemos a la carpeta demo que es una copia de la carpeta
withoutOptimizingla cuál contiene el proyecto sin optimizar y que usaremos para realizar el taller. -
Añadir Tailwind, Font-awesome, Quicklink, AOS, Progressively, Google Font, mi CSS y mi JS.
-
Añadir
<script>después del renderizado del DOM o usando el atributodefersiempre que sea posible. Más info aquí -
Para realizar los pasos anteriores copiamos dentro de nuestro
<head>el contenido que se encuentra dentro de la etiqueta<head>del siguiente archivo.
-
-
Minificar y concatenar assets.
-
Instalar Gulp de manera global
npm install -g gulp. -
Usar Gulp para minificar y realizar un lowly a las imágenes y minificar y concatenar, CSS y JS. Para ello debemos copiar la carpeta gulptasks-automatization-master a la carpeta de la demo. Para ejecutar las tareas de minificación y concatenación de assets debemos de instalar previamente las dependecias con
npm installe introducir el siguiente comandogulpdentro de la carpeta copiada anteriormentegulptasks-automatization-master.
-
-
Implementar Tailwind, Progressively, AOS, Quicklink.
-
Copiamos dentro de nuestro
<main>el contenido que se encuentra dentro de la etiqueta<main>del siguiente archivo. -
Añadimos inicializamos a nuestro archivo JS
main.js.
{ let init = function() { AOS.init(); // inicializamos AOS progressively.init(); // inicializamos progressively quicklink.listen({ priority: true }); // inicializamos quicklink } // ejecutamos función init al terminar la carga del DOM window.addEventListener('load', init) } -
Crear e importar Webmanifest.
- Documentación aquí.
Para ello creamos un archivo en la raiz del proyecto llamado
manifest.webmanifesty copiamos siguiente contenido:
{ "name": "tallerOptimizacionSysmana2020", "short_name": "tallerSysmana2020", "start_url": ".", "display": "standalone", "background_color": "#fff", "description": "Taller de optimización web Sysmana 2020.", "icons": [{ "src": "assets/icons/icon-72x72.png", "sizes": "72x72", "type": "image/png" }, { "src": "assets/icons/icon-96x96.png", "sizes": "96x96", "type": "image/png" }, { "src": "assets/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png" }, { "src": "assets/icons/icon-152x152.png", "sizes": "152x152", "type": "image/png" }, { "src": "assets/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "assets/icons/icon-384x384.png", "sizes": "384x384", "type": "image/png" }, { "src": "assets/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ], "related_applications": [{ "platform": "web", "url": "http://127.0.0.1:5500/demo/index.html" }] }-
Añadir carpeta
iconsa nuestros assets. La carpeta la podremos encontrar dentro de los assets del proyectooptimizing. -
Añadir
favicon.icoa la raíz de nuestra carpeta demo.
- Documentación aquí.
Para ello creamos un archivo en la raiz del proyecto llamado
-
Conversión a PWA.
-
Artículos recomendados.
-
APP SHELL "lo necesario para que nuestro sitio funcione sin conexión a internet".
-
Workbox "Workbox es la librería creada por Google que simplifica de forma notable la escritura de service workers mediante una API potente y sencilla."
-
Apartado Application de Chrome (Service Worker y Cache Storage).
-
Crear y registrar Service Worker
serviceWorker.js. Para ello creamos un archivo en la raiz del proyecto llamadoserviceWorker.jsy copiamos el contenido del siguiente archivo. También debemos de registrarlo añadiendo el siguiente contenido a nuestro JS.
{ let init = function() { serviceWorkerRegister() // registramos serviceWorker AOS.init(); // inicializamos AOS progressively.init(); // inicializamos progressively quicklink.listen({ priority: true }); // inicializamos quicklink } let serviceWorkerRegister = function() { // Nos aseguramos que el navegador soporta la api 'serviceWorker' if ('serviceWorker' in navigator) { // Registramos el service worker navigator.serviceWorker.register('serviceWorker.js'); } } // ejecutamos función init al terminar la carga del DOM window.addEventListener('load', init) }-
Probar Service Worker sin conexión.
-
Instalar como "App".
-
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
This project is licensed under the MIT License - see the LICENSE file for details.