add to home screen dialog on mobile

[deleted]

add to home screen has one additional requirement: the content must be server over https.

create a manifest.json file in flarum root folder, insert to codes save it.

{ "short_name": "yoursite", "name": "your site app name", "icons": [ { "src": "https://yoursite.com/icon-144x144.png", "type": "image/png", "sizes": "144x144" } ], "background_color": "#FFFFFF", "theme_color": "#67BCFF", "display": "standalone", "start_url": "/?utm_source=homescreen"

create service-worker.js file in flarum root folder, insert to codes save it.

self.addEventListener('fetch', function(event) {});

go to /vendor/flarum/core/views/frontend/

open app.blade.php

add to code: <link rel="manifest" href="/manifest.json"> below the <head> tag.

add to code:

<script> if ("serviceWorker" in navigator) { window.addEventListener("load", function () { navigator.serviceWorker.register("/service-worker.js"); }); } </script>

above the </body> tag.

articles:
https://developers.google.com/web/fundamentals/app-install-banners/
https://codelabs.developers.google.com/codelabs/add-to-home-screen/

tankerkiller125

The header/footer part can be done in the Administrator dashboard under appearance. No need to edit the actual vendor folder (which is highly frowned upon and can break things)

Notably if you go to Administration -> Appearance -> Custom Footer or Custom Header you can add the required javascript and meta tag.

[deleted]

tankerkiller125 everyone is free to try the way deems appropriate. that's my way. also i didn't test the way you mentioned.

jordanjay29

[deleted] The method that tankerkiller125 suggests will also be preserved through updates and backup/restorations of the database, while your method will not. Flarum treats the vendor folder as completely disposable, as it can be easily restored with composer, so any lasting changes should be made via the admin panel (as Tankerkiller125 describes) or an extension.