Skip to content

Add drop-in PWA install component with custom trigger and iOS fallback#48

Open
sbsoftware-agent wants to merge 6 commits intoreleases/v0.31.0from
feature/CR-126
Open

Add drop-in PWA install component with custom trigger and iOS fallback#48
sbsoftware-agent wants to merge 6 commits intoreleases/v0.31.0from
feature/CR-126

Conversation

@sbsoftware-agent
Copy link
Collaborator

Summary

This adds a pluggable Crumble::PwaInstallComponent that works by calling #to_html from a consuming layout and requires no extra integration.

Changes

  • Added src/pwa_install_component.cr:
  • ToHtml markup for a fixed-bottom mobile install CTA and iOS fallback instruction panel.
  • Inline component CSS for required slim full-width bottom placement, slight yellow container, and grey button styling.
  • JS::Code behavior fragment that:
  • captures beforeinstallprompt and defers native prompting,
  • triggers prompt() only from the custom button,
  • clears deferred prompt state after user choice,
  • handles accepted/dismissed outcomes,
  • hides UI in standalone/installed mode,
  • keeps CTA available on iOS Safari and opens fallback instructions there,
  • supports close button and tap-outside-to-close for the fallback panel.
  • Updated src/crumble.cr to require the new component.
  • Added specs in spec/pwa_install_component_spec.cr covering:
  • drop-in rendering via a consuming layout calling #to_html,
  • deferred install prompt wiring and outcome handling,
  • standalone/mobile gating and iOS Safari fallback behavior.

Verification

  • CRYSTAL_CACHE_DIR=/tmp/crystal-cache-cr crystal spec

Copy link
Owner

@sbsoftware sbsoftware left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use the js.cr DSL as much as possible, and only fall back to _literal_js for those instructions that aren't supported.
Also use the css.cr DSL with css_classes instead of custom attributes.

@sbsoftware-agent
Copy link
Collaborator Author

Implemented in commit f08d536.

Changes made:

  • Rewrote Crumble::PwaInstallComponent::Script to use js.cr DSL end-to-end (def_to_js with DSL control flow/callbacks), removing the previous large _literal_js block.
  • Replaced custom id-driven styling/hooks with css.cr classes:
    • added css_classes for container/button/panel/dialog/text/close button,
    • added PwaInstallComponent::Style < CSS::Stylesheet with rule/media DSL,
    • removed inline raw <style> CSS.
  • Updated template markup to use those CSS classes and include Style + Script as component children.
  • Updated spec/pwa_install_component_spec.cr to validate class-based markup, stylesheet asset output, and updated JS emission.

Verification:

  • CRYSTAL_CACHE_DIR=/tmp/crystal-cache-cr crystal spec spec/pwa_install_component_spec.cr
  • CRYSTAL_CACHE_DIR=/tmp/crystal-cache-cr crystal spec

Both passed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants