Easily installing Progressive Web Apps

This week is not something completely new, but more something nice to be aware of. This week is all around Progressive Web Apps (PWAs) and easily and automatically installing them on Windows devices. The great thing about a PWAs is that they’re basically websites that are enhanced to function like installed, native apps on supporting platforms, while functioning like regular websites on other browsers. That provides a great cross-platform experience. On Windows devices, PWAs can actually be installed like a native app and in some ways even behave like native apps. That provides a really powerful experience. With Microsoft Edge basically any website can be installed as an app. The behavior depends on the capabilities of the website. A nice add-on to that is that the combination of Microsoft Edge and Microsoft Intune can also be used to manage the installed PWAs for the users. This post will go through the installation options for PWAs and the steps for automatically installing PWAs via Microsoft Edge on Windows devices. This post ends with the user experience.

Introducing Progressive Web App installation options

When looking at automatically installing PWAs via Microsoft Edge, by using Microsoft Intune, it’s important to be familiar with the installation options. Within the Settings Catalog profile, of Microsoft Intune, the Configure list of force-installed Web Apps setting can be used to automatically install PWAs. That setting is ADMX-backed and requires the input of some JSON content. That can contain up to six different properties per PWA, of which only a single property is required. That required property is the url of the PWA. In total the following properties are available.

  • default_launch_container – (Optional) This property can be used to specify the window mode
  • create_desktop_shortcut – (Optional) This property can be used to specify that a desktop shortcuts must be created
  • fallback_app_name – (Optional) This property can be used to override the app name (this is useful when the installed website is not an actual PWA and when the information of the PWA is not completely loaded)
  • custom_name – (Optional) This property can be used to permanently override the app name*
  • custom_icon – (Optional) This property can be used to override the app icon of installed apps*
  • url – (Mandatory) This property is used to specify the URL of the app to install

Those properties can be used together in a single JSON-file to define the sites that should be installed as an app. A section per site with the different properties that define the configuration for that app. Below is an example that contains an actual PWA and a regular website.

[
	{      		
		"fallback_app_name": "petervanderwoude.nl", 		
		"create_desktop_shortcut": true, 
     		"default_launch_container": "window",
      		"url": "https://petervanderwoude.nl/" 
  	},
 	{
      		"fallback_app_name": "Outlook",
 		"create_desktop_shortcut": true,
      		"default_launch_container": "window",
      		"url": "https://outlook.office.com"
 	}
]

Note: At this moment custom_name and custom_icon are not yet supported with Microsoft Edge.

Configuring Microsoft Edge with Progressive Web Apps

When looking at configuring Microsoft Edge on Windows devices, the focus of the IT administrator can be on a single place: the Settings Catalog. Even though the settings are also available via Administrative Templates, the Settings Catalog is the most future proof configuration path. As the required setting and value is discussed already, this makes the configuration steps pretty straight forward. The following eight steps walk through the creation of the Settings Catalog profile, with the required settings.

  1. Open the Microsoft Endpoint Manager admin center portal and navigate to Devices > Windows > Configuration profiles
  2. On the Windows | Configuration profiles blade, click Create profile
  3. On the Create a profile blade, provide the following information and click Create
  • Platform: Select Windows 10 and later to create a profile for Windows 10 devices
  • Profile: Select Settings catalog to select the required setting from the catalog
  1. On the Basics page, provide the following information and click Next
  • Name: Provide a name for the profile to distinguish it from other similar profiles
  • Description: (Optional) Provide a description for the profile to further differentiate profiles
  • Platform: (Greyed out) Windows 10 and later
  1. On the Configuration settings page, as shown below in Figure 1, perform the following actions and click Next
  • Click Add settings and perform the following in Settings picker
    • Select Microsoft Edge as category
    • Select Configure list of force-installed Web Apps as setting
  • Configure the selected setting with the following values
    • Switch the slider with Configure list of force-installed Web Apps to Enabled
    • Provide with the sub-setting URLs for Web Apps to be silently installed (Device) the created JSON-content
  1. On the Scope tags page, configure the required scope tags and click Next
  2. On the Assignments page, configure the assignment and click Next
  3. On the Review + create page, verify the configuration and click Create

User experience with the installed Web Apps

When looking at the user experience with the configuredĀ Microsoft Edge browser, the user will immediately notice the automatically installed apps. The provided example configuration will create icons for the different apps on the Desktop (as shown below in Figure 2) and the apps will automatically be added to the Start menu. The regular website will show without a real icon, with the name of petervanderwoude.nl, and will open in a new window when started. The actual PWA might initial show without a real icon, with the name of Outlook, and will open in a new window when started. After a while the PWA will show with a real icon and with the name of Outlook (PWA). The installed websites will show as apps in Microsoft Edge.

More information

For more information about configuring the Google Chrome browser on Windows devices, refer to the following docs.

4 thoughts on “Easily installing Progressive Web Apps”

  1. Great post as always Peter – well done!
    From the above, it does not appear there is a configuration option to pin a PWA to the taskbar – do you know of any creative ways around this limitation?
    Cheers!
    Sam

    Reply
    • Thank you Sam!
      I don’t have a nice method. The configuration method of this post doesn’t provide the option to pin to the taskbar. That means that you would have to create a customized Taskbar to achieve your goal.
      Regards, Peter

      Reply
  2. Hello Peter,
    Do you know that we can add this to the XML for the startmenu and the taskbar. Is that possible?

    Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.