by Peter van der Woude
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 enhancedto 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 modecreate_desktop_shortcut– (Optional) This property can be used to specify that a desktop shortcuts must be createdfallback_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 configuringMicrosoft Edgeon Windows devices, the focus of the IT administrator can be on a single place: theSettings Catalog. Even though the settings are also available viaAdministrative Templates, theSettings Catalogis 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 theSettings Catalogprofile, with the required settings.
- Open theMicrosoft Endpoint Manager admin centerportal and navigate toDevices>Windows>Configuration profiles
- On theWindows| Configuration profilesblade, clickCreate profile
- On theCreate a profileblade, provide the following information and clickCreate
- Platform: SelectWindows 10 and laterto create a profile for Windows 10 devices
- Profile: SelectSettings catalogto select the required setting from the catalog
- On theBasicspage, provide the following information and clickNext
- 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
- On theConfiguration settingspage, as shown below in Figure 1, perform the following actions and clickNext
- ClickAdd settingsand perform the following inSettings picker
- SelectMicrosoft Edgeas category
- SelectConfigure list of force-installed Web Appsas setting
- Configure the selected setting with the following values
- Switch the slider with Configure list of force-installed Web Apps toEnabled
- Provide with the sub-settingURLs for Web Apps to be silently installed (Device)the created JSON-content
- On theScope tagspage, configure the required scope tags and clickNext
- On theAssignmentspage, configure the assignment and clickNext
- On theReview + createpage, verify the configuration and clickCreate
User experience with the installed Web Apps
When looking at the user experience with the configuredMicrosoft 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.
