npm install -g @angular/cli
dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0
md \MyPWA
cd \MyPWA
dotnet new angular -o MyNgApp
cd \MyPWA\MyNgApp\ClientApp
npm install –-save @types/winrt-uwp
cd \MyPWA\MyNgApp\ClientApp
ng generate component notifications
Cd \MyPWA\MyNgApp
Start Visual Studio
Open MyNgApp.csproj
<li [routerLinkActive]='["link-active"]'>
<a [routerLink]='["/notifications"]' (click)='collapse()'>
<span class='glyphicon glyphicon-envelope'></span> Notifications
</a>
</li>
RouterModule.forRoot([
{ path: '', component: HomeComponent, pathMatch: 'full' },
{ path: 'counter', component: CounterComponent },
{ path: 'fetch-data', component: FetchDataComponent },
])
RouterModule.forRoot([
{ path: '', component: HomeComponent, pathMatch: 'full' },
{ path: 'counter', component: CounterComponent },
{ path: 'fetch-data', component: FetchDataComponent },
{ path: 'notifications', component: NotificationsComponent },
])
///<reference path='../../../node_modules/@types/winrt-uwp/index.d.ts' />
public showToast(message, iconUrl) {
if (typeof Windows !== 'undefined' &&
typeof Windows.UI !== 'undefined' &&
typeof Windows.UI.Notifications !== 'undefined') {
var notifications = Windows.UI.Notifications;
var template = notifications.ToastTemplateType.toastImageAndText01;
var toastXml = notifications.ToastNotificationManager.getTemplateContent(template);
var toastTextElements = toastXml.getElementsByTagName("text");
toastTextElements[0].appendChild(toastXml.createTextNode(message));
var toastImageElements = toastXml.getElementsByTagName("image");
var newAttr = toastXml.createAttribute("src");
newAttr.value = iconUrl;
var altAttr = toastXml.createAttribute("alt");
altAttr.value = "toast graphic";
var attribs = toastImageElements[0].attributes;
attribs.setNamedItem(newAttr);
attribs.setNamedItem(altAttr);
var toast = new notifications.ToastNotification(toastXml);
var toastNotifier = notifications.ToastNotificationManager.createToastNotifier();
toastNotifier.show(toast);
}
}
public updateTile(message, imgUrl, imgAlt) {
if (typeof Windows !== 'undefined' &&
typeof Windows.UI !== 'undefined' &&
typeof Windows.UI.Notifications !== 'undefined') {
var date = new Date();
var notifications = Windows.UI.Notifications,
tile = notifications.TileTemplateType.tileSquare150x150PeekImageAndText01,
tileContent = notifications.TileUpdateManager.getTemplateContent(tile),
tileText = tileContent.getElementsByTagName('text');
tileText[0].appendChild(tileContent.createTextNode(message || date.toTimeString()));
var tileImage = tileContent.getElementsByTagName('image');
var newAttr = tileContent.createAttribute("src");
newAttr.value = imgUrl || 'https://unsplash.it/150/150/?random';
var altAttr = tileContent.createAttribute("alt");
altAttr.value = imgAlt || 'Random demo image';
var attribs = tileImage[0].attributes;
attribs.setNamedItem(newAttr);
attribs.setNamedItem(altAttr);
var tileNotification = new notifications.TileNotification(tileContent);
var currentTime = new Date();
tileNotification.expirationTime = new Date(currentTime.getTime() + 600 * 1000);
notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);
}
}
<button (click)="showToast('hello world','http://icons.iconarchive.com/icons/cute-little-factory/breakfast/128/toast-icon.png')">Show Toast</button><br />
<button (click)="updateTile('' ,'https://unsplash.it/150/150/?random','')">Update Tile</button>
if (typeof Windows !== 'undefined' && // Are we in Windows application context (a PWA or HWA?)
typeof Windows.UI !== 'undefined' && // Is the Windows.UI namespace available on this device?
typeof Windows.UI.Notifications !== 'undefined') // Is the Windows.UI.Notifications namespace available on this device?
1. With the MyNgApp as the Startup Project, press Ctrl+F5 or Debug | Start Without Debugging
1. Set MyNgHWA as the Startup Project.
2. Press F5 to Start Debugging.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.