Hello everyone,
I have a small problem with the creation of shortcut by @ angular / pwa. I have followed some tutorials but they don’t get anywhere.
I think everything is ok but in fact nada :’(
Can U help me plz.
My home.page.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
deferredPrompt
constructor() {}
ngOnInit() { }
ionViewWillEnter() {
window.addEventListener('beforeinstallprompt', (e) => {
console.log('beforeinstallprompt Event fired');
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault()
// Stash the event so it can be triggered later.
this.deferredPrompt = e
});
}
showInstallBanner() {
if (this.deferredPrompt !== undefined && this.deferredPrompt !== null) {
// Show the prompt
this.deferredPrompt.prompt()
// Wait for the user to respond to the prompt
this.deferredPrompt.userChoice
.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
// We no longer need the prompt. Clear it up.
this.deferredPrompt = null
})
}
}
}
package.json
{
"name": "goon",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@agm/core": "^3.0.0-beta.0",
"@angular/common": "~9.1.6",
"@angular/core": "~9.1.6",
"@angular/fire": "6.0.2",
"@angular/forms": "~9.1.6",
"@angular/localize": "~9.1.6",
"@angular/platform-browser": "9.1.10",
"@angular/platform-browser-dynamic": "~9.1.6",
"@angular/pwa": "0.1000.6",
"@angular/router": "~9.1.6",
"@angular/service-worker": "~9.1.6",
"@ionic-native/core": "^5.27.0",
"@ionic-native/facebook": "^5.27.0",
"@ionic-native/geolocation": "5.27.0",
"@ionic-native/google-plus": "5.27.0",
"@ionic-native/image-picker": "5.27.0",
"@ionic-native/native-geocoder": "5.27.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "5.0.0",
"@ionic/storage": "2.2.0",
"@types/google-maps": "3.2.2",
"bootstrap": "^4.4.0",
"cordova-android": "8.1.0",
"cordova-browser": "6.0.0",
"cordova-ios": "5.1.1",
"cordova-plugin-add-swift-support": "2.0.2",
"cordova-plugin-facebook4": "6.4.0",
"cordova-plugin-geolocation": "4.0.2",
"cordova-plugin-googleplus": "8.5.0",
"cordova-plugin-nativegeocoder": "3.4.1",
"cordova-universal-links-plugin-fix": "1.2.1",
"firebase": "7.16.1",
"ion4-autocomplete": "1.1.0",
"leaflet": "1.6.0",
"leaflet-ant-path": "1.3.0",
"ngx-bootstrap": "5.6.1",
"ngx-pipes": "2.7.5",
"rxjs": "~6.5.1",
"rxjs-compat": "6.5.5",
"tslib": "1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.901.5",
"@angular/cli": "~9.1.5",
"@angular/compiler": "~9.1.6",
"@angular/compiler-cli": "~9.1.6",
"@angular/language-service": "~9.1.6",
"@ionic/angular-toolkit": "^2.1.1",
"@types/googlemaps": "^3.39.11",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "12.11.1",
"codelyzer": "^5.1.2",
"cordova-plugin-device": "2.0.2",
"cordova-plugin-ionic-keyboard": "2.0.5",
"cordova-plugin-ionic-webview": "4.0.0",
"cordova-plugin-splashscreen": "5.0.2",
"cordova-plugin-statusbar": "2.4.2",
"cordova-plugin-whitelist": "1.3.3",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~3.0.1",
"karma-jasmine-html-reporter": "1.4.2",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.8.3"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-geolocation": {},
"cordova-plugin-nativegeocoder": {
"LOCATION_WHEN_IN_USE_DESCRIPTION": "Use geocoder service"
},
"cordova-plugin-googleplus": {
"REVERSED_CLIENT_ID": "----------",
"WEB_APPLICATION_CLIENT_ID": "--------------"
},
"cordova-plugin-facebook4": {
"APP_ID": "---------",
"APP_NAME": "-------"
},
"cordova-universal-links-plugin": {}
},
"platforms": [
"android",
"ios",
"browser"
]
}
}
the manifest file
{
"name": "GoOn",
"short_name": "GoOn",
"theme_color": "#1976d2",
"background_color": "#fafafa",
"display": "standalone",
"scope": "./",
"start_url": "./",
"icons": [
{
"src": "assets/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable any"
}
]
}
and this issue 
