Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
1. Debemos editar el fichero manifest.json ubicado en la raíz de la carpeta public y asegurarnos que la propiedad start_url tiene la ruta de la aplicación en el servidor.
2. Podemos editar el manifest.json de nuestra aplicación para que el icono de la misma cuando la instalemos en el móvil sea lo más grande posible. Para ello, utilizaremos el atributo: «purpose»:»maskable».
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon",
"purpose": "maskable"
},Puedes usar la página maskable.app para ver como quedaría el icono recortado.
Para que aparezca la opción de instalar la aplicación en el móvil (no sólo añadirla al escritorio como acceso directo) al menos una imagen debe estar escrita sin la propiedad purpose. Podemos, por tanto, repetir la imagen de 512px, usando la propiedad maskable y sin usarla.
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "maskable"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}3. Crear el favico.ico y sustituir el actual de la aplicación. Para ello, podrías usar este enlace.
Uso de service Worker
Utilizándolo podremos:
- Añadir notificaciones a nuestra aplicación.
- Que cuando accedamos a la web nos salga un popup proponiendo instalar la app.
Configuración básica
1. Instalaremos las siguientes dependencias:
"dependencies": {
...
"workbox-background-sync": "^6.5.4",
"workbox-broadcast-update": "^6.5.4",
"workbox-cacheable-response": "^6.5.4",
"workbox-core": "^6.5.4",
"workbox-expiration": "^6.5.4",
"workbox-google-analytics": "^6.5.4",
"workbox-navigation-preload": "^6.5.4",
"workbox-precaching": "^6.5.4",
"workbox-range-requests": "^6.5.4",
"workbox-routing": "^6.5.4",
"workbox-strategies": "^6.5.4",
"workbox-streams": "^6.5.4"
},2. Dejaremos estos dos ficheros en la raíz de la carpeta src:
3. Modificaremos el index.js
./src/index.js
import * as serviceWorkerRegistration from './serviceWorkerRegistration';
...
serviceWorkerRegistration.register();