小程序下線了，被迫做了個PWA應用

前兩日我個小程序俾人下架咗，開頭都幾嬲，跟住喺我哋嘅社羣見到羣入面嘅朋友提到：「我個仔每日仲要抽卡，幾個月喇」，佢每日都會俾個仔抽幾張《毛選》語錄，同個仔一齊學習，令到我好感動。

整成App太重磅，整成網站，又怕手機體驗唔好，於是，我諗到可以改造成PWA應用，

其實之前我都同大家一樣一頭霧水，只係聽人講過PWA呢個詞。簡單嚟講，PWA其實係一種特別嘅網頁，普通網頁喺瀏覽器打開嗰時會有地址欄同標籤頁，但整成PWA應用之後，我哋可以將網站捷徑加到桌面，由桌面捷徑打開之後，就會同App Store下載嘅應用一樣，直接全螢幕顯示，冇地址欄，用起嚟好爽，佢本質上就係個網頁，唔需要額外安裝，又唔佔好多空間。

左邊嘅圖，係我用瀏覽器打開，底部會有地址欄，右邊係經由桌面捷徑打開嘅 PWA 應用，佢直接會全螢幕顯示。

咁點樣實現呢？仲簡單，因為之前申請過域名，備過案，加上有小程序嘅代碼，整好之後就可以直接部署。

我直接話俾AI聽 AI叫佢重用小程序嘅代碼，包括抽卡邏輯、卡片主題等等，只係喺分享海報方面，我哋將原本嘅小程序QR code換成應用嘅logo，最後再執嚇網站對應，AI一輪操作，唔使幾個鐘就搞掂曬。

但改完之後我去測試，果然出現咗一大堆問題，喺iOS微信瀏覽器打開時，好似左圖嘅語錄出處同語錄會有重疊，右圖係喺Android手機嘅瀏覽器打開，抽卡結果頁嘅卡片同按鈕，都重疊咗一齊，喺唔同嘅手機同瀏覽器環境，有各種各樣嘅bug，都需要對應處理，喺微信內置瀏覽器打開仲有個伏位，撳分享必須用微信支援嘅分享方式，改成長按分享，又搞咗半日，先至最終搞掂。

之前一直聽講PWA應用做demo好方便，今次親身體驗咗一次，真係幾好，以前好多出名嘅產品demo，都係用呢個方式做MVP驗證，例如早期嘅flomo，冇出流動版本，都係用呢種方式俾用戶體驗。

方法一：直接用瀏覽器

打開手機瀏覽器，輸入網址，就用得。唔使下載，唔佔內存。

方法二：加到桌面（好似App咁用）

加咗之後桌面會多一個圖標，撳開就係全螢幕，同普通App一模一樣。

iPhone：

Safari → 底部「分享」掣 → 加到主屏幕

Android手機：

Chrome → 右上角三個點 → 加到主屏幕 / 安裝應用

鴻蒙手機：

內置瀏覽器 → 菜單 → 加到桌面

以上係常見瀏覽器嘅操作，唔同牌子手機或瀏覽器步驟可能多少有啲唔同，但都係喺瀏覽器菜單入面揾「加到桌面」呢個選項。

加桌面遇到問題？

如果以上步驟都無法添加，咁我都冇計喇...麻煩將下面呢段話發俾AI（DeepSeek、豆包、Kimi都得），佢會一步一步教你：

「我想將一個PWA網頁應用加到手機桌面，我部手機係【你的手機型號】，用嘅瀏覽器係【你的瀏覽器名稱】，請話俾我知具體點樣操作。」

加到桌面之後，呢個最終嘅效果就係同我圖入面噉樣，同小程序冇乜分別。

講真，有時冇事走去了解啲暫時用唔着嘅「無用」知識，關鍵時刻可以派上大用場...

我哋唔應該只係拘泥於自己專業領域嘅嘢，要多學多睇，以我自己為例，其實我唔識寫code，係做產品經理出身嘅，結果喺AI嘅幫助下，學識咗寫code，整咗啲自己嘅小產品嚟玩嚇，用以前有個文藝啲嘅詞嚟講，都算係乜嘢斜槓青年咗哈哈。AI放大咗我哋嘅執行力，但想像力同解決問題嘅能力，依然係AI無法取代嘅。

