之前文章有介紹 PWA 裡的 App（Application Shell） 是什麼？ 也有分享 App Shell 的執行效益以及設計方向，而今天要做 To-Do List 的 App Shell。
首先我們來看 To-Do List 的完整範例畫面：
接著透過 App Shell 的」執行效益以及設計方向 的文章中規劃出本次範例的 App Shell 設計，希望顯示基本的 LOGO，未完成項目提示以及待辦事項的輸入框。
本範例預期的 App Shell 畫面：
整理執行步驟如下：
第 1 步 - 環境建置在之前的文章有介紹並實作，這邊不加以說明，直接跳到第 2 步。
規劃 App Shell 內容之後，就開始新增對應 assets（images/HTML/CSS）
App Shell 畫面如下：
- btn_check.png
- 已完成、未完成的 check button
- btn_del.png
- 刪除 button
- ic_add.png
- 新增項目 icon
- logo_todo.png
- To-Do List 的 LOGO
新增 HTML 檔案，建立 layout，載入 main.css 與對應 images。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PWA To-Do List with Vanilla JS</title>
<link rel="stylesheet" href="src/main.css">
</head>
<body>
<header class="header">
<img
class="logo"
src="./assets/images/logo_todo.png"
alt=""
/>
<div class="unfinished">
<span class="count">0</span>
<span>個未完成</span>
</div>
</header>
<div id="todoInput" class="input-content">
<img
class="add"
src="./assets/images/ic_add.png"
alt=""
/>
<input
class="input"
placeholder="What need to be done?"
value=""
type="text"
/>
</div>
</body>
</html>
藉由 Service Worker 來實現離線應用，但一開始必須註冊/新增 Service Worker， Service Worker 的處理才能夠被實現。
Registering the Service Worker:
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('完成 SW 設定!', reg))
.catch(err => console.log('Error!', err));
}
</script>
網頁初次載入時，會先去註冊 Service Worker，接著會執行 install 事件，將 App Shell 的檔案做快取，參考下方程式碼：filesToCache 用來存放 images png 圖檔，以及 layout(index.html)、style(main.css) 的檔案路徑，接著再傳到 cache.addAll 的方法，將靜態檔案儲存起來。
對應程式碼如下：
const filesToCache = [
'/',
'/assets/images/btn_check.png',
'/assets/images/btn_del.png',
'/assets/images/ic_add.png',
'/assets/images/logo_todo.png',
'/src/main.css',
'/index.html'
];
const cacheName = 'todolist-v1';
// install
self.addEventListener('install', event => {
console.log('installing…');
event.waitUntil(
caches.open(cacheName).then(cache => {
console.log('Caching app ok');
return cache.addAll(filesToCache);
})
);
});
第 5 步和第 6 步在之前介紹 Service Worker 時就有介紹，可參考：
所有步驟都完成之後，我們到 Application/Service Workers 查看，發現 Service Workers 有註冊成功。
到 Application/ Cache Storage 查看，也發現 Service Workers 有成功 cache 到 images png 圖檔，以及 layout(index.html)、style(main.css) 的檔案。
一開始先規劃 App Shell 的設計畫面，接著新增對應的 assets 檔案，藉由 Service Worker 搭配 Cache API 去儲存 App Shell 的檔案，最後會測試網站是否能夠離線瀏覽，若在沒有網路的狀態下，網站依舊能夠正常顯示 App Shell 內容。
本人小小筆記，如有錯誤或需要改進的部分，歡迎給予回饋。
我將會用最快的速度修正，m(_ _)m。謝謝
hello , 想問一下若在沒有網路的狀態下，網站依舊能夠正常顯示 App Shell 內容 , 但係cache 那邊儲存的都只是圖,CSS,HTML的位置 , 那在沒有網路的狀態下,為什麼能夠正常顯示 App Shell 內容???
iThome鐵人賽
看影片追技術