了解更多：- https://codexdindia.blogspot.com/2024/04/how-to-make-your-website-work-offline.html
範例網站：- https://sh20raj.github.io/offline-website/ 和原始碼：- https://github.com/SH20RAJ/offline-website 和文章
那麼，您想讓您的網站即使在網路決定休息時也能正常運作嗎？就像 YouTube 如何讓您在沒有 Wi-Fi 的時刻下載影片⛱️ 一樣，您也可以對您的網站執行同樣的操作，即使在網路玩捉迷藏時也可以存取它。讓我們深入研究建立一個像值得信賴的助手一樣的網站，它始終為您的用戶提供服務，即使處於離線狀態也是如此。我們將使用HTML5 遊戲的範例 😚 因為，嘿，誰不喜歡好遊戲，對吧？ 🎮
為什麼你需要線下的好處
首先，讓我們談談為什麼擁有一個離線就緒的網站會改變遊戲規則。想像一下：不穩定的網路、偏遠地區或只是不穩定的連線 – 並不是每個人都能獲得流暢、不間斷的網路流量。透過為您的用戶提供離線選項，您可以確保他們仍然可以盡情享受您的內容，無論他們是在野外還是在飛機上。這一切都是為了提升使用者體驗！ 🚀
如何讓您的網站成為線下冠軍
1.與服務人員友好相處：
將 Service Worker 視為網站離線表演的後台工作人員。他們就像您網站的保鏢，決定在網路中斷時顯示哪些內容。
- 註冊您的 Service Worker ：將此腳本放入您網站的 HTML 中以使事情順利進行：
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(function(registration) {
console.log('Service Worker registered with scope:', registration.scope);
}).catch(function(error) {
console.error('Service Worker registration failed:', error);
});
}
</script>- 快取好東西：在您的 Service Worker 檔案 (
service-worker.js) 中，儲存您想要離線使用的東西：
var CACHE_NAME = 'my-website-cache-v1';
var urlsToCache = [
'/',
'/styles/main.css',
'/scripts/main.js',
'/images/logo.png'
];
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
});- 離線播放：當您的使用者嘗試離線存取某些內容時，Service Worker 會介入以挽救局面：
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
if (response) {
return response;
}
return fetch(event.request);
})
);
});2.使用離線內容開始遊戲：
對於 HTML5 遊戲或任何其他需要離線執行的內容，請確保您已準備好所有元件。這意味著快取 HTML、CSS、JavaScript、圖片 – 基本上，您的遊戲順利執行所需的一切。
3.下載功能（為什麼不呢？） ：
就像您可以在 YouTube 上下載貓影片一樣，您可以讓用戶直接從您的網站下載您的遊戲檔案：
<a href="/path/to/game.zip" download>Download Game</a>測試和改進
-
測試時間：在您放鬆身心之前，先嘗試您的離線魔法。 Chrome DevTools 的應用程式面板是您的好夥伴 - 使用它來測試您的網站離線時的行為並進行任何調整。
-
優化派對：為了獲得額外的魅力，請考慮延遲加載資源並明智地使用快取。如果您的網站稍後需要趕上伺服器，您甚至可以加入一些後台同步。
包起來🎁
即使沒有網路，讓您的網站成為一個放鬆的聚會場所也是雙贏的。用戶可以隨時隨地深入了解您的內容，無需網路。透過引入 Service Worker、快取必需的內容，甚至可能加入下載功能，您正在為出色的離線體驗奠定基礎。因此，繼續吧，給您的用戶離線擊掌，讓您的網站成為他們的首選，即使在網路小睡時也是如此。 🌟
原文出處：https://dev.to/sh20raj/how-to-make-your-website-used-without-internet-3e3l
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式