CODEWITHSUNDEEP
iosangularprogressive-web-appsionic4
Hanzo
Hanzo

Reputation: 1899

Angular Service Workers not work on iOS standalone mode

I am working on PWA with Ionic v4 and Angular PWA service workers. On app.component.ts have a injected service to check if updates are available on PWA and then download and reload.

When I open PWA with the browser the service works fine and If I deploy an update the service worker update the cached PWA and ‘auto-reload’ the page.

The problem comes with PWA/standalone mode, on iOS when the PWA is added to homescreen it not refreshes anymore even killing it with the task app list. Only If I shutdown the device and on again it refreshes the state of the app. On Android devices all works as expected on PWA mode.

This is my version checker service implemented with Angular service worker:

import {Injectable} from '@angular/core';
import {SwUpdate} from '@angular/service-worker';

@Injectable()
export class LogUpdateService {

    constructor(updates: SwUpdate) {
        console.warn('check')
        updates.available.subscribe(event => {
            console.log('current version is', event.current);
            console.log('available version is', event.available);
            updates.activateUpdate().then(() => {
                console.warn('downloaded')
                document.location.reload();
            });
        });
        updates.activated.subscribe(event => {
            console.log('old version was', event.previous);
            console.log('new version is', event.current);
        });
    }
}

This is my package.json:

"dependencies": {
    "@angular/common": "^7.2.9",
    "@angular/core": "^7.2.9",
    "@angular/forms": "^7.2.9",
    "@angular/http": "^7.2.9",
    "@angular/platform-browser": "^7.2.9",
    "@angular/platform-browser-dynamic": "^7.2.9",
    "@angular/pwa": "0.13.8",
    "@angular/router": "^7.2.9",
    "@angular/service-worker": "7.2.12",
    "@ionic-native/core": "^5.2.0",
    "@ionic-native/network": "^5.2.0",
    "@ionic-native/splash-screen": "^5.2.0",
    "@ionic-native/status-bar": "^5.2.0",
    "@ionic/angular": "4.2.0",
    "@ionic/storage": "^2.2.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "cordova-plugin-network-information": "2.0.1",
    "cordova-sqlite-storage": "3.2.0",
    "core-js": "^2.6.5",
    "ionic2-calendar": "^0.5.2",
    "moment": "^2.24.0",
    "rxjs": "~6.4.0",
    "serve": "^10.1.2",
    "zone.js": "~0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/architect": "0.13.8",
    "@angular-devkit/build-angular": "0.13.8",
    "@angular-devkit/core": "7.3.8",
    "@angular-devkit/schematics": "7.3.8",
    "@angular/cli": "7.3.8",
    "@angular/compiler": "~7.2.9",
    "@angular/compiler-cli": "~7.2.9",
    "@angular/language-service": "~7.2.9",
    "@ionic/angular-toolkit": "1.5.0",
    "@types/jasmine": "~3.3.9",
    "@types/jasminewd2": "~2.0.6",
    "@types/node": "~11.11.3",
    "@ionic/lab": "1.0.24",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~3.3.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.5",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.2",
    "ts-node": "~8.0.3",
    "tslint": "~5.14.0",
    "typescript": "^3.1.6"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-sqlite-storage": {},
      "cordova-plugin-network-information": {}
    }
  }

Any Idea with this problem?

Upvotes: 2

Views: 3323

Answers (1)

AFT
AFT

Reputation: 115

The only solution that I found is to code a javascript function (e.g. updateiOS()) that will do the following

1- Verify if we are running on iOS standalone mode (if not then don't continue)

2- Check for a new version on the server and reload page if we found a new version (make sure this https request is not cached!)

3- Save the last check time in a variable (e.g. var lastCheckTime)

And in my main javascript function, I will create a listener for "focus" event that will check the difference between now and lastCheckTime, if it's more than let's say 1 day then call updateiOS()

so far the focus event is working fine with me

Upvotes: 0

Related Questions