Implementación y recomendaciones para IOS

Clase 18 de 20 • Curso de Progressive Web Apps con Angular 8

Facundo Nicolás García Martoni

teacher•

Compañeros, les recomiendo la plataforma de Real Favicon Generator para generar los diferentes íconos para Android y IOS de manera interactiva :)

Wilson Fabian Pérez Sucuzhañay

student•

ratito como hace 10 días si se lanzo ayer mmmm jaja esta mal el moment de platzi jaja

Gabriel De Andrade

student•

Wilson no está mal, Facundo es Associate, eso quiere decir que tiene acceso a los cursos antes de que sean lanzados para así asegurar su calidad :D

Brayan Alexis Valdes Gallego

student•

Reto casí logrado, me salen estos mensajes, que no se realmente como solucionar, el Learn more tampoco explica mucho a que se deba

Nicolas Molina

teacher•

Wow excelente casi tienes el 100 en todos los puntos, felicitaciones!

Juan Luna

student•

Nicolás buenos días desde España, sigo todos tus cursos y me encantan, tengo un problema a mi no me hace el reporte de lighthouse en producción, me manda un mensaje de que no encuentra la página /home, la url a mi app es esta:

MyApp

si intento entrar directamente al home no lo hace hay que ir al raíz https://curso-angular-pwa.web.app/

mi repo en github este:

repo

y la salida cuando intento hacer el reporte es este:

!reporte

No entiendo qué está pasando, y para mi esto es una urgencia grande, el lunes comienzo a trabajar como desarrollador angular y no encuentro solución a este problema en internet, cuando uso la url de mi web en producción + /home, firebase no la reconoce, por si sirve de algo te pongo el app-routing.module aquí:


import { NgModule } from'@angular/core';
import { Routes, RouterModule, PreloadAllModules } from'@angular/router';

import { LayoutComponent } from'./layout/layout.component';

import { AdminGuard } from'./admin.guard';

const routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      {
        path: '',
        redirectTo: '/home',
        pathMatch: 'full',
      },
      {
        path: 'home',
        loadChildren: () =>import('./home/home.module').then(m => m.HomeModule)
      },
      {
        path: 'products',
        loadChildren: () =>import('./product/product.module').then(m => m.ProductModule)
      },
      {
        path: 'contact',
        loadChildren: () =>import('./contact/contact.module').then(m => m.ContactModule)
      },
      {
        path: 'order',
        loadChildren: () =>import('./order/order.module').then(m => m.OrderModule)
      },
      {
        path: 'demo',
        loadChildren: () =>import('./demo/demo.module').then(m => m.DemoModule)
      },
    ]
  },
  {
    path: 'admin',
    canActivate: [AdminGuard],
    loadChildren: () =>import('./admin/admin.module').then(m => m.AdminModule)
  },
  {
    path: 'auth',
    loadChildren: () =>import('./auth/auth.module').then(m => m.AuthModule)
  },
  {
    path: '**',
    loadChildren: () =>import('./page-not-found/page-not-found.module').then(m => m.PageNotFoundModule)
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    preloadingStrategy: PreloadAllModules
  })],
  exports: [RouterModule]
})
exportclassAppRoutingModule { }

¿Le puedes echar un vistazo y ayudarme por favor, no sé qué es lo que pasa?

Gracias, de antemano.

Alex Gallardo

student•

Hola, no me abre la app, cuando hago tap o click en la notificacion de firebase. que puede estar pasando?

Jailyne Arely Matías López

student•

Para hacer una PWA en Vue.js se hace los mismos pasos que en Angular?

import { NgModule } from'@angular/core';
import { Routes, RouterModule, PreloadAllModules } from'@angular/router';

import { LayoutComponent } from'./layout/layout.component';

import { AdminGuard } from'./admin.guard';

const routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      {
        path: '',
        redirectTo: '/home',
        pathMatch: 'full',
      },
      {
        path: 'home',
        loadChildren: () =>import('./home/home.module').then(m => m.HomeModule)
      },
      {
        path: 'products',
        loadChildren: () =>import('./product/product.module').then(m => m.ProductModule)
      },
      {
        path: 'contact',
        loadChildren: () =>import('./contact/contact.module').then(m => m.ContactModule)
      },
      {
        path: 'order',
        loadChildren: () =>import('./order/order.module').then(m => m.OrderModule)
      },
      {
        path: 'demo',
        loadChildren: () =>import('./demo/demo.module').then(m => m.DemoModule)
      },
    ]
  },
  {
    path: 'admin',
    canActivate: [AdminGuard],
    loadChildren: () =>import('./admin/admin.module').then(m => m.AdminModule)
  },
  {
    path: 'auth',
    loadChildren: () =>import('./auth/auth.module').then(m => m.AuthModule)
  },
  {
    path: '**',
    loadChildren: () =>import('./page-not-found/page-not-found.module').then(m => m.PageNotFoundModule)
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    preloadingStrategy: PreloadAllModules
  })],
  exports: [RouterModule]
})
exportclassAppRoutingModule { } 

Implementación y recomendaciones para IOS

Apropiar el concepto de PWA

Cómo crearás una PWA con Angular

¿Qué son las PWA?

Características de una PWA

PWA vs Híbrido vs Nativo

Los Services Workers

Proyecto del curso: Platzi Store

Entender PWA en Angular

Generando la primer PWA

Caché local y pruebas offline

Pruebas con Lighthouse

Caché de assets

Caché de requests

Construir una PWA luciendo como nativa

Poniendo tu app en el Homescreen

Crear botón de instalación automática

Probar funcionalidad del botón de instalación

Enviando actualizaciones

Implementando flujo de notificaciones

Gestionando notificaciones

Implementación y recomendaciones para IOS

Integrar continuamente

Aplicando Lighthouse Bot a tu proceso de integración continua

Conclusiones