Angular Service Workers not work on iOS standalone mode - ios

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?

See: PWAs on iOS 12.2 beta: the good, the bad, and the "not sure yet if good"

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

Related

Missing node module error even though it's installed on a webdriverio/electron project. (ts-node)

I cannot figure out why I am getting the below error. I'm trying to set up webdriver-io for an existing electron project.
node:internal/errors:465
ErrorCaptureStackTrace(err);
^
Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'C:\Users\user\automation\product\src\product.client\
node_modules\ts-node\esm\transpile-only' imported from C:\Users\user\automation\product\src\product.client\
at new NodeError (node:internal/errors:372:5)
at finalizeResolution (node:internal/modules/esm/resolve:437:11)
at moduleResolve (node:internal/modules/esm/resolve:1009:10)
at defaultResolve (node:internal/modules/esm/resolve:1218:11)
at ESMLoader.resolve (node:internal/modules/esm/loader:580:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:294:18)
at ESMLoader.import (node:internal/modules/esm/loader:380:22)
at initializeLoader (node:internal/process/esm_loader:74:49)
at loadESM (node:internal/process/esm_loader:87:11)
at runMainESM (node:internal/modules/run_main:51:21) {
code: 'ERR_MODULE_NOT_FOUND'
}
I have been through the google desert. Of course I understand it's not found. But I can't figure out why it's not found? ts-node is installed. My package.json is below:
"devDependencies": {
"#types/chalk": "^2.2.0",
"#types/chart.js": "^2.9.34",
"#types/command-line-args": "^5.0.0",
"#types/execa": "^2.0.0",
"#types/node": "^14.6.0",
"#types/request": "^2.48.7",
"#typescript-eslint/eslint-plugin": "^2.18.0",
"#typescript-eslint/parser": "^2.18.0",
"#wdio/cli": "^8.3.3",
"#wdio/devtools-service": "^7.16.14",
"chalk": "^4.1.0",
"command-line-args": "^5.1.1",
"cross-env": "^7.0.2",
"electron-chromedriver": "^13.0.0",
"electron-packager": "^15.2.0",
"electron-wix-msi": "^3.2.0",
"eslint": "^6.8.0",
"eslint-plugin-import": "^2.20.0",
"execa": "^4.0.3",
"rimraf": "^3.0.2",
"ts-node": "^8.10.2",
"typescript": "^4.9.5",
"wdio-electron-service": "^3.5.1",
"webdriverio": "^7.7.4",
"yarn-run-all": "^3.1.1"
},
"dependencies": {
"chart.js": "2.9.4",
"electron": "^23.0.0",
"react-number-format": "^4.8.0"
}
}
Can any kind soul help me figure out what it's looking for or how to get around it? I'm very frustrated.
I don’t know if you already figured it out or not but I had the exact same error and it was a problem with the version of ts-node. So basically install a newer version of ts-node the one I installed was 10+. Hope this helps.

Compilation error from Angular and typescript in VS 2015 MVC project

