I have an website with the capability of PWA.
My index file has a loading spinner within my app-root component. When a page loads, it replaces with the current loader spinner in index. This works on mobiles and desktops both but when I save my app on home screen, It no longer shows the loading spinner.
What actually happens, is you open the app, it shows you the splashscreen and after that a white screen appears till the page loads. no spinner is shown but an empty screen.
It seems like index.html is ignored by PWA app until my lazy module loads.
Here is my source code :
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>App</title>
<meta name="description" content="My App" />
<base href="/" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0"
/>
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
crossorigin="anonymous"
media="all"
/>
<link rel="manifest" href="manifest.webmanifest" />
<meta name="theme-color" content="#051229" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="App" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link
rel="mask-icon"
href="assets/icons/safari-pinned-tab.svg"
color="#5bbad5"
/>
<!-- SplashScreens are available for all devices-->
<link
href="assets/images/splashscreens/ipadpro2_splash.png"
media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image"
/>
.
.
.
<style>
*,
*:before,
*:after {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.loader { ... animation ... }
</style>
</head>
<body class="mat-typography">
<app-root>
<div class="loader"></div>
</app-root>
<noscript>
Please enable JavaScript to continue using this application.
</noscript>
</body>
</html>
app.component.html :
<router-outlet></router-outlet>
.app-routing.module.ts :
const routes: Routes = [
{
path: '',
redirectTo: 'home',
pathMatch: 'full',
},
{
path: 'home',
loadChildren: () =>
import('./home/home.module').then((m) => m.HomeModule),
},
];
@NgModule({
imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
exports: [RouterModule],
})
export class AppRoutingModule {}
Is there any fix on this or is it just PWAs limitation?
question from:
https://stackoverflow.com/questions/65847334/pwa-not-showing-loading-spinner-after-splashscreen 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
