Con este toolkit se puede integrar fácilmente las características más notables de un PWA. Esta solución se integra fácilmente en proyectos antiguos con jQuery o en nuevos frameworks Javascript. Este proyecto está en desarrollo. No dude en probarlo y enviar sus Issus y Pull Resquests en Github.
🚀 Descubre el repositorio en GitHub.
📱 Prueba la Demo (repositorio de la demo).
Caracteristicas
- Web App Manifest
- Estructura de ficheros de iconos
- Precaching
- Estrategias de almacenamiento en caché
- Notificaciones Push
Documentación
Empieza con un Ejemplo
Importante: Para que este ejemplo funcione a la perfección, debe ser utilizado en localhost o en un dominio https y el index.html debe encontrarse en la raíz del sitio..
Clone jfa-pwa-toolkit desde el repositorio de Github y crear un archivo index.html y un offline.html archivo.
$ clon de git - rama v1.0-beta [email protected]:jfadev / jfa-weight-toolkit.git $ JFA-peso MVC conjunto de herramientas-mi-peso $ cd mi-PWA / $ index.html táctil $ tocar offline.html
Sencillo index.html skeleton (esqueleto completo en la documentación).
Pega este esqueleto en su index.html archivo.
<!html DOCTYPE>
<html lang ="en-us">
<head>
<meta charset ="utf-8">
<meta http-equiv ="X-UA-Compatible" content ="IE = borde">
<meta content ="width = dispositivo de ancho, inicial escala = 1, -Máximo de la escala = 1, -Usuario escalable = no" name="ventana">
<!-- Color del tema -->
<meta name ="color del tema" content ="#000" />
<!-- PESO Manifiesto ->
<link rel ="manifiesto" href ="/peso / manifest.json"></enlazar>
<!-- favicon ->
<link rel ="icono" type ="image / png" href ="/PWA / iconos / cromo / cromo-favicon-16-16.png">
<!-- iconos ->
<!-- Pantalla de bienvenida -->
<título>JFA PESO Toolkit Ejemplo</título>
</head>
<body>
<!-- Cargar ACF PWA Toolkit Configs ->
<script type="text/javascript" src="/PWA / config.js"></script>
<!-- Cargar ACF PESO Toolkit gratis ->
<script type="text/javascript" src="/peso / pwa.js"></script>
<!-- Register Trabajador principal servicio ->
<script type="text/javascript">
PWA.ServiceWorker.register();
</script>
</body>
</html>
Pegar, por ejemplo, este simple html en su offline.html archivo.
<!html DOCTYPE>
<html lang ="en-us">
<head>
<título>DESCONECTADO - JFA PESO Toolkit Ejemplo</título>
</head>
<body>
<p>Sin conexión a Internet!</p>
</body>
</html>
Ejemplo de contenido del manifest.json. Puede usar app.webmanifest en lugar de manifest.json si lo prefiere.
{
"usted": "LTR",
"solamente": "en-us",
"name": "Su nombre App",
"alcance": "/",
"monitor": "ser único",
"START_URL": "/",
"nombre corto": "Su nombre de la aplicación a corto",
"descripción": "Su aplicación Descripción.",
"orientación": "alguna",
"color del tema": "#000",
"color de fondo": "#000",
"related_applications": [],
"prefer_related_applications": falso,
"iconos": [{
"src": "/PWA / iconos / Windows 10 / Square71x71Logo.scale-400.png",
"tamaños": "284X284"
},
]
}
Ejemplo de un simple config.js
const PWA_CONFIG = {
app: {
name: 'Tu-app-name',
versión: 'V1'
},
SO: {
ruta de archivo: '' /sw.js,
offline_route: '/Offline.html'
},
cache: {
imágenes: {
activo: verdadero,
maxentries: 50,
maxageseconds: 24 * 60 * 60
},
estática: {
activo: verdadero,
maxentries: 50,
maxageseconds: 24 * 60 * 60
},
fuentes: {
activo: verdadero,
maxentries: 50,
maxageseconds: 24 * 60 * 60
},
rutas: {
networkfirst: {
activo: verdadero,
expresiones regulares: /.*/
}
}
}
}
Ejemplos de código JS
Juega con más funciones con la variable de acceso global PWA en su código Javascript como en los siguientes ejemplos
Este ejemplo usa la biblioteca jQuery. En la documentación podrá encontrar ejemplos en puro ES6
Botón para suscribirse a Notificaciones Push
$('# Btn1').click(() => {
por si (
PWA.Notification.isDefault() ||
PWA.Notification.isGranted()
) {
PWA.Push.getSubscription((suscripción) => {
por si (suscripción) {
$('# Btn1').html('Ahora estás suscrito para recibir notificaciones Push!');
} de otro modo {
PWA.Push.subscribe((r) => {
$('# Btn1').html('Felicidades! Usted está suscrito para recibir notificaciones Push!');
});
}
});
} de otro modo {
$('# Btn1').html("De haber desactivado notificaciones Push. Permitir notificaciones Push en la configuración del navegador.");
}
});
Checkbox para suscribirse / darse de baja de Notificaciones Push
$('# Btn1').click(() => {
por si (
PWA.Notification.isDefault() ||
PWA.Notification.isGranted()
) {
PWA.Push.getSubscription((suscripción) => {
por si (suscripción) {
PWA.Push.unsubscribe((r) => {
$('# Btn1').html('Se le ha cancelado la suscripción para recibir notificaciones Push!');
});
} de otro modo {
PWA.Push.subscribe((r) => {
$('# Btn1').html('Se le ha cancelado la suscripción para recibir notificaciones Push!');
});
}
});
} de otro modo {
$('# Btn1').html("De haber desactivado notificaciones Push. Permitir notificaciones Push en la configuración del navegador.");
}
});
Muestra pop-up solicitando permiso para permitir mostrar Notificaciones
$('# Btn1').click(() => {
PWA.Notification.requestPermission((estado) => {
$('# Btn1').html(estado);
});
});
Obtener el estado de permiso de Notificaciones
$('# Btn1').click(() => {
el permiso var = PWA.Notification.getPermission();
$('# Btn1').html(permiso);
});
Mostrar Notificación enviadas por el navegador
$('# Btn1').click(() => {
Opciones const = {
body: 'Contenido extra para que aparezca dentro de la notificación',
icono: '../Images/touch/chrome-touch-icon-192x192.png'
};
PWA.Notification.show('Título Notificación', Opciones, enviado => {
por si (expedido) {
$('# Btn1').html('La notificación se ha enviado');
}
});
});
Comprobar si el navegador soporta los Service Workers
$('# Btn1').click(() => {
por si (PWA.Navigator.isSupportedServiceWorker()) {
$('# Btn1').html('Este apoyo navegador Trabajadores de Servicios!');
} de otro modo {
$('# Btn1').html('Este navegador no soporta Trabajadores de Servicios.);
}
});
Comprobar si el navegador soporta las Notificaciones
$('# Btn1').click(() => {
por si (PWA.Navigator.isSupportedNotification()) {
$('# Btn1').html('apoyo Notificaciones este navegador!');
} de otro modo {
$('# Btn1').html('Este navegador no soporta Notificaciones.');
}
});
Comprobar si el navegador está offline
$('# Btn1').click(() => {
por si (PWA.Navigator.isOffline()) {
$('# Btn1').html('Sin conexión a Internet!');
} de otro modo {
$('# Btn1').html('Usted tiene una conexión a Internet!');
}
});
Borrar la caché de la aplicación del navegador
$('# Btn1').click(() => {
PWA .Na VI cree que r.cle Arcache();
});
Patio de Recreo
Juega con la biblioteca de PWA y aprende a usarla con facilidad.
Repositorio
Dé vuelta a su sitio existente a PWA con esta biblioteca de JS from r/javascript
