import { Component , Listen , Prop , State } from '@stencil/core' ; import { MatchResults } from '@stencil/router' ; import { ToastController } from '@ionic/core' ; import { urlB64ToUint8Array } from '../../helpers/utils' ; @ Component ( { tag : 'app-profile' , styleUrl : 'app-profile.scss' } ) export class AppProfile { @ Prop ( ) match : MatchResults ; @ Prop ( { connect : 'ion-toast-controller' } ) toastCtrl : ToastController ; @ State ( ) notify : boolean ; @ State ( ) swSupport : boolean ; publicServerKey = urlB64ToUint8Array ( 'BBsb4au59pTKF4IKi-aJkEAGPXxtzs-lbtL58QxolsT2T-3dVQIXTUCCE1TSY8hyUvXLhJFEUmH7b5SJfSTcT-E' ) ; componentWillLoad ( ) { if ( 'serviceWorker' in navigator && 'PushManager' in window ) { this . swSupport = true ; } else { this . swSupport = false ; } } @ Listen ( 'ionChange' ) subscribeToNotify ( $event ) { console . log ( $event . detail . checked ) ; if ( $event . detail . checked === true ) { this . handleSub ( ) ; } } handleSub ( ) { navigator . serviceWorker . getRegistration ( ) . then ( ( reg ) => { reg . pushManager . getSubscription ( ) . then ( ( sub ) => { if ( sub === null ) { reg . pushManager . subscribe ( { userVisibleOnly : true , applicationServerKey : this . publicServerKey } ) . then ( ( sub ) => { console . log ( 'web push subscription: ' , sub ) ; this . notify = true ; } ) ; } } ) ; } ) ; } render ( ) { if ( this . match && this . match . params . name ) { return ( < ion - page class = 'show-page' > < ion - header md - height = '56px' > < ion - toolbar color = 'primary' > < ion - title > InstaMusic < /ion-title> < /ion-toolbar> < /ion-header> < ion - content > < p > Hello ! My name is { this . match . params . name } . My name was passed in through a route param ! < /p> { this . swSupport ? < ion - item > < ion - label > Notifications < /ion-label> < ion - toggle checked = { this . notify } disabled = { this . notify } > < /ion-toggle> < /ion-item> : null} < /ion-content> < /ion-page>); } } }