Fixed issue with App Service Demo (microsoft#531)

This PR addresses microsoft#529

Author: qmatteoq

samples/AppServiceDemo/windows/appservicedemo.sln

@@ -3,6 +3,8 @@ Microsoft Visual Studio Solution File, Format Version 12.00
 # Visual Studio Version 17
 VisualStudioVersion = 17.0.31612.314
 MinimumVisualStudioVersion = 10.0.40219.1
+Project("{C7167F0D-BC9F-4E6E-AFE1-012C56B48DB5}") = "appservicedemo.Package", "appservicedemo.Package\appservicedemo.Package.wapproj", "{E0C2D328-2554-4450-BB40-DEABF4E44BB8}"
+EndProject
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "appservicedemo", "appservicedemo\appservicedemo.csproj", "{418AD1A7-D045-478A-AA6B-34A597088C0D}"
 EndProject
 Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "Folly", "..\node_modules\react-native-windows\Folly\Folly.vcxproj", "{A990658C-CE31-4BCC-976F-0FC6B1AF693D}"
@@ -38,8 +40,6 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "ReactNativeAppServiceModule
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "RegistryApp", "RegistryApp\RegistryApp.csproj", "{0A122BD2-9C76-4B58-A0E1-C4D9844D857C}"
 EndProject
-Project("{C7167F0D-BC9F-4E6E-AFE1-012C56B48DB5}") = "appservicedemo.Package", "appservicedemo.Package\appservicedemo.Package.wapproj", "{E0C2D328-2554-4450-BB40-DEABF4E44BB8}"
-EndProject
 Global
 	GlobalSection(SharedMSBuildProjectFiles) = preSolution
 		..\node_modules\react-native-windows\Shared\Shared.vcxitems*{2049dbe9-8d13-42c9-ae4b-413ae38fffd0}*SharedItemsImports = 9

samples/AppServiceDemo/windows/appservicedemo/App.xaml.cs

@@ -1,9 +1,11 @@
 using Microsoft.ReactNative;
+using Windows.ApplicationModel.Activation;
+using Windows.ApplicationModel.AppService;
+using Windows.ApplicationModel.Background;
 #if USE_WINUI3
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
 #else
-using Windows.ApplicationModel.Activation;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
 #endif
@@ -12,6 +14,8 @@ namespace appservicedemo
 {
     sealed partial class App : ReactApplication
     {
+        private BackgroundTaskDeferral appServiceDeferral;
+
         public App()
         {
 #if BUNDLE
@@ -33,6 +37,7 @@ public App()
             Microsoft.ReactNative.Managed.AutolinkedNativeModules.RegisterAutolinkedNativeModulePackages(PackageProviders); // Includes any autolinked modules
 
             PackageProviders.Add(new Microsoft.ReactNative.Managed.ReactPackageProvider());
+            PackageProviders.Add(new ReactNativeAppServiceModule.ReactPackageProvider());
             PackageProviders.Add(new ReactPackageProvider());
 
             InitializeComponent();
@@ -64,5 +69,20 @@ protected override void OnActivated(Windows.ApplicationModel.Activation.IActivat
                 frame.Navigate(typeof(MainPage), null);
             }
         }
+
+        protected override void OnBackgroundActivated(BackgroundActivatedEventArgs args)
+        {
+            base.OnBackgroundActivated(args);
+
+            if (args.TaskInstance.TriggerDetails is AppServiceTriggerDetails details)
+            {
+                appServiceDeferral = args.TaskInstance.GetDeferral();
+
+                var ns = ReactPropertyBagHelper.GetNamespace("RegistryChannel");
+                var name = ReactPropertyBagHelper.GetName(ns, "AppServiceConnection");
+
+                InstanceSettings.Properties.Set(name, details.AppServiceConnection);
+            }
+        }
     }
 }

website/blog/2021-08-05-win32component.md

@@ -4,7 +4,7 @@ author: Matteo Pagani
 authorURL: https://twitter.com/qmatteoq
 description: "How to use Win32 features from a React Native for Windows application"
 is_blog: true
-published_date: August 5, 2021
+published_date: August 30, 2021
 ---
 
 If you have adopted React Native to build your Windows applications, you'll know that the final output is a [Universal Windows Platform application](https://docs.microsoft.com/windows/uwp/get-started/universal-application-platform-guide). This development platform gives you access to all the latest enhancements in the Windows ecosystem (modern UI platform, notifications, integration with features like inking and Windows Hello, etc.), plus greater security and reliability thanks to the sandbox the application runs in.