reload.js will show a popup or refresh your app when there is a new GitHub version released ⚡️
reload.js uses the version.js library to fetch your release versions, so you must include both libraries.
Provide the GitHub repository that you want to use as a data-repo attribute in the script tag. When a new version of the repository is released, reload.js will show a customisable popup and optionally refresh the page.
<script src="//cdn.releasepage.co/js/version.js" data-repo="releasepage/version"></script>
<script src="//cdn.releasepage.co/js/reload.js"></script>Or we also provide a combined library on our CDN for convenience.
<script src="//cdn.releasepage.co/js/reload.combined.js" data-repo="releasepage/version"></script>If you want to use our default styles then also include reload-basic.css, this is what we use on ReleasePage and on the basic demo.
<link rel="stylesheet" type="text/css" href="//cdn.releasepage.co/css/reload-basic.css">reload.js exposes window.reload so you can use the following customisation options.
reload.js will check GitHub for new release information every 60 seconds. If you want to change this then pass an interval argument:
reload.options({
interval: 10000 // 10 seconds
});Note; Requests to GitHub's API are rate limited per IP address, allowing 60 requests per hour. Bear this in mind when setting the interval.
If you need a higher rate-limit, take a look at using reload.js as a ReleasePage Integration.
By default reload.js will show a popup when your version changes with a short message. You can customise the messages that will be displayed using the options function.
reload.options({
content: 'A new version is available!'
});
reload.options({
content: (version) => `Version ${version} has been released!`
});You can also specify arguments for specific version changes. reload.js is built on semver so any changes supported by the diff function are supported (major, premajor, minor, preminor, patch, prepatch, or prerelease).
reload.options({
major: {
content: 'A new version is available!'
},
minor: {
content: 'Take a look at our new features'
},
patch: {
content: 'Some bugs are fixed'
}
});By default a message box will only be shown for major, minor and patch changes.
If you don't want reload.js to do anything on minor or patch version changes then simply pass false
reload.options({
major: {
content: 'A new version is available!'
},
minor: false,
patch: false
});Sometimes you want to force the user to refresh if there are big breaking changes 💥 (passing 0 will show the popup then force refresh immediately).
reload.options({
major: {
content: 'A new version is available!',
autorefresh: 30 // seconds
}
});You can completely override the html inside the reload.js popup if you like ✌️
const $contents = document.createElement('<div>');
$contents.innerText = 'New stuff!';
reload.options({
html: $contents
});reload.js can also be used as a ReleasePage integration allowing you to take advantage of extra cool features:
- Private repos
- Group releases from different repos into one combined version
- A more generous rate limit
If you don't have an account yet, you can create one on our homepage. After creating your first beautiful Release Page, you need to grab your API key.
Learn more about ReleasePage API keys here.
To use reload.js with your Release Page, provide the page ID and you API Key instead of a GitHub repo
<script src="//cdn.releasepage.co/js/reload.combined.js" data-api-key="<API_KEY>" data-page-id="<PAGE_ID>"></script>If you only want to show the popup for a version change of a specific project from the Release Page.
reload.options({
repo: 'releasepage/api'
});We also provide an AMD module for use with npm and webpack et al.
npm install release-page-version release-page-reload --save-dev
const version = require('release-page-version');
const reload = require('release-page-reload');
// set up `version.js` using the GitHub API
version.options({
github: {
repo: REPO_NAME
}
});
// ...or set up `version.js` using the ReleasePage API
version.options({
pageId: RP_PAGE_ID,
apiKey: RP_API_KEY
});
reload.options({
// tell reload to use this `version.js` instead of the one on `window`
versionjs: version,
major: {
content: 'A new version is available!'
}
});Follow us on Twitter: @ReleasePage
Email us: hi@releasepage.co