iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 18
1
Modern Web

30 天 Progressive Web App 學習筆記系列 第 18

Day 18 - 30 天 Progressive Web App 學習筆記 - To-Do List 實作 PWA - Application Shell 與靜態檔案的離線存取

之前文章有介紹 PWA 裡的 App(Application Shell) 是什麼? 也有分享 App Shell 的執行效益以及設計方向,而今天要做 To-Do List 的 App Shell。


設計 To-Do List 的 App Shell

首先我們來看 To-Do List 的完整範例畫面:

接著透過 App Shell 的」執行效益以及設計方向 的文章中規劃出本次範例的 App Shell 設計,希望顯示基本的 LOGO,未完成項目提示以及待辦事項的輸入框。

本範例預期的 App Shell 畫面:


實作 App Shell

整理執行步驟如下:


第 1 步 - 環境建置在之前的文章有介紹並實作,這邊不加以說明,直接跳到第 2 步。

第 2 步 - 決定 App Shell 內容

規劃 App Shell 內容之後,就開始新增對應 assets(images/HTML/CSS)

App Shell 畫面如下:

images

- btn_check.png
	- 已完成、未完成的 check button
- btn_del.png
	- 刪除 button
- ic_add.png
	- 新增項目 icon
- logo_todo.png
	- To-Do List 的 LOGO

HTML

新增 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>

第 3 步 - 註冊 Service Worker

藉由 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>

第 4 步 - 快取靜態檔案

網頁初次載入時,會先去註冊 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。謝謝

上一篇
Day 17 - 30 天 Progressive Web App 學習筆記 - Service Worker - Handling Fetch Requests
下一篇
Day 19 - 30 天 Progressive Web App 學習筆記 - 實作 PWA To-Do List - 顯示待辦事項清單
系列文
30 天 Progressive Web App 學習筆記30

1 則留言

0
oliver6101
iT邦新手 5 級 ‧ 2017-06-23 10:56:00

hello , 想問一下若在沒有網路的狀態下,網站依舊能夠正常顯示 App Shell 內容 , 但係cache 那邊儲存的都只是圖,CSS,HTML的位置 , 那在沒有網路的狀態下,為什麼能夠正常顯示 App Shell 內容???

我要留言

立即登入留言