Development for PWA in Firefox has been stagnant at best for a while now, and the forever incomplete feature seems to never Press J to jump to the feed. Press question mark to learn the rest of the keyboard shortcuts. The Firefox PWA implementation is just full of bugs. For example, I'm trying to use the Google Maps PWA but it won't load unless I also open the full Google Maps website in Firefox at the same time. I was also trying to use the Uber PWA but it can't access location services even if I grant it the permission. Firefox continues to support PWAs in its Android browser, but Mozilla has no intentions to bring PWA support to the desktop. The company said it didn't feel like the feature added value to the.
This list describe where PWAs can be installed (create an icon in the OS with a standalone experience at least)
Android #
- Browser Installation－WebAPK
- Google Chrome: Android 4.4+ with Play Services
- Samsung Internet: only Samsung devices
- Browser Installation－Shortcut
- Firefox
- Microsoft Edge
- UCWeb
- Opera
- Baidu
- Brave
- Huawei Browser
- Google Play Store
- Trusted Web Activities (TWA)
- Google Chrome
- Microsoft Edge
- Opera
- Web Views (not recommended)
- Trusted Web Activities (TWA)
- Samsung Galaxy Store (manual submission and PWA launcher submission)
- Enterprise
- Managed Play iframe
- 🛑 No support
- Facebook Mobile Browser
- Web Views
On Android, browsers won't be able to install PWAs if the device is in kiosk mode or using some alternative home screen launchers. On those cases, Add to homescreen menu item is not available or if it's available, the icon is never installed
iOS and iPadOS #
- Browser Installation－WebClip shortcut
- Safari
- AppStore
- WKWebView (Service Workers only with App-Bound Domains from 14, limitations apply)
- Enterprise
- Mobile Configuration Distribution with WebClips
- 🛑 No support
- Facebook Mobile Browser
- Google Chrome
- Firefox
- Microsoft Edge
- Brave
- WebViews
Windows Platforms #
Windows 10 #
- Browser Installation
- Google Chrome
- Microsoft Edge (chromium version)
- 🛑 No support
- Internet Explorer
- Firefox
- Microsoft Store
- APPX (EdgeHTML version)
- WebView2 (Chromium version)
Windows 10X (future platform, rumours) #
- Browser Installation
- Microsoft Edge
- Microsoft Store
- APPX
Windows 7 #
- Browser Installation
- Google Chrome
- Microsoft Edge
- 🛑 No support
- Internet Explorer
- Firefox
Windows 8 #
- Browser Installation
- Google Chrome
- Microsoft Edge
- 🛑 No support
- Internet Explorer
- Firefox
- Store Apps
macOS #
- Browser Installation
- Google Chrome
- Microsoft Edge
- AppStore
- WKWebView (Service Workers only with App-Bound Domains from Big Sur v11)
- 🛑 No support
- Safari
- Firefox
Linux #
- Browser Installation
- Google Chrome (64 bits only)
- 🛑 No support
- Firefox
ChromeOS #
- Browser Installation
- Google Play Store with Trusted Web Activities (TWA)
XBox One #
- Microsoft Store
- APPX
kaiOS #
- Stores
- kaiOS Store
- JioPhone Store
- 🛑 No support
- Browser
🛑 No support #
- Smart TVs Stores
- Apple Watch Browser
- PlayStation
- Oculus Browser
- Tesla Browser
This note is mantained by Maximiliano FirtmanTwitter @firtAboutNewsletter
If you liked this newsletter and the content in this website, you can support me by a PayPal donation, or buying me a coffee. Thanks!
Making your Progressive Web App (PWA) easier to use will increase adoption and provide incentive to install. Shortcuts are a way to surface common activities to the homescreen and desktop.
Many native applications have enjoyed the ability to define shortcut actions to allow users to create new records, search a database and more. Until now this has been reserved to native apps.
Recent versions of Chrome and Edge have added support for shortcuts. These are defined in the web manifest file.
A user must install or add your PWA to their homescreen to enable this feature. That's because shortcuts are available through a context menu triggered from the PWA's icon.
Shortcuts are accessible through long press on phones and right-clicking on desktop. When a user does these actions on a PWA icon with shortcuts defined the user will see the links as an option on the context menu.
A shortcut link is a direct link to a URL. The URL can be any page in the site and include queryString parameters.
Pwa Builder Microsoft
How to Add Shortcuts to Your PWA
It is easy to add shortcuts to your progressive web application. They are defined in a new manifest property, 'shortcuts'.
This property is an array of shortcut objects. You can define one or more shortcuts. Shortcuts should be listed in order of importance as the browser determines which shortcuts will be offered.
Each shortcut has a name, an optional description, a target URL and an array of icons. The icons follow the same object structure as the PWA icons. Minitool.
The shortcut icons do not have to be the same icons used for the homescreen icon. They can be any icon you want. I do recommend using a maskable icon to get the best effect. You should also craft the icon to convey the shortcut's action.
As you can see in the example Twitter shortcut icon it conveys the concept of writing a new tweet visually.
The new shortcut property has been added to the web manifest specification.
There is no explicit limit to the number of shortcuts a PWA can define, it is left to the browser to determine how many to display. This is why you need to list shortcuts in order of importance.
Right now, I would recommend keeping shortcuts to 4 or less as this feature is rolling out.
It is also up to the browser to determine the appropriate way to display shortcuts. The specifications says the browser should display the shortcut list in a way consistent with the platform (operating system) expectations.
This is not the first time this sort of feature has been available to web sites. Internet Explorer had support for shortcuts or jump links before it was deprecated several years ago. Unfortunately very few sites leveraged this capability at the time.
Hopefully more sites will leverage PWA shortcuts.
A progressive web application needs to be added to the homescreen or installed before shortcuts are enabled. If there is no icon on the homescreen, start menu, desktop or taskbar there is no way to display shortcuts.
I think this feature can be used as an incentive to tease users to install a PWA to access these conviences. It is up to you, the site owner to determine how to promote this feature to the user.
You should also highlight this feature when a user installs your PWA so they are aware of this capability.
How to Enable PWA Shortcuts
As I am writing this article PWA Shortcuts are not generally available. Only Edge and Chrome development channel and canary versions offer shortcuts. But you also need to enable the feature via a flag.
Firefox Pwa Windows
To access the flag open edge://flags or chrome://flags (of course match the browser) and then search for shortcut. You will see the feature listed.
Select 'enable' from the corresponding dropdown. Mcafee livesafe renewal. You should then see a button to restart the browser. Click or press the button to restart the browser and you should fine support for shortcuts enabled.
If you have an installed PWA and add shortcuts to the web manifest it may take a few days for the update to matriculate to the installed instance. I am told it will eventually update as the latest web manifest file is ingested and processed.
What Sort of Targets Should Shortcuts Open?
Firefox Pwa Windows
This depends on your PWA. Each one has its own personality and tasks and resources. First prioritize what content or actions are common entry points to yout application.
Twitter added shortcuts to create a new tweet and one for a direct message. These are both common activities users make when they open the application. The shortcuts mean users can now bypass the main news feed and directly access the form to perform these actions.
If you have multi-media, like a Spotify or a podcast application, you may want to add a shortcut to continue playing where the user last stopped.
On this site I am adding shortcuts to my main blog index and the contact form. Not really the sexiest shortcuts, but demonstrate the feature for now.
A good rule to determine the best PWA shortcuts is to review what features to you prioritize and make accessible in your application. If you have a link in an app bar or common navigation, then it might be a good candidate for a shortcut.
PWA Shortcut Browser Support
At the moment just Edge and Chrome support PWA shortcuts. At this time I have not discovered any signals FireFox, Opera, Samsung Internet or Safari are offering or have shortcuts on their roadmaps.
This does not surprise me as these other browsers are often behind the two market leaders. It also does not mean they will not ship support in the future.
Action Items
If you want a hook to encourage more brand engagement and homescreen installations, shortcuts are another benefit to offer users.
Linux Pearl-mate Windows 7
They are easy to add to your website and they trigger more app-like functionality.
🛑 No support #
- Smart TVs Stores
- Apple Watch Browser
- PlayStation
- Oculus Browser
- Tesla Browser
This note is mantained by Maximiliano FirtmanTwitter @firtAboutNewsletter
If you liked this newsletter and the content in this website, you can support me by a PayPal donation, or buying me a coffee. Thanks!
Making your Progressive Web App (PWA) easier to use will increase adoption and provide incentive to install. Shortcuts are a way to surface common activities to the homescreen and desktop.
Many native applications have enjoyed the ability to define shortcut actions to allow users to create new records, search a database and more. Until now this has been reserved to native apps.
Recent versions of Chrome and Edge have added support for shortcuts. These are defined in the web manifest file.
A user must install or add your PWA to their homescreen to enable this feature. That's because shortcuts are available through a context menu triggered from the PWA's icon.
Shortcuts are accessible through long press on phones and right-clicking on desktop. When a user does these actions on a PWA icon with shortcuts defined the user will see the links as an option on the context menu.
A shortcut link is a direct link to a URL. The URL can be any page in the site and include queryString parameters.
Pwa Builder Microsoft
How to Add Shortcuts to Your PWA
It is easy to add shortcuts to your progressive web application. They are defined in a new manifest property, 'shortcuts'.
This property is an array of shortcut objects. You can define one or more shortcuts. Shortcuts should be listed in order of importance as the browser determines which shortcuts will be offered.
Each shortcut has a name, an optional description, a target URL and an array of icons. The icons follow the same object structure as the PWA icons. Minitool.
The shortcut icons do not have to be the same icons used for the homescreen icon. They can be any icon you want. I do recommend using a maskable icon to get the best effect. You should also craft the icon to convey the shortcut's action.
As you can see in the example Twitter shortcut icon it conveys the concept of writing a new tweet visually.
The new shortcut property has been added to the web manifest specification.
There is no explicit limit to the number of shortcuts a PWA can define, it is left to the browser to determine how many to display. This is why you need to list shortcuts in order of importance.
Right now, I would recommend keeping shortcuts to 4 or less as this feature is rolling out.
It is also up to the browser to determine the appropriate way to display shortcuts. The specifications says the browser should display the shortcut list in a way consistent with the platform (operating system) expectations.
This is not the first time this sort of feature has been available to web sites. Internet Explorer had support for shortcuts or jump links before it was deprecated several years ago. Unfortunately very few sites leveraged this capability at the time.
Hopefully more sites will leverage PWA shortcuts.
A progressive web application needs to be added to the homescreen or installed before shortcuts are enabled. If there is no icon on the homescreen, start menu, desktop or taskbar there is no way to display shortcuts.
I think this feature can be used as an incentive to tease users to install a PWA to access these conviences. It is up to you, the site owner to determine how to promote this feature to the user.
You should also highlight this feature when a user installs your PWA so they are aware of this capability.
How to Enable PWA Shortcuts
As I am writing this article PWA Shortcuts are not generally available. Only Edge and Chrome development channel and canary versions offer shortcuts. But you also need to enable the feature via a flag.
Firefox Pwa Windows
To access the flag open edge://flags or chrome://flags (of course match the browser) and then search for shortcut. You will see the feature listed.
Select 'enable' from the corresponding dropdown. Mcafee livesafe renewal. You should then see a button to restart the browser. Click or press the button to restart the browser and you should fine support for shortcuts enabled.
If you have an installed PWA and add shortcuts to the web manifest it may take a few days for the update to matriculate to the installed instance. I am told it will eventually update as the latest web manifest file is ingested and processed.
What Sort of Targets Should Shortcuts Open?
Firefox Pwa Windows
This depends on your PWA. Each one has its own personality and tasks and resources. First prioritize what content or actions are common entry points to yout application.
Twitter added shortcuts to create a new tweet and one for a direct message. These are both common activities users make when they open the application. The shortcuts mean users can now bypass the main news feed and directly access the form to perform these actions.
If you have multi-media, like a Spotify or a podcast application, you may want to add a shortcut to continue playing where the user last stopped.
On this site I am adding shortcuts to my main blog index and the contact form. Not really the sexiest shortcuts, but demonstrate the feature for now.
A good rule to determine the best PWA shortcuts is to review what features to you prioritize and make accessible in your application. If you have a link in an app bar or common navigation, then it might be a good candidate for a shortcut.
PWA Shortcut Browser Support
At the moment just Edge and Chrome support PWA shortcuts. At this time I have not discovered any signals FireFox, Opera, Samsung Internet or Safari are offering or have shortcuts on their roadmaps.
This does not surprise me as these other browsers are often behind the two market leaders. It also does not mean they will not ship support in the future.
Action Items
If you want a hook to encourage more brand engagement and homescreen installations, shortcuts are another benefit to offer users.
Linux Pearl-mate Windows 7
They are easy to add to your website and they trigger more app-like functionality.
We use cookies to give you the best experience possible. By continuing, we'll assume you're cool with our cookie policy.
Install Love2Dev for quick, easy access from your homescreen or start menu.
