Skip to content

itsalb3rt/PWA_modelo

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Convierte tu web tradicional en una PWA Progressive Web Apps (PWA) con este modelo y un mínimo de esfuerzo.

Las aplicaciones web progresivas comienzan con un sitio / aplicación web tradicional y se mejoran progresivamente con características modernas. Cuando los sitios están seguros(HTTPS), pueden aprovechar los ServiceWorkers para proporcionar soporte fuera de línea (offline), las notificaciones Push pueden ayudar a volver a atraer a los usuarios, y los Manifests de las aplicaciones web les permiten a los usuarios instalar PWA junto con las aplicaciones nativas.


Estructura básica;

Configura tu PWA


manifest.json

{
  "name": "PWA Name App",
  "short_name": "PWANameApp",
  "description": "Esta sería la descripción de mi PWA",
  "background_color": "#2B2B2B",
  "theme_color": "#2196F3",
  "orientation": "portrait",
  "display": "standalone",
  "start_url": "index.html",
  "scope": "./",
  "lang": "es-MX",
  "icons": []
  }

sw.js

CACHE_NAME es el nombre con el que el navegador almacenara la cache de tu app

urlsToCache son todos los recursos que deseas tu aplicación ejecute offline, archivos js, css, imágenes, secciones de tu app, etc…

const CACHE_NAME = 'v1_pwa_app_cache',
  urlsToCache = [
    './',
    'index.html',
    'css/style.css',
    'js/script.js',
    'img/mainlogo.png',
    'img/favicon.png'
  ]

index.html

Este archivo posee etiquetas meta que ayudan con la accesibilidad para la aplicación por lo que te recomiendo trabajar sobre el código de esta, copia el mismo en tu index y estará todo listo.


Probar;

Descarga este repositorio y pruébalo en un servidor local o remoto (de ser remoto debe tener certificado SSL ya que las PWA solo funcionan por HTTPS o en localhost)

Instalar tu PWA:

Listo!

Así tienes una aplicación web instalable tanto en Windows, Mac, Android o IOS;

Probar;

En tu teléfono esta saldrá como una app más en tu cajón de aplicaciones, la puedes probar desde el siguiente enlace seguro;

https://itsalb3rt.github.io/PWA_modelo/

drawing


drawing


drawing


Cualquier sugerencia siempre es bien recibida.

Releases

No releases published

Packages

No packages published