Comment on page
Adding Homescreen Support to an App
Preparing your app for deployment on Homescreen should not require many changes if the app is already designed for decentralized usage.
Video Tutorial for Adding Homescreen to an App. Demo starts at 11:15.
Build your web app locally and upload it as a directory to Skynet. See the final part of the Introduction Workshop for more info. Confirm behavior and links work as they should. (See video above at 14:25)
We recommend avoiding usage of centralized APIs or other resources that lack long-term support for users needing to access back-end data with older versions of a front-end.
Our Deploy-to-Skynet Github Action is the easiest way to automate updating your resolver skylink on every commit to your Github repo. (See video above at 18:47.) You'll want to update your resolver skylink on each new deployment, and Resolver Skylinks shows more tooling for creating and updating resolver skylinks.
Many web applications create a
Manifest file by default and link it in the <HEAD> of the app's index.html file. Homescreen first looks for that manifest file to learn about your app. For the best user experience, be sure to set the following fields:short_nameornamedescription- an object in the
iconsarray theme_colorskylink
By setting the resolver skylink for your application here, Homescreen will be able to check for updates to the application. Read more about webmanifest files at web.dev's Add a web app manifest article. Here is an example manifest from our Uniswap fork.
You'll want to add the following code in your project's Readme, replacing
[skylink]with your resolver skylink (excluding sia://). (See video above at 27:40.)[](https://homescreen.hns.siasky.net/#/skylink/[skylink])
You can include this for specific "Releases" as well. If you do, avoid using the resolver skylink, and instead use the skylink of the specific deployment for the release version.
Then, users can install older versions of front-end but always be able to update, since the resolver skylink in the app's manifest file will point to your latest release.
Commit the changes, try the link, and if you're logged in to MySky, you should see a prompt asking you to "Add to Homescreen". That's it! Your app is ready to be used by Homescreen users.
Save to Homescreen pop-up. See extended detalis to confirm Manifest info.
Video Introduction for Integrating Homescreen, including with an HNS name
Last modified 2yr ago