I am new to Angular and taking baby step to implement in ASP.Net MVC project. I downloaded the Angular quick start from github and latest typescript v 3.2.2.0 for visual studio 2015 update 3. I am getting the following error Property lift in the type 'Subject is not assignable tot he same property in base type Observable' .
other version used:
npm -v is 6.4.1
node -v is 10.15.2
The package.json that I downloaded from github had a reference to the older version version. Attached is the package.json file i am using.
I have my npm running and was able to host the website through lift-server.
error TS2416: Property 'lift' in type 'Subject' is not assignable
to the same property in base type 'Observable'. Type '(operator:
Operator) => Observable' is not assignable to type
'(operator: Operator) => Observable'. Type 'Observable'
is not assignable to type 'Observable'. Type 'T' is not assignable
to type 'R'
Please help.
Error snippet
{
"name": "angular-quickstart",
"version": "1.0.0",
"description": "QuickStart package.json from the documentation, supplemented with testing support",
"scripts": {
"build": "tsc -p src/",
"build:watch": "tsc -p src/ -w",
"build:e2e": "tsc -p e2e/",
"serve": "lite-server -c=bs-config.json",
"serve:e2e": "lite-server -c=bs-config.e2e.json",
"prestart": "npm run build",
"start": "concurrently \"npm run build:watch\" \"npm run serve\"",
"pree2e": "npm run build:e2e",
"e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
"preprotractor": "webdriver-manager update",
"protractor": "protractor protractor.config.js",
"pretest": "npm run build",
"test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
"pretest:once": "npm run build",
"test:once": "karma start karma.conf.js --single-run",
"lint": "tslint ./src/**/*.ts -t verbose"
},
"keywords": [],
"author": "",
"license": "MIT",
"dependencies": {
"#angular/common": "~4.3.4",
"#angular/compiler": "~4.3.4",
"#angular/core": "~4.3.4",
"#angular/forms": "~4.3.4",
"#angular/http": "~4.3.4",
"#angular/platform-browser": "~4.3.4",
"#angular/platform-browser-dynamic": "~4.3.4",
"#angular/router": "~4.3.4",
"angular-in-memory-web-api": "~0.3.0",
"systemjs": "0.19.40",
"core-js": "^2.4.1",
"rxjs": "5.0.1",
"zone.js": "^0.8.4"
},
"devDependencies": {
"concurrently": "^3.2.0",
"lite-server": "^2.2.2",
"typescript": "~2.1.0",
"canonical-path": "0.0.2",
"tslint": "^3.15.1",
"lodash": "^4.16.4",
"jasmine-core": "~2.4.1",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~4.0.14",
"rimraf": "^2.5.4",
"#types/node": "^6.0.46",
"#types/jasmine": "2.5.36"
},
"repository": {}
}
Try to upgrade with:
npm install --save rxjs#^6.4.0
this issue should have been fixed in RxJS 6.
There are a couple things wrong here.
First, your Typescript is on the latest version. I'm not sure even Angular 7 supports Typescript 3.2.2. I think they will when Angular 8 is released shortly.
Second, your Angular packages are way out of date. You should update to Angular 7 if possible.
Third, Visual Studio can sometimes get picky about your ts config. If the above two don't work please post your ts config so we can look at it. I build Angular Applications from the Web Form template in VS 2017. I use the Angular CLI instead of any VS Extension. If you want more details let me know.
Here's a package.json from a project I started recently:
"private": true,
"dependencies": {
"#angular/animations": "~7.1.0",
"#angular/common": "~7.1.0",
"#angular/compiler": "~7.1.0",
"#angular/core": "~7.1.0",
"#angular/forms": "~7.1.0",
"#angular/platform-browser": "~7.1.0",
"#angular/platform-browser-dynamic": "~7.1.0",
"#angular/router": "~7.1.0",
"classlist.js": "^1.1.20150312",
"core-js": "^2.5.4",
"d3": "^4.10.2",
"d3-array": "^1.2.1",
"d3-brush": "^1.0.4",
"d3-color": "^1.0.3",
"d3-force": "^1.1.0",
"d3-format": "^1.2.0",
"d3-hierarchy": "^1.1.5",
"d3-interpolate": "^1.1.5",
"d3-scale": "^1.0.6",
"d3-selection": "^1.1.0",
"d3-shape": "^1.2.0",
"d3-time-format": "^2.1.0",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"web-animations-js": "^2.3.1",
"zone.js": "~0.8.26",
"bootstrap": "4.3.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.11.0",
"#angular-devkit/build-ng-packagr": "~0.11.0",
"#angular/cli": "~7.1.3",
"#angular/compiler-cli": "~7.1.0",
"#angular/language-service": "~7.1.0",
"#types/node": "~8.9.4",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"ng-packagr": "^4.2.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tsickle": ">=0.29.0",
"tslib": "^1.9.0",
"tslint": "~5.11.0",
"typescript": "~3.1.6"
}
}

Rails/Webpacker is not working

I have a Rails/React project. It's using Rails/webpack 3.3.0.
To precompile react code, I executed:
rails assets:precompile RAILS_ENV=development
But I am getting this error:
[Webpacker] Compilation failed:
(node:47256) DeprecationWarning: Tapable.apply is deprecated.
Call apply on the plugin directly instead (node:47256)
DeprecationWarning:
Tapable.plugin is deprecated. Use new API on .hooks instead
TypeError: dep.getResourceIdentifier is not a function
Is this something you faced before? Would you like to help me to fix thsi problem?
Here is my package.json
{
"dependencies": {
"#rails/webpacker": "3.3.0",
"babel-core": "6",
"babel-loader": "^7.1.4",
"babel-preset-react": "^6.24.1",
"caniuse-lite": "^1.0.3000697",
"classnames": "^2.2.5",
"coffee-loader": "^0.9.0",
"coffeescript": "^2.2.2",
"debounce": "^1.1.0",
"es6-shim": "^0.35.3",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"mobile-detect": "^1.4.1",
"prop-types": "^15.6.1",
"react": "16.0.0",
"react-addons-css-transition-group": "^16.0.0-alpha.3",
"react-addons-update": "^15.6.2",
"react-bootstrap": "^0.32.1",
"react-dom": "^16.2.0",
"react-dom-factories": "^1.0.2",
"react_ujs": "^2.4.4",
"uglifyjs-webpack-plugin": "^1.2.5",
"webpack": "4.0.0"
},
"devDependencies": {
"webpack-cli": "^2.0.15",
"webpack-dev-server": "^3.1.0"
},
"license": "UNLICENSED",
"private": true
}
The version of Webpacker you are using isn't compatible with Webpack 4.
However, it looks like support is close, Webpack 4.x support has been merged:
https://github.com/rails/webpacker/pull/1316
And there's a Webpacker 4.x preview release:
https://rubygems.org/gems/webpacker
So I believe you want to use Webpack 3.x for the time being, or go bleeding edge and try the prerelease.
With that said, I'm going to give the prerelease a go, I've been waiting for Webpack 4.x support!

Angular 5 app not working in ios8 (Browserstack)

