当网站后端暂时无法访问时可以让 Nginx 自动显示一个静态备用页面提示用户检查网络并提供售后信息。一、准备文件将以下两个文件上传到宝塔网站根目录/www/wwwroot/test.zhangsan.cool/offline.html /www/wwwroot/test.zhangsan.cool/sw.js文件说明供参考具体自行修改offline.html网站无法访问时显示的备用页面。!doctype htmlhtmllangzh-CNheadmetacharsetutf-8metanameviewportcontentwidthdevice-width, initial-scale1, viewport-fitcovermetanametheme-colorcontent#f5f7fbmetanamedescriptioncontent网站备用入口和联系方式。title网站暂时无法访问备用入口/titlestyle:root{color-scheme: light;--ink:#182235; --muted:#687386; --blue:#2563eb; --line:#e2e7f0; --surface:#fff; }*{box-sizing:border-box;}html, body{margin:0;min-height:100%;}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,Arial,sans-serif;color:var(--ink);background:#f5f7fb; }.shell{min-height:100vh;padding:24px 16px calc(28px env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;}.page{width:min(100%,620px);}.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:28px 20px 22px;box-shadow:0 12px 35px rgba(30,45,75,.07);}h1{margin:0;font-size:clamp(28px,7vw,42px);line-height:1.2;letter-spacing:-.03em;}.status{display:inline-flex;align-items:center;gap:7px;margin-bottom:14px;color:#a16207; font-size:13px; font-weight:700; }.status-dot{width:8px;height:8px;border-radius:50%;background:#eab308; box-shadow:0 0 0 4px #fef3c7; }.intro{margin:10px022px;color:var(--muted);font-size:15px;line-height:1.65;}.nav-link{display:flex;align-items:center;justify-content:center;gap:9px;min-height:54px;padding:14px 18px;border-radius:12px;color:#fff; background:var(--blue); text-decoration:none; font-size:17px; font-weight:700; box-shadow:0 8px 16px rgba(37,99,235,.2); }.nav-link:hover, .nav-link:focus-visible{background:#1d4ed8; }.nav-link svg{width:19px;height:19px;}.section-title{margin:26px010px;font-size:17px;}.contacts{display:grid;gap:10px;}.contact{display:flex;align-items:center;gap:12px;min-width:0;padding:14px;border:1px solid var(--line);border-radius:12px;}.contact-icon{flex:0036px;width:36px;height:36px;display:grid;place-items:center;border-radius:10px;color:var(--blue);background:#eef4ff; }.contact-icon svg{width:20px;height:20px;}.contact-copy{flex:1;min-width:0;}.label{margin:003px;color:var(--muted);font-size:13px;}.value{margin:0;font-size:19px;font-weight:700;overflow-wrap:anywhere;}.copy{flex:00auto;min-height:40px;padding:0 14px;border:1px solid#bfd2f6; border-radius:9px; color:var(--blue); background:#fff; font:inherit; font-size:14px; font-weight:700; cursor:pointer; }.copy:hover, .copy:focus-visible{background:#eef4ff; }.copy.copied{border-color:#b7dfc9; color:#147a4b; background:#edf9f2; }.contact--featured{border-color:#bfd2f6; background:#f8fbff; }:is(.nav-link, .copy):focus-visible{outline:3px solid rgba(37,99,235,.28);outline-offset:3px;}.note{margin:18px00;color:#8a94a5; font-size:12px; line-height:1.6; text-align:center; }.toast{position:fixed;left:50%;bottom:calc(22px env(safe-area-inset-bottom));transform:translate(-50%,16px);opacity:0;pointer-events:none;padding:9px 13px;border-radius:9px;color:#fff; background:#1d293d; font-size:13px; transition:opacity .18s,transform .18s; }.toast.show{opacity:1;transform:translate(-50%,0);}media(max-width:599px){.shell{padding:14px 12px calc(20px env(safe-area-inset-bottom));}.card{padding:18px 14px 22px;border-radius:15px;}.intro{margin-bottom:18px;}.section-title{margin-top:22px;}}media(min-width:760px){.card{padding:40px 42px 30px;}.contacts{grid-template-columns:1fr 1fr;}}media(prefers-reduced-motion: reduce){.toast{transition:none;}}/style/headbodymainclassshellsectionclasspage cardaria-labelledbytitledivclassstatusspanclassstatus-dotaria-hiddentrue/span当前连接可能不稳定/divh1idtitle网站暂时无法访问/h1pclassintro请先检查网络连接并刷新页面如果仍无法访问可通过下方联系方式获取帮助。/paclassnav-linkhrefhttps://vlink.cc/uu5wok0ktarget_blankrelnoopener noreferrer打开最新网址svgviewBox0 0 24 24fillnonestrokecurrentColorstroke-width2aria-hiddentruepathdM14 5h5v5M19 5l-8 8/pathdM18 13v5a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5//svg/ah2classsection-title备用联系方式/h2divclasscontactsdivclasscontact contact--featuredspanclasscontact-iconaria-hiddentruesvgviewBox0 0 24 24fillnonestrokecurrentColorstroke-width2pathdM7 7h10v8H7z/pathdM7 10H4v5h3M17 10h3v5h-3M9 18h6M12 15v3//svg/spandivclasscontact-copypclasslabel售后QQ群 · 进群获取最新资讯/ppclassvalue815440815/p/divbuttonclasscopytypebutton>815440815>复制aria-label复制QQ群号 815440815复制/button/divdivclasscontactspanclasscontact-iconaria-hiddentruesvgviewBox0 0 24 24fillnonestrokecurrentColorstroke-width2pathdM20 11.5a7.5 7.5 0 0 1-11.8 6.1L4 19l1.5-3.9A7.5 7.5 0 1 1 20 11.5Z/pathdM9 10.5c.6 1.3 1.7 2.4 3 3l1-.8 1.5.7-.3 1.3c-.2.6-.8.8-1.4.6a8.3 8.3 0 0 1-5.1-5.1c-.2-.6 0-1.2.6-1.4l1.3-.3.7 1.5-.8 1Z//svg/spandivclasscontact-copypclasslabel售后微信/ppclassvalue15682448658/p/divbuttonclasscopytypebutton>15682448658>复制aria-label复制售后微信号 15682448658复制/button/div/divpclassnote建议收藏本页方便下次快速找到入口。/p/section/maindivclasstoastrolestatusaria-livepolite/divscript((){ const toastdocument.querySelector(.toast);let timer;const show(message){ toast.textContentmessage;toast.classList.add(show);clearTimeout(timer);timersetTimeout(()toast.classList.remove(show),1800);};const fallbackCopy(text){ const areadocument.createElement(textarea);area.valuetext;area.setAttribute(readonly,);area.style.positionfixed;area.style.opacity0;document.body.appendChild(area);area.select();const okdocument.execCommand(copy);area.remove();return ok;};document.querySelectorAll([data-copy]).forEach((button)button.addEventListener(click,async(){ const textbutton.dataset.copy;try { if(navigator.clipboardwindow.isSecureContext)await navigator.clipboard.writeText(text);else if(!fallbackCopy(text))throw new Error(copy failed);button.textContent已复制 ✓;button.classList.add(copied);clearTimeout(button._resetTimer);button._resetTimersetTimeout((){ button.textContentbutton.dataset.defaultLabel;button.classList.remove(copied);},1800);show(已复制text);} catch { show(复制失败请手动复制);} }));})();/scriptscriptif(serviceWorkerinnavigator){window.addEventListener(load,(){navigator.serviceWorker.register(/sw.js,{scope:/}).then((registration){ console.log(Service Worker 注册成功:,registration.scope);return registration.update();}).catch((error)console.error(Service Worker 注册失败:,error));});}else{console.warn(当前浏览器不支持 Service Worker);}/script/body/htmlsw.js负责缓存备用页面并在断网时返回缓存内容。const CACHE_NAMEoffline-contact-v5;const OFFLINE_URL/offline.html;self.addEventListener(install,(event){event.waitUntil(caches.open(CACHE_NAME).then((cache)cache.add(OFFLINE_URL)));self.skipWaiting();});self.addEventListener(activate,(event){event.waitUntil(caches.keys().then((keys)Promise.all(keys.filter((key)key!CACHE_NAME).map((key)caches.delete(key)))));self.clients.claim();});self.addEventListener(fetch,(event){const urlnew URL(event.request.url);if(event.request.method!GET||event.request.mode!navigate||url.origin!self.location.origin||url.pathname.startsWith(/service-api/))return;event.respondWith(fetch(event.request).then((response){ if(![502,503,504].includes(response.status))returnresponse;returncaches.match(OFFLINE_URL).then((cached)cached||response);}).catch(()caches.match(OFFLINE_URL).then((cached)cached||Response.error())));});二、配置 HTTPSService Worker 必须运行在 HTTPS 环境下。在宝塔中进入网站 → 你的域名 → SSL申请并启用 SSL之后使用下面的地址访问网站https://你的域名/不要使用普通 HTTP 或服务器 IP 地址测试。三、添加宝塔自定义配置进入网站 → 你的域名 → 配置文件 → 自定义配置文件不要修改“主配置文件”将下面完整内容粘贴到“自定义配置文件”中location /sw.js { root /www/wwwroot/test.zhangsan.cool; default_type application/javascript; add_header Cache-Control no-cache always; add_header Service-Worker-Allowed / always; try_files $uri 404; } location /offline.html { root /www/wwwroot/test.zhangsan.cool; default_type text/html; add_header Cache-Control no-cache always; try_files $uri 404; } error_page 502 503 504 200 /offline.html; proxy_set_header Accept-Encoding ; sub_filter_types text/html; sub_filter_once on; sub_filter /body scriptif(serviceWorker in navigator){window.addEventListener(load,function(){navigator.serviceWorker.register(/sw.js,{scope:/}).then(function(r){console.log(Service Worker 注册成功,r.scope);return r.update();}).catch(function(e){console.error(Service Worker 注册失败,e);});});}/script/body;其中反向代理后端使用本机地址127.0.0.1:8080如果宝塔已经自动生成了反向代理配置不要重复添加第二个location ^~ /只添加上面的自定义内容即可。四、修改页面后更新缓存编辑修改offline.html或sw.js后需要修改sw.js中的缓存版本号例如constCACHE_NAMEoffline-contact-v4;然后重新上传文件联网刷新页面再测试断网。
