Outdated Browser Bundle Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require chaplean/outdated-browser-bundle
   

   Add the bundle to AppKernel.php under registerBundles():

   new Chaplean\Bundle\OutdatedBrowserBundle\ChapleanOutdatedBrowserBundle(),
   

2. Basic Configuration: Add minimal config in config/packages/chaplean_outdated_browser.yaml (Symfony 5+) or app/config/config.yml (older):

   chaplean_outdated_browser:
       lower_than: "IE11"  # Defaults to "transform" (IE10) if omitted
   

3. First Use Case: Include the script in your base layout (e.g., base.html.twig):

   <script src="{{ path('chaplean-outdated-browser.js') }}"></script>
   

   The bundle will now detect outdated browsers and display a warning if the user's browser is below the configured threshold.

Implementation Patterns

Workflows

1. Customizing the Warning Message: Override the default Twig template (outdated.html.twig) by copying it to:

   templates/bundles/ChapleanOutdatedBrowser/Template/outdated.html.twig
   

   Customize the HTML/CSS (e.g., add your brand colors or a custom message).

2. Dynamic Browser Detection: Use the bundle’s JavaScript to trigger custom logic. Example:

   document.addEventListener('outdatedBrowserDetected', function(e) {
       console.log('Outdated browser detected:', e.detail.browser);
       // Redirect or show a modal
   });
   

3. Conditional Loading: Load the script only on specific routes by adding a Twig condition:

   {% if app.request.get('_route') != 'admin_dashboard' %}
       <script src="{{ path('chaplean-outdated-browser.js') }}"></script>
   {% endif %}
   

4. Integration with Frontend Frameworks: For Vue/React, mount the script in main.js/App.vue and listen for the outdatedBrowserDetected event to show a custom component.

Integration Tips

• Symfony Flex: If using Symfony 5+, ensure the bundle is auto-loaded via config/bundles.php.
• Asset Management: For Symfony 5+, update config/packages/assetic.yaml to include the bundle’s assets:

  assetic:
      bundles: ['ChapleanOutdatedBrowserBundle']
  

• Routing: Include the bundle’s routes in config/routes.yaml (Symfony 5+):

  chaplean_outdated_browser:
      resource: '@ChapleanOutdatedBrowserBundle/Resources/config/routing.yml'
  

Gotchas and Tips

Pitfalls

1. Outdated Symfony Versions: The bundle was last updated in 2019 and may not support Symfony 5+ out-of-the-box. Test thoroughly or fork the package for compatibility.

   • Fix: Override the Resources/config/routing.yml to use Symfony 5’s YAML syntax if needed.

2. JavaScript Conflicts: The bundle’s script may conflict with other libraries (e.g., jQuery-based ones) if not loaded last.

   • Fix: Ensure the script is loaded after other dependencies in your layout.

3. Missing Assets: If the JS/CSS files fail to load, verify:

   • The assetic bundle is properly configured.
   • The public/bundles/chapleanoutdatedbrowser/ directory exists (Symfony 4+ may require manual asset compilation).

4. False Positives: The lower_than option uses feature detection (e.g., transform). Modern browsers may pass these checks even if outdated.

   • Fix: Combine with user-agent checks or a CDN-based solution (e.g., BrowserStack’s outdated-browser).

Debugging

• Check Console Errors: Open DevTools (F12) to verify the script loads without errors. Common issues:

  • 404 on JS/CSS files → Asset paths are incorrect.
  • Uncaught ReferenceError → Script loaded out of order.

• Log Browser Data: Extend the Twig template to log detected browsers for debugging:

  {% if outdatedBrowser %}
      {{ dump(outdatedBrowser) }}  {# Debug browser object #}
  {% endif %}
  

Tips

1. Performance: Use the minified version (outdated-browser.min.js) in production to reduce payload.

2. A/B Testing: Randomly disable the warning for a subset of users to measure impact on conversions:

   {% if app.request.query.get('disable_outdated_browser') != 'true' %}
       <script src="{{ path('chaplean-outdated-browser.js') }}"></script>
   {% endif %}
   

3. Localization: Extend the Twig template to support multiple languages by passing a locale variable:

   {{ outdatedBrowser.message[app.request.locale] ?? outdatedBrowser.message }}
   

4. Fallback for No-JS: Provide a server-side check in PHP (e.g., via Browser component) for users with JS disabled:

   use Symfony\Component\HttpFoundation\Request;
   $browser = $request->headers->get('User-Agent');
   if (strpos($browser, 'MSIE') !== false) {
       // Show a fallback warning
   }