I've tested my Angular 5 app on an iPhone 6 running IOS8 (Safari) and in Browserstack. The angular app doesn't run, I just get an empty page and this Javascript error.
Any suggestions?
This is my package.json file. I'm thinking that some package that I added here is causing some conflict and preventing the app from displaying. Previously I had the app able to run in IOS8, but that was with Angular 4.4 and I wasn't using mdbootstrap library.
{
"name": "XXXX",
"version": "1.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"i18n": "ng-xi18n"
},
"private": true,
"dependencies": {
"#agm/core": "^1.0.0-beta.2",
"#angular-devkit/schematics": "0.0.34",
"#angular/animations": "^5.0.3",
"#angular/common": "^5.0.3",
"#angular/compiler": "^5.0.3",
"#angular/core": "^5.0.3",
"#angular/forms": "^5.0.3",
"#angular/http": "^5.0.3",
"#angular/platform-browser": "^5.0.3",
"#angular/platform-browser-dynamic": "^5.0.3",
"#angular/router": "^5.0.3",
"applicationinsights-js": "^1.0.8",
"bootstrap": "^3.3.7",
"bootstrap-select": "^1.12.4",
"chart.js": "^2.5.0",
"core-js": "^2.4.1",
"easy-pie-chart": "^2.1.7",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"jquery": "^3.2.1",
"libphonenumber-js": "^0.4.40",
"ng-autosize": "^1.1.0",
"ng-mdb-pro": "XXXX",
"npm-check-updates": "^2.13.0",
"rxjs": "^5.4.2",
"screenfull": "^3.3.0",
"zone.js": "^0.8.14"
},
"devDependencies": {
"#angular/cli": "^1.5.5",
"#angular/compiler-cli": "^5.0.3",
"#angular/language-service": "^4.3.0",
"#types/applicationinsights-js": "^1.0.2",
"#types/jasmine": "~2.8.2",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"codelyzer": "~4.0.1",
"jasmine-core": "^2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-junit-reporter": "^1.2.0",
"protractor": "~5.2.0",
"ts-node": "~3.3.0",
"tslint": "^5.3.2",
"typescript": ">=2.4.2 <2.5.0"
}
}
Had a similar problem. It should be resolved by providing correct polyfills.
you can find browser support info here https://angular.io/guide/browser-support
If you use JIT compiler (not AOT) then safari needs at least ES7 reflect polyfill.
Safari 7 & 8 need also ES6
If you still use the old intl based pipes then do not forget to include them.
For older browsers core-js/es/... imports usually resolve the issues.
Go to your src/polyfills.ts and enable desired polyfills.
There is also a fetch polyfill mentioned in the readme of the generated project, that is not included in polyfill.ts.
import 'whatwg-fetch'; // Run `npm install --save whatwg-fetch`
$ ng build --mangle safari10=true --prod
Follow the next steps
Execute command to generate file .browserslistrc
npx browserslist
Into the file set the last version until you get that you need, in my case I need work with safari 10, then i set the file ".browserslistrc" :
last 2 Chrome version
last 2 Firefox version
last 2 Edge major versions
last 5 Safari major versions
last 5 iOS major versions

Angular 4/Angular 2 validate SPA against Azure B2C Active Directory

In Angular 4/Angular 2 app, I want to validate it against Azure B2C Active Directory. In ASP.NET MVC, it was done using [Authorize] attribute on Controller and using an OWIN Startup.cs class to generate the authentication challenge and generating the Bearer token.
Moving on to a SPA application using Angular 4/Angular 2, I am not able to find a relevant tutorial for the same. I have seen some examples using Auth0, but I am not looking for an Auth0 solution. I want to authenticate directly against the Azure B2C Active Directory.
Can some approach and relevant example and tutorial describing the same be provided.
Tried ng2-adal sample suggested by 'Fei Xue - MSFT' below. Adding ng2-adal sample error message pics.
Added 'package.json' code:-
{
"name": "angular2-azure-ad",
"version": "1.0.0",
"scripts": {
"gulp": "gulp",
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"build": "tsc",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"#angular/common": "~4.0.0",
"#angular/compiler": "~4.0.0",
"#angular/core": "~4.0.0",
"#angular/http": "~4.0.0",
"#angular/platform-browser": "~4.0.0",
"#angular/platform-browser-dynamic": "~4.0.0",
"#angular/router": "~4.0.0",
"angular2-adal": "^0.1.4",
"angular2-in-memory-web-api": "0.0.10",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"rxjs": "5.0.1",
"systemjs": "0.19.40",
"zone.js": "^0.8.4"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings": "^1.0.4",
"gulp": "^3.9.1",
"gulp-typescript": "^2.13.6",
"gulp-sourcemaps": "^1.6.0",
"gulp-shell": "^0.5.2",
"del": "^2.2.0"
}
}
AFAIK, we need to implement CanActivate interface in the Angular 2 for the guard deciding if a route can be activated.
To protect the SPA for the Angular 2 using Azure AD you can refer this code sample. And about the Azure AD B2C authentication, you can refer this document.

Resources