How to enable fullscreen prototype previews with Framer (Sites)

readme.md

1. In Framer, create a new Code Component file called manifest.json
2. Copy/paste the code from https://gist.githubusercontent.com/maxsteenbergen/827fb731b5745e761d0321fffe2ae057
3. Update the keys in the manifest to match your project
4. Take special care to update the "start_url" and "scope" to match your published site's url
5. [OPTIONAL] Upload an app icon somewhere, or copy your site's favicon url
6. [OPTIONAL] Update the icons array in the manifest with the app icon url(s)
7. Create a new Code Override file
8. Copy the pwa_override.tsx file from this Gist, and paste it in your newly created Override file.
9. Go back to the manifest file in Framer's code editor
10. Use the Handshake button in the top right of the manifest's code editor to get the manifest's url
11. Open the link in a browser: it will redirect to another page with an error. The new page should have an url similar to https://framerusercontent.com/modules/<SOME_CHARACTERS>/<SOME_MORE_CHARACTERS>/manifest.js
12. Edit the redirected url to end in .tsx instead of .js, and visit that url
13. If that loads your manifest proper, great! Copy the url.
14. In the override file, update the link href attribute in this override with the manifest url you just copied from the browser
15. [OPTIONAL] In the override file, update the appleIcon href attribute in this override with the app icon url
16. In Framer's UI, apply the override to the Web Page you want to use as entrypoint for your prototype (usually your site's homepage)
17. Add a Prototype Component to the Web Page, and point it to your prototype
18. Publish the Site
19. Visit the site on your mobile device with either Safari on iOS or Chrome on Android — no other browser
20. Save the site to your homescreen
21. The site should now be installed on your phone as a proper app, and you should be able to fully test the prototype as if it were a real app

Demo of the result: https://fullscreen-prototype.framer.website

framerapp.webmanifest

{
    "name": "Framer Fullscreen Prototype",
    "short_name": "Framer",
    "description": "A fullscreen Framer prototype as PWA",
    "start_url": "https://fullscreen-prototype.framer.website",
    "scope": "https://fullscreen-prototype.framer.website",
    "display": "fullscreen",
    "orientation": "any",
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "icons": [{
        "src": "https://framerusercontent.com/images/l8xYBNx4GH5B0i987yubofZUKJ4.png",
        "sizes": "64x64",
        "type": "image/png",
        "purpose": "any"
    },
    {
        "src": "https://framerusercontent.com/images/l8xYBNx4GH5B0i987yubofZUKJ4.png",
        "sizes": "144x144",
        "type": "image/png",
        "purpose": "any"
    },
    {
        "src": "https://framerusercontent.com/images/l8xYBNx4GH5B0i987yubofZUKJ4.png",
        "sizes": "512x512",
        "type": "image/png",
        "purpose": "any"
    }
    ]
}

pwa_override.tsx

import type { ComponentType } from "react"

export function asPWA(Component): ComponentType {
    // prettier-ignore
    return (props) => {
        const meta = document.createElement( "meta" )
        meta.setAttribute( "name", "theme-color" )
        meta.setAttribute( "content", "#ffffff" )
        document.head.appendChild( meta )

        const appleIcon = document.createElement( "link" )
        appleIcon.setAttribute( "rel", "apple-touch-icon" )
        appleIcon.setAttribute( "sizes", "144x144" )
        appleIcon.setAttribute( "href", "https://framerusercontent.com/images/l8xYBNx4GH5B0i987yubofZUKJ4.png" )
        document.head.appendChild( appleIcon )

        const link = document.createElement( "link" )
        link.setAttribute( "rel", "manifest" )
        link.setAttribute( "href", "https://gist.githubusercontent.com/maxsteenbergen/827fb731b5745e761d0321fffe2ae057/raw/framerapp.webmanifest" )
        document.head.appendChild( link )
        
        return <Component {...props} style={{ ...props.style, touchAction: "none" }}/>
    }
}