Try   HackMD

壹、目錄及代辦事項

Table of Contents

待學習項目

  • -
  • -
  • -
  • -

貳、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 做引用。




<head>
  <link rel="manifest" href="./manifest.json">
</head>

Manifest.json 檔中包含的資料















































{
  "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 目前可能不支援的屬性，可以透過添加屬性來補足

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

跳出添加提示加入主畫面視窗的條件

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

三、Service Worker

1. 特性

  • 不可以直接操作 DOM
  • 需要時直接喚醒，不需要時休眠
  • 離線內容開發者可控制
  • 一但安裝，永久存活，除非手動卸載
  • 必須在 https 或 localhost 環境下執行
  • 使用 Promise
Last changed by 
 
小白Pai
0
173

Read more

Mopcon 2022 簡報連結

&#x62C9;&#x8FD1;&#x73FE;&#x4EE3;&#x958B;&#x767C;&#x8005;&#x8207; Web3 &#x7684;&#x8DDD;&#x96E2; &#x6574;&#x5408; Lighthouse CI &#x4F5C;&#x70BA;&#x524D;&#x7AEF;&#x61C9;&#x7528;&#x7684;&#x6548;&#x80FD;&#x5B88;&#x9580;&#x54E1; &#x5E6B;&#x4F60;&#x7684; Web &#x958B;&#x767C;&#x6DFB;&#x52A0;&#x4E00;&#x9EDE; Functional Programming &#x5473; Visual Testing &#x6295;&#x5F71;&#x7247; &#x9010;&#x5B57;&#x7A3F;

Oct 17, 2022
Advanced Javascript

Advanced Javascript Table of Contents [TOC] Javascript Foundation &#x4E00;&#x3001;Call Stack && Memory Heap(&#x5167;&#x5B58;&#x5806;) 1. Call Stack &#x8207; Stack Overflow // When a function calls itself // it&apos;s called Recursion function inception() {

Mar 26, 2022
Vue.js 筆記

&#x58F9;&#x3001;&#x76EE;&#x9304;&#x53CA;&#x4EE3;&#x8FA6;&#x4E8B;&#x9805; Table of Contents [TOC] &#x8CB3;&#x3001;&#x57FA;&#x790E;&#x5167;&#x5BB9;&#x6587;&#x4EF6;&#x8981;&#x9EDE;&#x8AAA;&#x660E; &#x4E00;&#x3001;Vue &#x958B;&#x767C;&#x74B0;&#x5883;&#x4ECB;&#x7D39; Vue &#x662F;&#x7531;&#x8CC7;&#x6599;&#x4F86;&#x9A45;&#x52D5;&#x756B;&#x9762;&#x7684;&#xFF0C;&#x56E0;&#x6B64;&#x8CC7;&#x6599;&#x662F;&#x4E0D;&#x65B7;&#x5728;&#x8B8A;&#x52D5;&#x7684;&#x3002; &#x9019;&#x908A;&#x5C31;&#x8981;&#x7528; Vue Dev tools &#x4F86;&#x6AA2;&#x8996;&#x8CC7;&#x6599;&#x3002; &#x4E8C;&#x3001;&#x5EFA;&#x7ACB;&#x61C9;&#x7528;&#x7A0B;&#x5F0F;

Feb 22, 2022
Typescript 泛用型別

Typescript &#x6CDB;&#x7528;&#x578B;&#x5225; Table of Contents [TOC] &#x6CDB;&#x7528;&#x578B;&#x5225; X &#x578B;&#x5225;&#x53C3;&#x6578;&#x5316; &#x4E00;&#x3001;&#x6CDB;&#x7528;&#x578B;&#x5225; &#x539F;&#x7406;&#x8DDF;&#x666E;&#x901A;&#x7684;&#x51FD;&#x5F0F;&#x6982;&#x5FF5;&#x5DEE;&#x4E0D;&#x591A;&#xFF0C;&#x53EF;&#x4EE5;&#x628A;&#x6CDB;&#x7528;&#x578B;&#x5225;&#x770B;&#x6210;&#x662F;&#x578B;&#x5225;&#x7248;&#x7684;&#x51FD;&#x5F0F; type Identuty<T> = T

Jan 21, 2022
Read more from 小白Pai
Published on HackMD