Menu
Home
Forums
New posts
Search forums
What's new
New posts
New media
New media comments
New resources
New profile posts
Latest activity
Media
New media
New comments
Search media
Resources
Latest reviews
Search resources
Members
Current visitors
New profile posts
Search profile posts
Log in
Register
What's new
Search
Search
Search titles only
By:
New posts
Search forums
Menu
Log in
Register
Install the app
Install
Home
Forums
Official forums
Have you seen...?
Progressive web app
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Reply to thread
Message
<blockquote data-quote="XenForo" data-source="post: 1432722" data-attributes="member: 1"><p>[ATTACH=full]227267[/ATTACH]Mobile first. We hear it again and again, and with over half of all web traffic coming from mobile devices, it's more important than ever to provide your mobile visitors with a great experience.</p><p></p><p>Of course, XenForo 2 is built on a fully responsive design that gracefully adapts to any display size and makes using XenForo a pleasure on all devices, but now we're taking it a step further by enabling any XenForo site to become a progressive web app.</p><h2><span style="font-size: 22px"><strong>Progressive web what?</strong></span></h2><p>Okay, let's back up a little. Imagine a technology that allows a web site 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.</p><p></p><p>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. <a href="https://xenforo.com/community/threads/push-notifications.154592/">Push notifications</a>, a feature introduced in XenForo 2.1, are a popular example of one such standard. In XenForo 2.2, we're expanding our support for these standards by making XenForo <strong>installable</strong>, implementing more graceful offline handling, and adding support for the badging API.</p><h3><span style="font-size: 22px"><strong>Setting it up</strong></span></h3><p>It's important to note that, like push notifications, making full use of these features will require a few extra steps to set things up.</p><p></p><p>Additionally, as with push notifications, these features are only available on devices and browsers that fully support PWAs. 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 <strong>not</strong> support installation or badging (more on that below) at this time.</p><p></p><p>We would encourage you to make your frustrations known in public by applying virtual tar and feathers to Apple employees online until they relent and get their act together... or at least voice your support for these standards by continuing to reach out to <a href="https://twitter.com/webkit">@webkit on Twitter</a> or <a href="https://lists.webkit.org/mailman/listinfo/webkit-help">the webkit-help mailing list</a>. Officially, the best place to communicate with Apple is via their <a href="https://www.apple.com/feedback/safari.html">product feedback channels</a>, and presumably they won't be able to continue to ignore a deluge of feature requests for the same thing... <img class="smilie smilie--emoji" loading="lazy" alt="🤔" title="Thinking face :thinking:" src="https://cdn.jsdelivr.net/joypixels/assets/6.0/png/unicode/64/1f914.png" data-shortname=":thinking:" /></p><h3><strong><span style="font-size: 22px">Requirements</span></strong></h3><p>To make full use of these features...</p><ul> <li data-xf-list-type="ul">Your XenForo installation must be accessed over SSL / HTTPS</li> <li data-xf-list-type="ul">Your site must have a relatively short title of 12 characters or fewer</li> <li data-xf-list-type="ul">You must publish a pair of square icons for your site, one at 192px and another at 512px.</li> </ul><p></p><p style="text-align: center">[ATTACH=full]227261[/ATTACH]</p> <p style="text-align: center">[ATTACH=full]227260[/ATTACH]</p><h3><span style="font-size: 22px"><strong>What do PWAs look like?</strong></span></h3><p>If your site meets the requirements, your visitors will automatically be given the option to install your 'app' on their device.</p><p></p><p>The precise details of the interface and the circumstances permitting installation can vary by browser and in some cases can depend on the degree of interaction with your site a user has had.</p><p></p><p>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.</p><p></p><p style="text-align: center">[ATTACH=full]227266[/ATTACH] [ATTACH=full]227267[/ATTACH]</p> <p style="text-align: center">[ATTACH=full]227262[/ATTACH]</p><p></p><p>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.</p><p></p><p style="text-align: center">[ATTACH=full]227268[/ATTACH] [ATTACH=full]227272[/ATTACH]</p><p></p><p>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.</p><p></p><p style="text-align: center">[ATTACH=full]227269[/ATTACH]</p><p></p><p>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.</p><p></p><p style="text-align: center">[ATTACH=full]227270[/ATTACH] [ATTACH=full]227263[/ATTACH]</p><p></p><p>If a user tries to open or navigate the app without a proper network connection, we display a simple offline message.</p><p></p><p style="text-align: center">[ATTACH=full]227271[/ATTACH] [ATTACH=full]227264[/ATTACH]</p><p></p><p>Chrome-based apps recently introduced support for application badging, which allows the app to indicate unread messages or alerts directly on its icon.</p><p>We are hopeful more browsers will support the badging API in the future.</p><p></p><p style="text-align: center">[ATTACH=full]227273[/ATTACH] [ATTACH=full]227265[/ATTACH]</p><h3><span style="font-size: 22px"><strong>Looking toward the future</strong></span></h3><p>The PWA specification and standards are constantly evolving. We will continue to monitor them as time goes on in order to always provide the best possible experience on all devices.</p></blockquote><p></p>
[QUOTE="XenForo, post: 1432722, member: 1"] [ATTACH type="full" width="0px" alt="Mobile app installation"]227267[/ATTACH]Mobile first. We hear it again and again, and with over half of all web traffic coming from mobile devices, it's more important than ever to provide your mobile visitors with a great experience. Of course, XenForo 2 is built on a fully responsive design that gracefully adapts to any display size and makes using XenForo a pleasure on all devices, but now we're taking it a step further by enabling any XenForo site to become a progressive web app. [HEADING=1][SIZE=6][B]Progressive web what?[/B][/SIZE][/HEADING] Okay, let's back up a little. Imagine a technology that allows a web site 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. [URL='https://xenforo.com/community/threads/push-notifications.154592/']Push notifications[/URL], a feature introduced in XenForo 2.1, are a popular example of one such standard. In XenForo 2.2, we're expanding our support for these standards by making XenForo [B]installable[/B], implementing more graceful offline handling, and adding support for the badging API. [HEADING=2][SIZE=6][B]Setting it up[/B][/SIZE][/HEADING] It's important to note that, like push notifications, making full use of these features will require a few extra steps to set things up. Additionally, as with push notifications, these features are only available on devices and browsers that fully support PWAs. 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 [B]not[/B] support installation or badging (more on that below) at this time. We would encourage you to make your frustrations known in public by applying virtual tar and feathers to Apple employees online until they relent and get their act together... or at least voice your support for these standards by continuing to reach out to [URL='https://twitter.com/webkit']@webkit on Twitter[/URL] or [URL='https://lists.webkit.org/mailman/listinfo/webkit-help']the webkit-help mailing list[/URL]. Officially, the best place to communicate with Apple is via their [URL='https://www.apple.com/feedback/safari.html']product feedback channels[/URL], and presumably they won't be able to continue to ignore a deluge of feature requests for the same thing... 🤔 [HEADING=2][B][SIZE=6]Requirements[/SIZE][/B][/HEADING] To make full use of these features... [LIST] [*]Your XenForo installation must be accessed over SSL / HTTPS [*]Your site must have a relatively short title of 12 characters or fewer [*]You must publish a pair of square icons for your site, one at 192px and another at 512px. [/LIST] [CENTER][ATTACH type="full" width="640px" alt="Setting a short title"]227261[/ATTACH] [ATTACH type="full" width="640px" alt="Publishing a pair of icons"]227260[/ATTACH][/CENTER] [HEADING=2][SIZE=6][B]What do PWAs look like?[/B][/SIZE][/HEADING] If your site meets the requirements, your visitors will automatically be given the option to install your 'app' on their device. The precise details of the interface and the circumstances permitting installation can vary by browser and in some cases can depend on the degree of interaction with your site a user has had. 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. [CENTER][ATTACH type="full" height="400px" alt="Mobile app install banner"]227266[/ATTACH] [ATTACH type="full" height="400px" alt="Mobile app installation"]227267[/ATTACH] [ATTACH type="full" height="400px" alt="Desktop app installation"]227262[/ATTACH][/CENTER] 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. [CENTER][ATTACH type="full" height="400px" alt="Mobile app home screen"]227268[/ATTACH] [ATTACH type="full" height="400px" alt="Desktop app home screen"]227272[/ATTACH][/CENTER] 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. [CENTER][ATTACH type="full" height="400px" alt="Mobile app splash screen"]227269[/ATTACH][/CENTER] 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. [CENTER][ATTACH type="full" height="400px" alt="Mobile app"]227270[/ATTACH] [ATTACH type="full" height="400px" alt="Desktop app"]227263[/ATTACH][/CENTER] If a user tries to open or navigate the app without a proper network connection, we display a simple offline message. [CENTER][ATTACH type="full" height="400px" alt="Mobile app offline page"]227271[/ATTACH] [ATTACH type="full" height="400px" alt="Desktop app offline page"]227264[/ATTACH][/CENTER] 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. [CENTER][ATTACH type="full" alt="macos-badge.png"]227273[/ATTACH] [ATTACH type="full" width="196px" alt="Desktop app badging (Windows)"]227265[/ATTACH][/CENTER] [HEADING=2][SIZE=6][B]Looking toward the future[/B][/SIZE][/HEADING] The PWA specification and standards are constantly evolving. We will continue to monitor them as time goes on in order to always provide the best possible experience on all devices. [/QUOTE]
Insert quotes…
Verification
Post reply
Home
Forums
Official forums
Have you seen...?
Progressive web app
This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
By continuing to use this site, you are consenting to our use of cookies.
Accept
Learn more…
Top