# Intro 關於 PWA(progressive web app) MDN 已經有詳細的介紹了, 所以就不多說了
主要記錄以目前 2025 年的當下對瀏覽器的支援現況
# 系統支援度 目前在 mac chrome / Safari 和 windows chrome / Edge 都可以支援
mobile device 的話, iPhone Safari 支援, Android 大多支援, 少部分因為 OEM 品牌可能因為魔改了 Android 系統, 會導致 PWA 安裝了, 但是不會出現, 相當於沒有安裝成功
以下整成表格
mac windows iOS Android 支援 支援 支援 部分手機型號不支援 # 不支援的解決方案 目前也嘗試不出來有其他的解決方案, 所以會建議在統一的使用體驗上不要去支援 PWA, 這樣在 mobile device 上面就只會是單純的添加捷徑的功能
# 測試 可以用以下連結測試 PWA
https://pwa2.tedshd.io/
# other 因為研究 PWA
...
# 中華電信設定固定 IP 中華可以申請一組固定 IP 來使用
有時候都忘記要怎麼處理
紀錄一下
去中華電信網站申請 HiNet非固定制固定IP申請 或是 Google 搜尋 中華固定ip申請
登入中華電信網站 -> 寬頻 -> HiNet非固定制固定IP申請 會顯示固定 IP
router 設定 PPPOE 連線
## 說明 中華電信有可能維護或是調整會導致固定 IP 變換, 但都會寄信通知, 留意信箱就可以了
中華電信設定 PPPOE 連線是 <用戶號碼>@hinet.net
設定固定 IP 的話是要用 <用戶號碼>@ip.hinet.net
因為家裡有兩台 wifi router
所以一台設定非固定 IP 設定 <用戶號碼>@hinet.net
固定 IP 設定 <用戶號碼>@ip.hinet.net
...
# Intro 現在在使用 nodejs 時可以使用副檔名 .mjs 的方式和 package.js 添加 "type": "module" 來使用 import 來取代 require
關於這件事也是因為有許多歷史因素無法完全取代掉 require
但是如果我們想要在 cloud functions 或是 firebase functions 使用時就沒那麼順利
因為光是要使用 .mjs 就是個問題
但是參考下面的文章後發現有取巧的方式
refer - ES6+ in Cloud Functions for Firebase #2
# Solution 先說結論
其實就是先用 babel build 完 code
最後把 build 完的 code 部署到 functions 上面
以 firebase functions 專案的例子
我自己的做法是 多建立一個 src 的目錄來當成再開發的 code
在部署前 build 到 functions 的目錄
package.json
添加
"scripts": { "build": "babel src --out-dir functions" } npm run build
...
# Intro 紀錄一下 MySQL 匯出與匯入資料的一些情況
# 匯出 mysqldump --column-statistics=0 -u <user> -h <host> -P 3306 -p <database> > output_file.sql --column-statistics=0 忽略掉一些匯出時的一些資訊, 節省容量
匯出資料庫中個別的 table
mysqldump --column-statistics=0 -u <user> -h <host> -P 3306 -p <database> <table> > output_file.sql # 匯入 mysql -u <user> -h <host> -P 3306 -p <database> < ./file.sql 如果要忽略一些錯誤並強制執行可以添加 -f
mysql -f -u <user> -h <host> -P 3306 -p <database> < ./file.sql # troubleshooting # 如果遇到有 table 的欄位是使用 binary 的形式像是 point 匯出時在匯入會出現格式錯誤 如果欄位中有以 point 的型態儲存經緯度數據
...
# Intro 在使用 golang 的情境下, 有一個很常用的 migration 工具 golang-migrate
但是在不同系統下安裝我覺得不太容易
所以記錄一下
# Install github 上有提供不同作業系統的安裝方式
cmd/migrate
目前測試 Mac / Ubuntu 有成功
Mac OS X 使用 homebrew 安裝
brew install golang-migrate 在 mac 上面安裝是蠻容易的
Ubuntu 20.04 在 ubuntu 遇到許多權限的問題
github 上面的 *.deb 安裝需要調整指令
curl -L https://packagecloud.io/golang-migrate/migrate/gpgkey | sudo apt-key add - sudo sh -c 'echo "deb https://packagecloud.io/golang-migrate/migrate/ubuntu/ $(lsb_release -sc) main" > /etc/apt/sources.list.d/migrate.list' sudo apt-get update sudo apt-get install -y migrate # Usage 要連接的 DB 的格式
...
# Intro 服務終有停止的一天
firebase 動態連結將於 2025 年 8 月 25 日關閉。
所以要提前做遷移轉換或是找其他替代方案
# Firebase 建議 可以參考 Firebase 文件的建議自己搞
從動態鏈接遷移到應用程式連結和應用程式鏈接通用連結
自己搞的好處是能搞成符合自己需求的東西
但是最大的麻煩點是要記錄的話就得自己搞數據
很多時候都會需要紀錄點擊轉換
這就得自己搞了
# 第三方服務 其實除了自己搞以外
還有很多第三方服務有在做這個東西
目前有找到的有
## Branch io https://www.branch.io/what-is-deep-linking/ branch io 還有個教學文
How to migrate from Firebase Dynamic Links
## Appsflyer https://www.appsflyer.com/products/customer-experience-deep-linking/ ## kochava https://www.kochava.com/product/deep-linking/links/?int-link=menu-links 上面列出來的是比較常見的幾個
應該還有其他服務沒有列出來
這個就評估下要用哪個服務
...
# 前言 不管在 mobile 還是 desktop 都有個困擾就是要處理用戶縮放頁面的問題
如果只是資料類型的頁面, 縮放的話大多都只是畫面 UI 跑版
但如果是複合功能型的頁面, 縮放的話大概率會讓功能壞掉
就得找一些方法處理
# 確認可行性 JavaScript 有一個 api window.devicePixelRatio 是顯示畫面解析度比率的
早期可以用這個是不是 1 來判斷
但是螢幕的解析度其實會影響這個值
所以這個 api 沒有辦法當作判斷的基準
resize 事件可以在頁面縮放時會觸發
搭配 window.outerWidth/window.innerWidth 的值的變化可以知道有沒有縮放
但是這在 mobile device 的兩指縮放是不會觸發
所以也沒用…
但是針對 mobile 兩指縮放
可以使用 window.visualViewport
window.visualViewport.scale 可以知道現在縮放比例
如果只是要判斷有沒有所放的話
可以使用 resize 事件 + mobile 判斷來拿取 window.visualViewport.scale 或是 let zoom = window.outerWidth/window.innerWidth; 的組合來處理
sample code
let zoom = window.outerWidth / window.innerWidth; function isMobileDevice() { return /Mobi/i.
...
.multiline-ellipsis { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* start showing ellipsis when 3rd line is reached */ white-space: pre-wrap; /* let the text wrap preserving spaces */ } refer - Easiest Way to Truncate Text With Ellipsis in CSS
...
# Intro 當使用 Angular 時, 有時會有需要自己建立一個自定義的元素
通常這個都是為了重複使用
這時會有兩種作法
自己建立一個元件, 再把這元件處理成 module, 這樣就可以有自定義元素了
使用 angular create lib 的方式(https://angular.io/guide/creating-libraries)
如果是在公司內部自己使用, 用 1 或是 2 都沒差
如果是要做成給外部或是別人使用, 甚至是開源出去, 那就是得用 2
順帶一提如果要使用自己定義的元素, 需要安裝 @angular/elements
yarn add @angular/elements # 自己建立元件 這邊會用 custom-element 當成元件名字舉例
ng generate component custom-element 建立起一個 custom-element 元件
之後就是依照寫元件的方式開發
只是得自己手動處理一下在 custom-element/custom-element.module.ts 得添加和輸出與建立自定義元素的設定
import { createCustomElement } from '@angular/elements'; import { createCustomElement } from '@angular/elements'; import { NgModule, Injector } from '@angular/core'; import { CustomElementComponent } from '.
...
# Intro 有時 Mac 會讀不到外接硬碟
可以試試以下方式解決問題
# 重新開機 可能一些未知的因素導致當下讀取不到
可以重新開機後再重新連接外接硬碟
# 啟用外接硬碟的可見性 如果你的電腦系統為在 macOS Big Sur 或 Catalina，那你就需要啟用外接硬碟的可見性。你可以根據以下步驟進行操作。
前往「Finder」>「偏好設定」>「一般」。
此時，你可以看到「在桌面上顯示這些項目」的欄位，勾選「硬碟」和「外接硬碟」的選項。
# 檢查系統資訊中的外部硬碟驅動程式 系統資訊 將會顯示所有連接至Mac的外部裝置、軟體、硬體和網路等所有訊息的地方。因此，你可以先在該位置進行檢測。
前往「應用程式」>「工具程式」>「系統資訊」。
在左側欄位點選「USB」，然後查看外接硬碟的資訊。
如果你可以看見相關資訊，Mac 卻無法顯示外接硬碟，那它可能正在被 macOS 修復。你可以前往「活動監視器」，以檢查是否有「fsck_hfs」或「fsck_exfat」的活動。
# 運行「Apple診斷」以檢測硬體問題 Mac 電腦擁有一套內建的診斷程式「Apple診斷」，以讓你查找故障的硬體問題。修復損壞的硬體也有可能解決Mac讀不到外接硬碟的情況。
拔除所有外接裝置，除了鍵盤、滑鼠等有用的裝置。
重啟Mac，並在電腦啟動時按住鍵盤的「D」鍵，直到看到選擇語言的視窗才放手。
接著，系統就會開始診斷動作，而你也會在介面看到進度列。
完成診斷後，你就會看到電腦所面對的硬體問題以及相對的解決方案。
# 重置 Mac 的 NVRAM 或 PRAM NVRAM 和 PRAM 是 Mac 電腦中的部分暫存。不管開機或關機，它都會保存特定數據。
如果你的Mac無法讀取外接硬碟是基於硬體受損，那你也可以嘗試使用這個方法解決。
重啟 Mac，然後在電腦啟動時同時按住「control + option + P + R」鍵。
按住這些按鍵長達大約 20 秒，直到你聽到電腦重啟的音效，或是看到蘋果標誌出現並消失後才放手。
# 重置 Mac SMC SMC（System Management Controller）負責演算 Mac 的低階功能，因此如果重置 NVRAM或 PRAM 仍無法解決 Mac 外接硬碟無法顯示的問題，那你也可以嘗試重置 SMC。
...