Created
June 12, 2019 01:21
-
-
Save woganmay/8a673f3b2241b7cdd834d80a568cb49a to your computer and use it in GitHub Desktop.
Detect new versions of app.js automatically
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
// Ugly as sin, but gets the latest version URL for the app.js file | |
// The Vue app will query this every 60 seconds | |
Route::get('/version', function(){ | |
$manifest = file_get_contents(public_path('mix-manifest.json')); | |
$manifest = json_decode($manifest); | |
return response()->json([ | |
'latest' => $manifest->{'/js/app.js'} | |
]); | |
})->name('api.version'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const app = new Vue({ | |
el: '#app', | |
data: { | |
loadedVersion: null, | |
latestVersion: null | |
}, | |
computed: { | |
updateAvailable() { | |
if (this.loadedVersion == null || this.latestVersion == null) return false; | |
if (this.loadedVersion === this.latestVersion) return false; | |
return true; | |
} | |
}, | |
methods: { | |
checkForUpdates() { | |
// Read directly from the DOM - this is written out on first page load and shouldn't change | |
// unless you refresh | |
this.loadedVersion = document.getElementById('app-version-check').getAttribute('src'); | |
// Fetch the exact URL of the latest app.js version from the server | |
axios.get('/api/version').then(response => { this.latestVersion = response.data.latest; }); | |
} | |
}, | |
mounted() { | |
// Run this once per minute | |
setInterval(this.checkForUpdates, 60000); | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Tag the script element with an id attribute that your Vue app looks for --> | |
<script id="app-version-check" src="{{ mix('js/app.js') }}"></script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment