G
Graham Smith
Guest
Much of the traffic that visits the VOC's forum website comes from mobile devices, so it's more important than ever that we provide our mobile visitors with a great experience.
Of course, the forum software that we use is built on a fully-responsive design that gracefully adapts to any display size and makes viewing our forum a pleasure on all devices, but now we're taking it a step further by enabling our forum site to become a progressive web app.
Progressive Web What?
Okay, let's back up a little. Imagine a technology that allows a website to appear and behave like an 'app' without having to produce native code for each platform, or go through any vendor's App Store equivalent.
Progressive Web Apps, or PWAs, aim to bridge the gap between websites and native applications on both mobile and desktop devices using a series of emerging web standards. Push notifications are a popular example of one such standard. In the latest version of the forum software that we're running, we're expanding our support for these standards by making the forum installable, implementing more graceful offline handling, and adding support for the badging API.
I've already done the behind the scenes work, and our forum is ready to go. Additionally, as with push notifications, these features are only available on devices and browsers that fully support PWAs.
However, would you care to take a guess as to what the most notable exceptions might be? As you may have suspected, once again Safari on macOS and any iOS-based browsers are the culprits due to Apple's ongoing failure to implement industry standards. While Safari on both macOS and iOS does support graceful offline handling, it does not support installation or badging at this time.
I've personally been using Apple products professionally since the very early 1990s and am a fan, but they really do need a kick up the a***e regarding this.
OK, so if you're using an Android-based mobile device, these are the instructions…
When browsing with Chrome on desktop or Android, the app can be installed via the address bar on both mobile and desktop devices. On supported mobile devices, we also display a conspicuous yet unobtrusive banner in the off-canvas menu.
Once the app is installed, it is readily available in exactly the same way as a native app. On mobile devices, that means it can be opened via an icon on the home screen. On desktop devices, it can be opened by searching your system or even pinning the app to your taskbar or dock.
Some devices will display a splash screen while the app is being loaded. The splash screen is automatically generated from the icons and background color of your style.
For most devices, we set the app to display a minimal interface. The elements of this interface also vary by browser, but most importantly include navigation controls. For Android devices running Chrome, we are able to use the native pull-to-refresh and back-button navigation controls, so we do without any additional interface.
If a user tries to open or navigate the app without a proper network connection, we display a simple offline message.
Chrome-based apps recently introduced support for application badging, which allows the app to indicate unread messages or alerts directly on its icon.
We are hopeful more browsers will support the badging API in the future.
Of course, the forum software that we use is built on a fully-responsive design that gracefully adapts to any display size and makes viewing our forum a pleasure on all devices, but now we're taking it a step further by enabling our forum site to become a progressive web app.
Progressive Web What?
Okay, let's back up a little. Imagine a technology that allows a website to appear and behave like an 'app' without having to produce native code for each platform, or go through any vendor's App Store equivalent.
Progressive Web Apps, or PWAs, aim to bridge the gap between websites and native applications on both mobile and desktop devices using a series of emerging web standards. Push notifications are a popular example of one such standard. In the latest version of the forum software that we're running, we're expanding our support for these standards by making the forum installable, implementing more graceful offline handling, and adding support for the badging API.
I've already done the behind the scenes work, and our forum is ready to go. Additionally, as with push notifications, these features are only available on devices and browsers that fully support PWAs.
However, would you care to take a guess as to what the most notable exceptions might be? As you may have suspected, once again Safari on macOS and any iOS-based browsers are the culprits due to Apple's ongoing failure to implement industry standards. While Safari on both macOS and iOS does support graceful offline handling, it does not support installation or badging at this time.
I've personally been using Apple products professionally since the very early 1990s and am a fan, but they really do need a kick up the a***e regarding this.
OK, so if you're using an Android-based mobile device, these are the instructions…
When browsing with Chrome on desktop or Android, the app can be installed via the address bar on both mobile and desktop devices. On supported mobile devices, we also display a conspicuous yet unobtrusive banner in the off-canvas menu.
Once the app is installed, it is readily available in exactly the same way as a native app. On mobile devices, that means it can be opened via an icon on the home screen. On desktop devices, it can be opened by searching your system or even pinning the app to your taskbar or dock.
Some devices will display a splash screen while the app is being loaded. The splash screen is automatically generated from the icons and background color of your style.
For most devices, we set the app to display a minimal interface. The elements of this interface also vary by browser, but most importantly include navigation controls. For Android devices running Chrome, we are able to use the native pull-to-refresh and back-button navigation controls, so we do without any additional interface.
If a user tries to open or navigate the app without a proper network connection, we display a simple offline message.
Chrome-based apps recently introduced support for application badging, which allows the app to indicate unread messages or alerts directly on its icon.
We are hopeful more browsers will support the badging API in the future.
