Skip to content

Commit b5134e1

Browse files
addshoreaddshore
committed
Add guide for hard browser refresh
1 parent 5815af6 commit b5134e1

File tree

2 files changed

+275
-0
lines changed

2 files changed

+275
-0
lines changed

‎guides/browser-hard-refresh.md

Lines changed: 272 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,272 @@
1+
---
2+
aside: false
3+
outline: false
4+
sidebar: false
5+
---
6+
7+
8+
# Browser Hard Refresh Guide
9+
10+
If you have been told by Lightbug to perform a hard refresh, this guide will help you understand what it is, why it's necessary, and how to do it across different browsers and operating systems.
11+
12+
## Browser Detection
13+
14+
<div id="browser-detection" style="padding: 15px; background: #f5f5f5; border-radius: 8px; margin: 20px 0;">
15+
<strong>Your detected browser:</strong> <span id="detected-browser">Detecting...</span><br>
16+
<strong>Your operating system:</strong> <span id="detected-os">Detecting...</span><br>
17+
<strong>Recommended shortcut:</strong> <span id="recommended-shortcut">Loading...</span>
18+
</div>
19+
20+
<script>
21+
function detectBrowserAndOS() {
22+
console.log('Detecting browser and OS...');
23+
const userAgent = navigator.userAgent;
24+
const platform = navigator.platform;
25+
26+
// Detect browser
27+
let browser = 'Unknown';
28+
if (userAgent.includes('Chrome') && !userAgent.includes('Edg')) {
29+
browser = 'Chrome';
30+
} else if (userAgent.includes('Firefox')) {
31+
browser = 'Firefox';
32+
} else if (userAgent.includes('Safari') && !userAgent.includes('Chrome')) {
33+
browser = 'Safari';
34+
} else if (userAgent.includes('Edg')) {
35+
browser = 'Microsoft Edge';
36+
} else if (userAgent.includes('Opera') || userAgent.includes('OPR')) {
37+
browser = 'Opera';
38+
}
39+
40+
// Detect OS
41+
let os = 'Unknown';
42+
if (platform.includes('Win')) {
43+
os = 'Windows';
44+
} else if (platform.includes('Mac')) {
45+
os = 'macOS';
46+
} else if (platform.includes('Linux')) {
47+
os = 'Linux';
48+
} else if (userAgent.includes('Android')) {
49+
os = 'Android';
50+
} else if (userAgent.includes('iPhone') || userAgent.includes('iPad')) {
51+
os = 'iOS';
52+
}
53+
54+
// Determine shortcut
55+
let shortcut = '';
56+
if (os === 'macOS') {
57+
if (browser === 'Safari') {
58+
shortcut = '⌘ + Option + R';
59+
} else {
60+
shortcut = '⌘ + Shift + R';
61+
}
62+
} else if (os === 'Windows' || os === 'Linux') {
63+
shortcut = 'Ctrl + Shift + R';
64+
} else if (os === 'iOS' || os === 'Android') {
65+
shortcut = 'Pull down to refresh or use browser menu';
66+
}
67+
68+
// If there isn't an element to get, defer
69+
if (!document.getElementById('detected-browser')) {
70+
setTimeout(detectBrowserAndOS, 250);
71+
return;
72+
}
73+
74+
document.getElementById('detected-browser').textContent = browser;
75+
document.getElementById('detected-os').textContent = os;
76+
document.getElementById('recommended-shortcut').textContent = shortcut;
77+
78+
// Highlight the appropriate row in the quick reference table
79+
highlightBrowserRow(browser);
80+
}
81+
82+
function highlightBrowserRow(browser) {
83+
// Remove any existing highlights
84+
const allRows = document.querySelectorAll('.browser-table tbody tr');
85+
allRows.forEach(row => row.classList.remove('highlighted'));
86+
87+
// Map browser names to row IDs
88+
const browserRowMap = {
89+
'Chrome': 'chrome-row',
90+
'Firefox': 'firefox-row',
91+
'Safari': 'safari-row',
92+
'Microsoft Edge': 'edge-row',
93+
'Opera': 'opera-row'
94+
};
95+
96+
// Highlight the matching row
97+
const rowId = browserRowMap[browser];
98+
if (rowId) {
99+
const row = document.getElementById(rowId);
100+
if (row) {
101+
row.classList.add('highlighted');
102+
}
103+
}
104+
}
105+
106+
// Run detection when page loads
107+
if (typeof window !== 'undefined') {
108+
window.addEventListener('load', detectBrowserAndOS);
109+
110+
// Additional fallback with a small delay
111+
setTimeout(detectBrowserAndOS, 100);
112+
}
113+
</script>
114+
115+
## Quick Reference Table
116+
117+
<style>
118+
.browser-table {
119+
width: 100%;
120+
border-collapse: collapse;
121+
margin: 20px 0;
122+
}
123+
124+
.browser-table th,
125+
.browser-table td {
126+
border: 1px solid #ddd;
127+
padding: 12px;
128+
text-align: left;
129+
}
130+
131+
.browser-table th {
132+
background-color: #f5f5f5;
133+
font-weight: bold;
134+
}
135+
136+
.browser-table tr:nth-child(even) {
137+
background-color: #f9f9f9;
138+
}
139+
140+
.browser-table tr.highlighted {
141+
background-color: #e8f5e8 !important;
142+
border: 2px solid #4caf50;
143+
}
144+
145+
.browser-table tr.highlighted td {
146+
font-weight: bold;
147+
}
148+
</style>
149+
150+
<table class="browser-table">
151+
<thead>
152+
<tr>
153+
<th>Browser</th>
154+
<th>Windows/Linux</th>
155+
<th>macOS</th>
156+
</tr>
157+
</thead>
158+
<tbody>
159+
<tr id="chrome-row">
160+
<td>Chrome</td>
161+
<td><code>Ctrl + Shift + R</code></td>
162+
<td><code>⌘ + Shift + R</code></td>
163+
</tr>
164+
<tr id="firefox-row">
165+
<td>Firefox</td>
166+
<td><code>Ctrl + Shift + R</code></td>
167+
<td><code>⌘ + Shift + R</code></td>
168+
</tr>
169+
<tr id="safari-row">
170+
<td>Safari</td>
171+
<td>N/A</td>
172+
<td><code>⌘ + Option + R</code></td>
173+
</tr>
174+
<tr id="edge-row">
175+
<td>Microsoft Edge</td>
176+
<td><code>Ctrl + Shift + R</code></td>
177+
<td><code>⌘ + Shift + R</code></td>
178+
</tr>
179+
<tr id="opera-row">
180+
<td>Opera</td>
181+
<td><code>Ctrl + Shift + R</code></td>
182+
<td><code>⌘ + Shift + R</code></td>
183+
</tr>
184+
</tbody>
185+
</table>
186+
187+
188+
## What is a Hard Refresh?
189+
190+
A hard refresh forces your browser to reload a page and all its resources (CSS, JavaScript, images) from the server, bypassing the local cache. This is useful when:
191+
192+
- The page appears outdated or shows old data
193+
- New features or updates aren't visible
194+
- The page layout appears broken
195+
- You're troubleshooting display issues
196+
197+
## Instructions by Browser and Operating System
198+
199+
### Google Chrome
200+
201+
#### Windows & Linux
202+
- **Keyboard shortcut:** `Ctrl + Shift + R`
203+
- **Alternative:** `Ctrl + F5`
204+
- **Menu method:**
205+
1. Right-click the refresh button
206+
2. Select "Hard Reload"
207+
208+
#### macOS
209+
- **Keyboard shortcut:** `⌘ + Shift + R`
210+
- **Menu method:**
211+
1. Right-click the refresh button
212+
2. Select "Hard Reload"
213+
214+
### Mozilla Firefox
215+
216+
#### Windows & Linux
217+
- **Keyboard shortcut:** `Ctrl + Shift + R`
218+
- **Alternative:** `Ctrl + F5`
219+
- **Menu method:**
220+
1. Hold `Shift` and click the refresh button
221+
222+
#### macOS
223+
- **Keyboard shortcut:** `⌘ + Shift + R`
224+
- **Menu method:**
225+
1. Hold `Shift` and click the refresh button
226+
227+
### Safari
228+
229+
#### macOS
230+
- **Keyboard shortcut:** `⌘ + Option + R`
231+
- **Menu method:**
232+
1. Go to Develop menu → Empty Caches
233+
2. Then refresh normally with `⌘ + R`
234+
235+
::: tip Enable Developer Menu
236+
If you don't see the Develop menu:
237+
1. Go to Safari → Preferences
238+
2. Click Advanced tab
239+
3. Check "Show Develop menu in menu bar"
240+
:::
241+
242+
#### iOS (iPhone/iPad)
243+
- **Pull to refresh:** Pull down on the page
244+
- **Settings method:**
245+
1. Go to Settings → Safari
246+
2. Tap "Clear History and Website Data"
247+
3. Return to Safari and reload the page
248+
249+
### Microsoft Edge
250+
251+
#### Windows
252+
- **Keyboard shortcut:** `Ctrl + Shift + R`
253+
- **Alternative:** `Ctrl + F5`
254+
- **Menu method:**
255+
1. Press `F12` to open Developer Tools
256+
2. Right-click the refresh button
257+
3. Select "Hard refresh"
258+
259+
#### macOS
260+
- **Keyboard shortcut:** `⌘ + Shift + R`
261+
- **Menu method:**
262+
1. Right-click the refresh button
263+
2. Select "Hard refresh"
264+
265+
### Opera
266+
267+
#### Windows & Linux
268+
- **Keyboard shortcut:** `Ctrl + Shift + R`
269+
- **Alternative:** `Ctrl + F5`
270+
271+
#### macOS
272+
- **Keyboard shortcut:** `⌘ + Shift + R`

‎guides/index.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ features:
1616
- title: Adding your first device
1717
details: Get started with a Cloud account, add your first device, setup a plan, and start tracking.
1818
link: /guides/adding-your-first-device
19+
- title: Browser Hard Refresh Guide
20+
details: Learn how to perform a hard refresh in different browsers to resolve display issues and ensure you see the latest updates.
21+
link: /guides/browser-hard-refresh
1922
---
2023

2124
If you want to request coverage of a specific topic, or have any questions, please [contact us](https://lightbug.io/contact/).

0 commit comments

Comments
 (0)