Ionic + angular PWA freezes sometime and won't be able to navigate through pages

Ionic Framework Ionic Angular
1

l have an ionic app and on browser, it works fine, but once l install the PWA on the mobile home screen, l can watch at least 2 videos over a media player then after finishing a quiz the app tabs freeze, and l won’t be able to navigate to any page.

Please check the following link with the video demonstrating the behavior.

and for the code the tabs

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

import { HomePage } from './home.page';

const routes: Routes = [
  {
    path: 'home',
    component: HomePage,
    children: [
    {
      path: 'homepage',
       loadChildren: () => import('../pages/homepage/homepage.module').then(
        m => m.HomepagePageModule
        )
     },
    {
      path: 'search',
       loadChildren: () => import('../pages/search/search.module').then(
       m => m.SearchPageModule
       )
     },
    {
      path: 'leaderboard',
      loadChildren: () => import('../pages/leaderboard/leaderboard.module').then(
       m => m.LeaderboardPageModule
       )
     },
    {
      path: 'account',
      loadChildren: () => import('../pages/account/account.module').then(
        m => m.AccountPageModule
       )
    },
    {
       path: 'redeem',
       loadChildren: () => import('../pages/redeem/redeem.module').then(
       m => m.RedeemPageModule
       )
    },
    {
      path: 'watch/:id',
      loadChildren: () => import('../pages/watch/watch.module').then(
       m => m.WatchPageModule
       )
    },
    {
      path: 'campaign/:id',
      loadChildren: () => import('../pages/campaign/campaign.module').then(
       m => m.CampaignPageModule
      )
    },
    {
      path: 'quiz/:n/:id',
      loadChildren: () => import('../pages/quiz/quiz.module').then(
       m => m.QuizPageModule
       )
    },
    {
      path: 'course/:name',
      loadChildren: () => import('../pages/course/course.module').then(
       m => m.CoursePageModule
      )
    }
   ]
}

];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
Home 
<ion-tab-button tab="leaderboard">
  <ion-icon name="grid"></ion-icon>
  <ion-label>Leaderboard</ion-label>
</ion-tab-button>

<ion-tab-button tab="redeem">
  <ion-icon name="basket-outline"></ion-icon>
  <ion-label>Redeem</ion-label>
</ion-tab-button>

<ion-tab-button tab="account">
  <img src="./assets/face28.jpg" alt="pic">
  <ion-label>Account</ion-label>
</ion-tab-button>

l face no console errors by the way

2

Well, not much to go from, and not a very nice bug to catch.

Are you sure there are no console.logs? Have you tried other devices? Maybe even iOS?

It is fairly important to catch some sort of message, otherwise, you need to strip down parts of the app until you found the part that may cause this. Or the other way around: build up in pieces until it breaks, so you know what could cause it.

Another thought could be is to put it in an android container using capacitor or even cordova. And then use ADB DEBUG to see if at OS level something happens…

In fact, maybe use ADB DEBUG at all with the PWA. ADB also catches browser issues.

3

On some level, virtually all bugs that present inconsistently (i.e., not “every single time I do X, the app does Y”, but “if I do X enough times, sometimes the app does Y”) represent race conditions, meaning you are relying on assumptions that don’t always hold about the order that your code is executing.

So, if you’ve got co-workers, I would ask one of them to review your code for race conditions. Sometimes they’re very hard to spot, especially by the eyes that made the mistake in the first place.

If you don’t have coworkers, and are willing to show the entire app repository (this sort of problem is notoriously ill-suited to posting individual snippets out of context, because one needs to see the entire code flow to spot many of the problems), that’s another option, and maybe somebody here will help with this.

If neither of those options work for you, and you want to try to do this yourself, here’s a mini-checklist of rocks you can turn over to see if anything crawls out:

  • get rid of any use of async and await
  • give explicit, proper (not any) types to all parameters and return values of all methods
  • add strict options to tsconfig.json, like:
 "compilerOptions": {
...
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictPropertyInitialization": true
},
{
 "angularCompilerOptions": {
...
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
}
  • pay strict attention to any build-time complaints triggered by adding these compiler options, because failing to initialize something can often be covered up by code that “generally” executes fast enough
  • if you ever call a function that returns a future (Promise or Observable) (including the ones you write yourself, and knowing for certain which ones these are is a key part of why the first two steps on this list are there), think about how you are dealing with it. Generally, you would want to also be returning a future from the calling function that’s dependent on the one you got. If you’re not, think hard about whether people who are calling this function care about when it does its work. If they do, and you’re not returning a future, you’re toast. There’s no way that the caller can know when that work has completed.
  • the advice in the previous bit very much applies to calls to native plugins, which all return futures of some sort.

Good luck.

4

Thanks for the reply, yes l can share my code but with anyone who can assist since it is prod code.

5

I’m struggling with the exact same problem here, it freezes on the splash screen 1 out of 3 times I start the PWA (only on Chrome and Android).
Did you manage to fix it ? Find a solution ?