前兩天我的小程序“被”下架了，一開始還挺生氣，然後在我們的社羣看到羣裏的同志提到：“我兒每天還要抽卡片，幾個月了”，他每天都會給讓孩子抽幾張毛選語錄，與孩子一起學習，讓我很是感動。

做成App太重了，做成網站，又怕移動端體驗不好，於是，我想到了可以改造成PWA應用，

其實之前我也和大家一樣懵逼，只是聽人說起過PWA這個詞。簡單來說，PWA 其實是一種特殊的網頁，普通網頁在瀏覽器打開時有地址欄和標籤頁，而做成 PWA 應用後，我們可以添加網站快捷方式到桌面，從桌面快捷方式打開後，就會和App商店下載的應用一樣，直接全屏展示，沒有地址欄，用起來很舒服，它本質上就是個網頁，不需要額外安裝，也不佔多少空間。

左邊的圖，是我用瀏覽器打開，底部會有地址欄，右邊是通過桌面快捷方式打開的 PWA 應用，它直接會全屏展示。

那怎麼實現呢，更簡單了，因為之前申請過域名，備過案，加上有小程序的代碼，做好後就能直接部署。

我直接告訴 AI，讓它複用小程序的代碼，包括抽卡邏輯、卡片主題等，只是在分享海報上，我們將原來的小程序二維碼換成應用的logo，最後再做下網站適配，AI 一頓操作，不到幾個小時就搞完了。

但改完後我去測試，果不其然的出現了一堆問題，在 iOS 微信瀏覽器打開時，像左圖的語錄出處和語錄會有重疊，右圖是在安卓手機的瀏覽器打開，抽卡結果頁的卡片和按鈕，也重疊在了一起，在不同的手機和瀏覽器環境，有着各種各樣的bug，都需要適配處理，在微信內置瀏覽器打開還有個坑，點擊分享必須用微信支持的分享方式，改成長按分享，又折騰了半天，才最終改好。

之前一直聽說PWA應用做demo很方便，這次親身體驗了一把，確實挺好的，以前許多有名的產品demo，都是用這個方式做MVP驗證的，比如早期的flomo，沒有出移動端，都是用這種方式給用戶體驗的。

方法一：瀏覽器直接用

打開手機瀏覽器，輸入網址，就能用。不用下載，不佔內存。

方法二：添加到桌面（像 App 一樣用）

添加後桌面會多一個圖標，點開就是全屏，跟普通 App 一模一樣。

蘋果手機：

Safari → 底部「分享」按鈕 → 添加到主屏幕

安卓手機：

Chrome → 右上角三個點 → 添加到主屏幕 / 安裝應用

鴻蒙手機：

自帶瀏覽器 → 菜單 → 添加到桌面

以上是常見瀏覽器的操作，不同品牌手機或瀏覽器步驟可能略有不同，但都是在瀏覽器菜單裏找「添加到桌面」這個選項。

添加桌面遇到問題？

如果以上步驟都不無法添加，那我也沒招了...辛苦把下面這段話發給 AI（DeepSeek、豆包、Kimi 都行），它會一步步教你：

"我想把一個 PWA 網頁應用添加到手機桌面，我的手機是【你的手機型號】，用的瀏覽器是【你的瀏覽器名稱】，請告訴我具體怎麼操作。"

加到桌面後，這個最後的效果就是跟我圖裏這樣子，和小程序沒啥區別。

講真的，有時候沒事瞎了解些暫時用不上的"無用"知識，關鍵時刻能派上大用場...

我們不應該只拘泥於自己專業領域的東西，要多學多看，拿我自己來說，其實我不會寫代碼，是乾產品經理出身的，結果在AI的幫助下，學會了寫代碼，做了點自己的小產品玩玩，用以前有個文藝點的詞來說，也算是什麼斜槓青年了哈哈。AI放大了我們的執行力，但想象力和解決問題的能力，依然是AI無法替代的。