Created
September 12, 2024 17:55
-
-
Save harryfear/dfad38e8ef24d9bb1d9c4ec1092e9f61 to your computer and use it in GitHub Desktop.
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
| // Function to check if the page was prerendered | |
| function wasPrerendered() { | |
| return document.prerendering || self.performance?.getEntriesByType('navigation')[0]?.activationStart > 0; | |
| } | |
| // Function to handle the transition from prerender to active | |
| function handlePrerenderActivation() { | |
| console.log('Pre-rendered page is now being shown to the user'); | |
| // Check if there are any query parameters | |
| const urlParams = new URLSearchParams(window.location.search); | |
| if (urlParams.toString()) { | |
| console.log('Query parameters detected. Re-rendering content...'); | |
| // Call your function to re-render or update the page content | |
| updatePageContent(urlParams); | |
| } else { | |
| console.log('No query parameters. Using pre-rendered content.'); | |
| } | |
| } | |
| // Function to update page content (you'll need to implement this) | |
| function updatePageContent(params) { | |
| // Example implementation: | |
| // 1. Make an AJAX request to get new content based on params | |
| // 2. Update the DOM with the new content | |
| console.log('Updating page content with params:', params.toString()); | |
| // Your implementation here | |
| } | |
| // Flag to track if the page was prerendered | |
| let wasPrerenderedFlag = false; | |
| // Listen for the activate event | |
| document.addEventListener('prerenderingchange', () => { | |
| if (!document.prerendering) { | |
| handlePrerenderActivation(); | |
| wasPrerenderedFlag = false; // Reset the flag | |
| } | |
| }); | |
| // Check on DOMContentLoaded | |
| document.addEventListener('DOMContentLoaded', () => { | |
| if (wasPrerendered()) { | |
| if (!document.prerendering) { | |
| handlePrerenderActivation(); | |
| } else { | |
| wasPrerenderedFlag = true; // Set the flag if still prerendering | |
| } | |
| } | |
| }); | |
| // Additional fallback using visibilitychange | |
| document.addEventListener('visibilitychange', function () { | |
| if (document.visibilityState === 'visible' && wasPrerenderedFlag) { | |
| console.log('Page visibility changed to visible from pre-render.'); | |
| handlePrerenderActivation(); | |
| wasPrerenderedFlag = false; // Reset the flag | |
| } | |
| }); | |
| // Fallback using Navigation API (if available) | |
| if ('navigation' in window && window.navigation.currentEntry) { | |
| window.navigation.addEventListener('navigate', (event) => { | |
| const entry = event.currentTarget.currentEntry; | |
| if (entry && entry.activationStart > 0) { | |
| console.log('Page pre-rendered and now activated (detected by Navigation API).'); | |
| handlePrerenderActivation(); | |
| } | |
| }); | |
| } | |
| // Initial check (in case the script runs after activation) | |
| if (wasPrerendered() && !document.prerendering) { | |
| console.log('Page was pre-rendered and is already active.'); | |
| handlePrerenderActivation(); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment