---
title: 'PWA 學習筆記'
disqus: Pai
---
# 壹、目錄及代辦事項
## Table of Contents
[TOC]
## 待學習項目
- [ ] -
- [ ] -
- [ ] -
- [ ] -
# 貳、PWA 使用到的技術
PWA 必須在 https 協議下進行
PWA 不是一種新的技術，而是許多技術的集合體
## 一、Web App Manifest
透過設置 Manifest 可以實現，將 PWA 網站增加到手機主畫面，變成一個類似 Native App。
透過設置可以將網址欄位等原本瀏覽器的選單去掉，可以讓 PWA 網站更像是一個 Native App。
## 二、Service Worker
- 瀏覽器在後台獨立運行的腳本
- 攔截及處理網路請求、操作緩存
- 支援 push API 和 navigation API
- 後台同步 ＆ 更新緩存
＝> 透過第一次載入頁面進行緩存，接下來第二次進入頁面就不用在進行網路請求，載入速度就會快許多。
# 二、Web App Manifest
## 1. 加入 Manifest 功能
在文件中加入 Manifest.json 檔案，並在 html 的 head 做引用。
```htmlmixed=
<head>
<link rel="manifest" href="./manifest.json">
</head>
```
Manifest.json 檔中包含的資料
```javascript=
{
"name": "PWA Demo", // 手機內提示加入主畫面會出現的名稱
"short_name": "Demo", // 手機主畫面 app icon 下的名稱
"icons": [
{
"src": "assets/images/icons/icon_144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "assets/images/icons/icon_152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "assets/images/icons/icon_192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "assets/images/icons/icon_512x512.png",
"sizes": "256x256",
"type": "image/png"
}
],
/*
可以設置多個 icon，主頁面的 APP 會去抓 48dp 的 icon，而初始跳轉頁面會去抓 128dp 的 icon
*/
"start_url": "/index.html",
/*
1. 可在 / 添加參數用於來源統計
2. / 根目錄下可以再加入子目錄，如 /detail，讓一打開 PWA 時跳轉到 detail 畫面
*/
"display": "standalone",
/*
設置啟動畫面的類型:
fullscreen 網頁會佔滿整個螢幕
standalone 隱藏瀏覽器相關的 UI,保留手機原本 UI，像手機電量...
minimal-ui 和 standalone 效果類似，但不同瀏覽器效果略微不同
browser 與原本瀏覽器顯示相同
*/
"background_color": "#fff",
// 設置啟動畫面的背景顏色
"theme_color": "#1976d2"
// 設置地址欄的顏色
}
```
Safari 目前可能不支援的屬性，可以透過添加屬性來補足
跳出添加提示加入主畫面視窗的條件
# 三、Service Worker
## 1. 特性
- 不可以直接操作 DOM
- 需要時直接喚醒，不需要時休眠
- 離線內容開發者可控制
- 一但安裝，永久存活，除非手動卸載
- 必須在 https 或 localhost 環境下執行
- 使用 Promise
Sign in with Wallet
Connect another wallet