:::

擺脫PWA的限制，把任意網頁變成電腦的應用程式：客製化網頁應用程式 / Customize Your Web Application: No PWA, Any Favicon

2月 21, 2022 , , , , 16 Comments Edit Copy Download

1-cover-PWA_Customize_Your_Web_Application.png

哈囉，大家最近吃什麼？這裡是總算有點適應Linux的布丁。

你用過漸進式網路應用程式PWA或網頁應用程式(WebAPP, Web Application)嗎？儘管一直不斷有人主張應該用網頁來取代安裝在作業系統上的原生應用程式，也越來越多原生應用程式改用PWA的形式發佈。然而，對使用者來說卻非常不方便。使用者安裝PWA或網頁應用程式的時候，一般來說只能使用開發者預先設定好的網址、應用程式名稱和圖示。如果你想要把Google試算表中一個你常用的表格建立捷徑、做成應用程式，你會發現其實你只能建立「試算表」應用程式，而不能連到你真正的表格。

為了克服PWA的限制，我開發了工具「PWA-Builder」來產生自訂的網頁<head>內容。以此修改網頁的<head>之後，就能客製化產生自己習慣使用的網頁應用程式囉。如果你也想要自己制訂要使用的網頁應用程式的話，就讓我們繼續看下去吧！

沒工商版面：Xodo PDF Reader & Editor / Non-advertising column: Xodo PDF Reader & Editor

2022-0221-004549.png

(照片來源：Google Play)

Xodo PDF Reader & Editor  (以下簡稱Xodo)是Android和iOS跨平臺的PDF閱讀器與編輯器。儘管是免費軟體，但Xodo卻有著就連桌面版PDF閱讀器都無法做到的豐富功能。我日常使用Xodo來閱讀PDF文件時，最喜歡它完整的註解功能。除了基本的標亮、劃線、翻譯，Xodo也支援自由畫圖跟用打字機在頁面上加入說明。如果PDF檔案編排有問題，我也能用Xodo直接編輯PDF，不論是旋轉、移除、裁切、新增通通都行。一旦同時兼具了閱讀和編輯兩大功能，我就可以在PDF新增空白頁面並撰寫筆記！當然，Xodo也支援了三星的S Pen等電磁筆，真是閱讀PDF的神器啊！

綜合以上所述，Xodo PDF Reader & Editor這個APP讓我喜愛的三大特色如下：

  1. A. 強大的閱讀功能：標亮、劃線、自由畫圖、打字機、以及翻譯，當然還有美觀且順手的操作介面。
  2. B. 不輸給桌面版軟體的編輯工具：頁面的旋轉、移除、裁切、新增，在手機和平板上輕鬆搞定。
  3. C. 讓PDF變成我的筆記本: 只要在PDF新增空白頁，就能在空白頁上用標註工具記錄筆記。讓筆記直接放在PDF裡面，資料來源和靈感一起打包帶走。

如果你也想使用Xodo PDF Reader & Editor的話，你可以直接在Google Play或App Store下載即可。如果希望我更深入介紹Xodo的話，不妨在下面留個言讓我知道吧。

好的，讓我們結束沒工商版面，回到今天要講的主題吧。

你知道網路應用程式嗎？ / What is a Web App?

什麼是好的網頁應用程式？ / Necessities for a Web App

2022-0220-131513.png

在聊聊怎麽客製化網頁應用程式之前，我們先來認識一下一個合格的應用程式是什麼概念。對我來說，應用程式必須滿足兩個條件：

  • 1. 以獨立視窗顯示。這樣我才能明確知道我現在的工作要在哪個應用程式進行。
  • 2. 可以從捷徑直接開啟。捷徑可能是開始程式集的捷徑，也可能是工具列或桌面上的捷徑。

除了上述兩個條件之外，我通常還會要求額外的第三個條件：

  • 3. 能夠使用Google Chrome擴充套件。

建立網頁應用程式的方法 / How to make a Web App?

在瞭解了上述三個網頁應用程式的條件之後，就會發現到，很多號稱可以將網頁做成作業系統應用程式的方法，其實並沒有這麼好用。以下我們來看看四種常見的網頁應用程式建立方式：

2022-0220-132733.png

第一種是最傳統的做法，許多人大多採用書籤(我的最愛)，或是將網址拉到桌面、產生開啟網頁的捷徑。但這種做法開啟的網頁會在「頁籤」內，不是一個獨立視窗。

2022-0220-132755.png

第二種是用跨平臺應用程式開發工具，將網頁內嵌在應用程式中：我以前做過不少用Electron開發的應用程式，例如「webapp-wrapper」。Linux作業系統也有直接用網址產生應用程式的「Nativefier」。但姑且先不論產生出來的應用程式可能佔用大量檔案空間之外，這些應用程式往往也不具備一般網頁該有的右鍵選單、搜尋功能，更別說是擴充套件。結果就是你看到一個長得像是網頁的應用程式，卻不能用一般操作網頁的方式使用它，感覺非常奇怪。

2022-0220-133240.png

第三種是我以前常用的「使用Chrome的命令列選項app來製作網頁應用程式捷徑」。這個方法主要使用Google Chrome的「--app」參數，將指定網頁開啟成網頁應用程式。在Windows作業系統時我一直使用這個方法，但到了Linux作業系統上，網頁應用程式的圖示只能固定顯示Google Chrome，不會動態調整成現在網頁使用的網站圖示(favicon)。最後我只能捨棄「--app」這個做法。

2022-0220-142356.png

(圖片來源：Google Workspace學習中心)

最後一種，是較多人知道的「建立捷徑」做法和PWA的「安裝應用程式」。前者是進入「更多」、「更多工具」、「建立捷徑」裡，設定捷徑名稱和勾選「在視窗中開啟」方塊。後者是如果網頁有設定好PWA，那麼網址列右邊就會出現「安裝應用程式」的加號按鈕，手機版則是會直接提示使用者將PWA安裝在桌面上。

這兩個方法是目前Google Chrome把網頁識別為「應用程式」的主要做法。它們都符合了我對網頁應用程式的需求：獨立的視窗、可安裝到開始程式集、也可以使用擴充套件，而且在Linux、Chrome OS、Windows等不同作業系統都可以使用。對了，以前的網頁應用程式是不能使用擴充套件，不知道在什麼時候改版了？

儘管如此，「建立捷徑」和「安裝應用程式」的做法，其實還是有兩個很棘手的限制：

  1. 兩者都無法自訂圖示。有些網頁並沒有設定網頁圖示的話，網頁應用程式只會用網頁標題的第一個字作為圖示，產生的網頁應用程式不易識別。
  2. PWA的「安裝應用程式」還不能自訂網址。一般情況下，使用者只能使用manifest.json裡面設定的short_name、start_url、icons來建立網頁應用程式。

第二個PWA的限制特別令人困擾。以下我用Google試算表為例子，說明PWA這個難以直接理解的限制。

PWA的限制 / Impediments of PWA

2022-0220-145402.png

這是來自於我以前發佈過的「使用Google Spreadsheet製作翻譯檔」的例子。由於常常有批次翻譯需求，我想要把這個試算表做成網頁應用程式，那要怎麽做呢？

以「建立捷徑」的做法來說，操作步驟如下：

  1. 點選右上角的三個點 (更多)。
  2. 進入「更多工具」(More tools)與「建立捷徑」(Create shortcuts)
  3. 在建立捷徑對話方塊裡，勾選「在視窗中開啟」方塊，按下「建立」。

2022-0220-145223.png

這裡你可能會注意到第一個奇怪的地方。雖然網頁名稱是「批次翻譯試算表 - Google試算表」，但建立捷徑時的預設名稱是「試算表」。

好吧，既然可以自訂名稱，讓我們把名稱改成「批次翻譯試算表」好了。Google Chrome會自動把「批次翻譯試算表」安裝到桌面和開始程式集。

2022-0220-145635.png

然而，當你開啟「批次翻譯試算表」的時候，你看到的並不是真的「批次翻譯試算表」，而是Google試算表的首頁。

2022-0220-150312.png

這是因為Google試算表底下的每個網頁都連結到了「試算表」的manifest.json，而manifest.json則預先決定了PWA網頁應用程式的起始網址為「https://docs.google.com//spreadsheets/?usp\u003dinstalled_webapp」。最後結果就導致了我們沒辦法直接把「批次翻譯試算表」新增為網頁應用程式。

為了克服這個問題，我嘗試了各種做法。最後發現，直接修改網頁的<head>內容，可能是最簡單、最快的解決方案。接著就讓我們來看看要怎麼做吧。

產生客製化的網頁應用程式 / Make a Customized Web APP

2022-0220-164215.png

要產生客製化的網頁應用程式需要經過三個階段的操作：

  • Step 1. 產生客製化的<head>語法。
  • Step 2. 修改網頁的<head>。
  • Step 3. 建立捷徑。

讓我們一步一步來操作。

Step 1. 產生客製化<head>語法 / Build a custom <head> code

不知道<head>語法怎麽寫？沒關係，我也不會沒事一直記著<head>語法的標籤內容。所以我開發了小工具「Shortcut Head Modifier」來幫助我們建構<head>語法：

2022-0220-152154.png

在Shortcut Head Modifier裡，我們有兩個需要輸入的欄位：

  1. Title：應用程式名稱，任何語言皆可。
  2. Favicon：應用程式圖示的網址。例如「https://blog.pulipuli.info/favicon.ico」。

其中比較需要說明的是Favicon圖示的取得和上傳的網址。

如何取得圖示網址？ / How to get the URL of the favicon?

2022-0220-152418.png

我在Shortcut Head Modifier裡加入了Favicon的搜尋和上傳工具。這裡又分成兩個步驟：取得圖示檔案，跟上傳圖示並取得網址。

Step 1-1. 取得圖示檔案 / Search a suitable icon

你可以在「Find Favicon」輸入想要搜尋的關鍵字，然後到flaticon、Findicons、Icon Ninja搜尋並下載圖示。這三個網站的圖示大多都可以免費使用，只要記得註明來源即可。

在這裡我想要為「批次翻譯試算表」找個漂亮的圖示。我在Find Favicon輸入翻譯的英文「translation」，按下「flatcon」。接著Google瀏覽器會開啟分頁，顯示flaticon的搜尋結果。

2022-0220-152756.png

我覺得第四個搜尋結果還蠻容易識別的，那我們來下載這個圖示吧。

2022-0220-153114.png

將滑鼠移動到該圖示上，旁邊會出現「Download PNG」下載按鈕。

2022-0220-153127.png

從這裡我們可以看到Translate圖示是來自Soodesign，非常感謝。接著讓我們按下「Free download」下載圖示。

translate.png

(圖片來源：Flaticon)

我們把圖示存到電腦後，接下來要找個地方上傳才行。

Step 1-2. 上傳圖示並取得網址 / Upload the icon and get its URL 

2022-0220-153547.png

接著回到Shortcut Head Modifier，使用「Post Image」上傳工具來上傳圖示吧。按下「Post Image」後，Google瀏覽器會開啟分頁。

2022-0220-153912.png

我們在postimage網頁裡按下「Choose images」，並選擇剛剛下載的圖示，進行上傳的動作。

2022-0220-154121.png

上傳完成後，你可以在下面找到「Direct link」，並在右邊看到複製的按鈕。按下複製按鈕後，你會取得剛剛上傳的圖示網址。以我的例子來說，網址如下：

https://i.postimg.cc/prpGYFcc/translate.png

Step 1-3. 設定Shortcut Head Modifier並取得<head>語法 / Get the custom <head> code in Shortcut Head Modifier

2022-0220-154650.png

有了圖示網址後，我們就可以回到Shortcut Head Modifier，將圖示網址輸入Favicon裡。確認Title跟Favicon都有正確設定後，下面的「Output」會顯示對應的<head>語法。我們可以按「COPY」按鈕取得<head>語法。最後的<head>語法如下：

<head>
  <title>批次翻譯試算表</title>
  <link rel="icon" type="image/png" href="https://i.postimg.cc/prpGYFcc/translate.png" />
</head>

接下來我們就要用這段<head>語法來取代網頁本身的<head>。

Step 2. 修改網頁的<head> / Change the <head> of the web page with custom <head> code

2022-0220-145402.png

我們來到想要建立網頁應用程式的網頁，例如這個「批次翻譯試算表」。它的網址如下：

https://docs.google.com/spreadsheets/d/15WtJ7t7x5OZLtK3uxdDUApYISaAFPe62V-CfRYcwDJ0/edit?usp=sharing

2022-0220-155757.png

接著我們來開啟開發者工具(Developer Tools)。你可以用以下方式開啟開發者工具：

  1. 點開右上角的「更多」的點點圖示。
  2. 進入「更多工具」(More tools)。
  3. 開啟「開發者工具」(Developer tools)。

或是使用快捷鍵「Ctrl + Shift + i」開啟。

2022-0220-155908.png

在開發者工具裡，1. 最上面的頁籤中進入「元素」(Elements)；2. 在元素頁籤的上方DOM檢視器裡找到<head>標籤。

2022-0220-160108.png

對<head>標籤按右鍵，選擇「編輯HTML」 (Edit as HTML)。

2022-0220-160241.png

按「Ctrl + a」全選原本<head>的內容。

2022-0220-160418.png

再把剛剛取得的<head>語法貼上。然後在開發者工具的其他地方點一下滑鼠。

2022-0220-160628.png

此時網頁的樣式會變得很奇怪，但你可以注意到網頁的頁籤裡，網頁名稱和網頁圖示變成了我們在Shortcut Head Modifier設定的樣子。這樣我們就準備好要來建立捷徑囉。

Step 3. 建立捷徑 / Create a Shortcut

2022-0220-163823.png

接下來我們就用之前已經知道的建立捷徑的方式來建立捷徑。

  1. 點選右上角的「更多」圖示。
  2. 進入「更多工具」(More tools)。
  3. 點選「建立捷徑」(Create shortcut)。

2022-0220-164148.png

記得打勾「以視窗開啟」(Open as windows)。按下「建立」(Create)。

2022-0220-164342.png

此時本來在Google瀏覽器頁籤之一的網頁，會轉換成網頁應用程式。不過網頁這時候還是保持著很奇怪的樣式。沒關係，我們把它關掉吧。

2022-0220-164445.png

在開始程式集搜尋「批次翻譯試算表」，可以看到剛剛客製化的網頁應用程式。把它開啟看看。

2022-0220-164535.png

這次就是正確的網頁應用程式囉。

至此為止，客製化網頁應用程式就大功告成囉。

結語 / Warp up

2022-0220-164843.png

使用修改<head>語法來客製化網頁應用程式的做法，可以不受網頁開發者的限制，客製化網頁應用程式的網址、名稱和圖示。這個方法我已經使用了四個月左右。現在我所使用的Linux、Windows和Chromebook裡，相當多的應用程式都已經是這種客製化的網頁應用程式。

2022-0220-165451.png

如果能活用客製化網頁應用程式的方法，那就連Google瀏覽器擴充套件也可以轉換成網頁應用程式。我目前在Linux和Chromebook的LINE都是由擴充套件轉換而來的網頁應用程式，這樣我就能從開始程式集搜尋「LINE」並直接開啟，非常好用。

不太穩定的應用程式同步功能 / Unreliable app sync in Google Chrome

2022-0220-165125.png

原本建立的網頁應用程式應該會出現在Google瀏覽器的「chrome://apps」中，不過這個功能在不同作業系統會有不同的表現方式。Google之前宣佈即將在2022年6月停止支援Chrome Apps。不知道是不是因此影響了網頁應用程式的功能呢。

2022-0220-165831.png

此外值得注意的是，使用此方法建立的客製化網頁應用程式，會被Google瀏覽器視為獨立的應用程式。在Chrome同步中，應用程式(App)的同步預設會被開啟。這將會導致你在不同電腦上建立的客製化網頁應用程式，會因為同步而重複出現在開始程式集的選單中。

然而奇怪的是，應用程式同步似乎會隨著不同的作業系統會有不同的表現。我在Ubuntu操作的時候，應用程式會同步出去，但不會同步其他電腦的應用程式進來；Windows似乎是完全不會同步出去，也不會同步進來；而在Chromebook操作的時候，應用程式則會完整地與其他電腦同步。最後我的Chromebook塞滿了其他電腦建立的客製化網頁應用程式。有些網頁應用程式能成功同步圖示，但大多數情況下會找不到圖示，只能顯示網頁應用程式名稱的第一個字。

2022-0220-170647.png

後來我就直接關閉應用程式的同步功能，另外維護一張試算表，記錄自己建立的客製化應用程式。當然，這張試算表也被我建立成客製化應用程式了。

那麼這次客製化網頁應用程式的教學就到這裡了。寫到最後，我有個問題想要問問大家：

你想要把什麼網頁建立成網頁應用程式嗎？

  • A. 記錄我私人但常用資訊的試算表：可以省下我從Google雲端硬碟開啟的時間。
  • B. 線上購物網站的購物車：疲憊的時候打開購物車，我又獲得了前進的動力。
  • C. YouTube上我追蹤的頻道：認真學習如我，隨時打開政治大學人工智慧與數位教育中心的YouTube頻道，是一定要的。
  • D. 其他：在下面留言分享吧。

歡迎在下面的留言處跟大家分享你的想法。你的意見都是我繼續分享的動力喔！

如果你覺得我這篇實用的話，請幫我在AddThis分享工具按讚，或是將這篇分享到Facebook等社群媒體吧！想在社群媒體追蹤我的話，歡迎到我的Facebook粉絲專頁「布丁布丁吃什麼？」按個讚喔！

不知道這篇文章有沒有讓你吃到有趣的東西呢？我是布丁，期待下次見！

總共16 則留言 ( 我要發問 , 隱藏留言 顯示留言 )

  1. 布丁布丁吃布丁2022年2月22日 下午5:27

    有網友建議可以修改Desktop Entry，就能使用Google Chrome的app參數搭配任意icon了。
    做法大致上像是這一篇：
    https://askubuntu.com/a/899562

    不過很遺憾的，這個方法並不適用於Google Chrome的app模式。

    https://blogger.googleusercontent.com/img/a/AVvXsEjYd6NErUaEP319w7YUjiXQVkHc_cu31LNeb09T-jEq1kSPqiQv0nxarEVh15TMpVYzIbElpE2VIwgmUURNie26twNUT42WAFpFzbSM0VyTkzuG9IREo6vvv5LZR-ITju6sPbr6Dx-XNBUwrGGnrlmOnzL3JVTLyGQoIJgFWzgH2GyXCokkhGA
    首先我們先用KDE Menu Editor來建立應用程式。這個做法跟上面講到的，用純文字編輯器編輯.Deskop檔案差不多。
    圖示的部分我用了綠色的外星人，指令則是用app參數開啟Google Chrome。指令如下：
    /usr/bin/google-chrome-stable --app=https://blog.pulipuli.info/

    https://blogger.googleusercontent.com/img/a/AVvXsEhQEL7JnyzCKlxVKKy9TgGZLkBInGStJQw-jSZFnGv_lxymhu2MYGrx3Ge2xQ2FJz7efa0-E2ttSQj9e82Pnyr6WdBdDaNQyLG72H8qwgN8qLztpfCCTXH4Rj3tHPWjL_BtAjEspSYP41ky28JuVaz7w_BA33ycgU_TEJbuGrBvvCttdaVd060
    搜尋應用程式，可以看到名為APP的綠色外星人。

    https://blogger.googleusercontent.com/img/a/AVvXsEjdGiThZZqdT-W8rQ7tcOVY_71LP08_1aNUY6X9VS1EtmQ1O2m08-jlAWoovGKcgohb5aniw3oOARL7JDkPJiE14gsx1TANh8r4Mhl775RdMHPJ-SmDLtglkw0D9rtE23Tu0v_z9xSAEJl8Lih4mpFrm6dA0t47iK_cNDpNLvg0Idu4zMMcu5A
    但如果開啟了這個應用程式，你會發現Google Chrome關閉了外星人圖示的執行緒，用他本來的執行緒來開啟應用程式模式。

    https://blogger.googleusercontent.com/img/a/AVvXsEhUgIaCasAeYKw7yneIOFVAs6-zAc0aPMPGPa-dYGfUepf8mjfb5Kv3vuLrZZUWkQKkSwObToT_nZj7aF9zL-FVrD8Nn8OOQgmkJPL0OcyGaDrVmD_qIcLFLh2y81lFlPnV-LijSLjRoDURefng6nso_aslGjrReZEMTL4CG7PmfjPp3NHU_JQ
    在開啟太多應用程式的情況下，下面的任務管理器只會顯示圖示。但全部都是Google Chrome圖示的話，你也很難搞清楚現在到底開啟了什麼。

    https://blogger.googleusercontent.com/img/a/AVvXsEgWCv5T0MKEaPctApS4jz_vGKRIQ6Vw_YS9gHuCWzn7NZL6rMfXY-XqnkcHs8XButgKfF1Wt6SeFa5G-0JJwDatcZIdqCAbEvQn2oZUHtkxhrcEtxsVi2tSEPXZs1_VEo57QiAdphXSWzW3oQxh5oWWRb3TQkbTbPy3JmX_b171VozoCGfAjNQ
    相對的，如果使用這篇提到的方法產生客製化的應用程式，開啟很多應用程式之後，你依然可以在任務管理器看到不同的圖示。

    必須注意的是，Google Chrome的--app模式，在Linux裡面與Windows裡面的表現方式不同。Windows裡面用--app開啟時，視窗的圖示會跟著目前的網址變化。但Linux只會跟應用程式本身。
    這大概就是使用Google Chrome的app應用程式模式跟客製化應用程式的差別。

    ----

    http://www.leonerd.org.uk/code/xseticon/
    對了，也有人建議可以用xsection在視窗開啟後動態設定圖示。
    但這只能在Linux運作。

    我時常需要在Linux、Windows與Chrome OS等不同環境下工作，所以最後才會選擇使用客製化網頁應用程式的方法。

    回覆刪除
    回覆
    1. 匿名2024年8月3日 上午11:49

      您好~目前chrome似乎已更新成最新版本，前面設定都沒問題，但到了「以視窗開啟」，已沒有這個選項，目前也無法建立捷徑

      刪除
    2. 匿名2024年8月3日 上午11:51

      另外使用您在前開網頁https://blog.pulipuli.info/2016/11/chromeapp-run-standalone-web-app-in.html介紹的方式建立，會出現「如果開啟了這個應用程式，你會發現Google Chrome關閉了已設定好的圖示的執行緒，用他本來的執行緒來開啟應用程式模式。」也就是上開網頁介紹的方式似乎因為CHROME更新版本後已不適用，請問有什麼方式可以建立呢

      刪除
    3. 布丁布丁吃布丁2024年8月3日 晚上7:03

      您好，

      Shortcut Head Modifier已經進化為PWA的形式了。

      1. 開啟Shortcut Head Modifier
      https://github.com/pulipulichen/PWA-Builder

      2. 輸入Title, Favicon圖示的網址, Scope設定為目標網址的網域

      Scope的意思是在這個網址底下的網頁都會被視為是同一個APP。
      舉例來說，如果你的目標是「https://blog.pulipuli.info/2022/02/customize-your-web-application-no-pwa-any-favicon.htm」
      那Scope設為「https://blog.pulipuli.info/」
      如此一來，這個網址會被視為是在同一個APP裡面開啟「https://blog.pulipuli.info/2024/08/a-chair-that-can-hang-things-is-a-good-chair.html」

      3. 開啟開發者工具，在Console貼上程式碼並執行。

      Google Chrome在第一次執行的時候會跳出警告。請仔細閱讀警告的處理方式，並輸入指定文字。然後第二次之後就可以執行貼上的程式碼了。

      4. 建立捷徑

      操作方式如同本網頁說明的建立捷徑。
      不同版本的Google Chrome會把此功能擺在不同的地方，請自行找一下。

      建立捷徑時記得打勾「以視窗開啟」(Open as window)。

      5. 關閉變成PWA的視窗。

      6. 從開始程式集裡面開啟剛剛建立的PWA，完成。

      ----

      使用此方法時需要搭配Google Chrome擴充套件Always Disable Content-Security-Policy
      https://chrome.google.com/webstore/detail/ffelghdomoehpceihalcnbmnodohkibj

      部分對資安有嚴格設定的網站不能使用這個方法把它建立成PWA，例如GitHub。

      此方法在我目前使用的Kubuntu 22.04上運作順暢。

      刪除
    4. 匿名2024年8月5日 中午12:29

      您好~在第三個步驟「開啟開發者工具，在Console貼上程式碼並執行」，會一直出現Uncaught SyntaxError: Unexpected token '<'，請問要如何解決這個問題呢

      刪除
    5. 匿名2024年8月5日 中午12:35

      且因CHROME更新的問題，最新版本似乎無法使用「以視窗開啟」(Open as window)。」

      刪除
    6. 布丁布丁吃布丁2024年8月5日 下午4:44

      您好，

      嗯...看來是分不清楚JavaScript跟HTML的差別。

      那...我建議還是不要採用這個方案好了。這畢竟不是正規的做法。
      還是具備前端開發能力再來嘗試比較好吧。

      刪除
  2. gholk2022年2月22日 晚上8:13

    我用 xfce4 時 chromium 視窗列的圖示會跟著網站的 favicon 跑欸？結論：報 bug 給 kde ；只能說 linux 下各環境差太多了，很不方便。

    回覆刪除
    回覆
    1. 布丁布丁吃布丁2022年2月24日 下午4:48

      To gholk，

      KDE跟GNOME都是這樣喔，很久之前我就認命了 0.0
      很久沒用xfce4了，之前舊版本的xfce4對高解析度螢幕支援不太好。現在我主要使用KDE。

      刪除
  3. 訪客2022年2月23日 中午12:11

    你好，請問要如何在手機上的Kiwi瀏覽器建立LINE的網頁應用程式？已試過修改head語法後再添加，但仍然無法開啟…

    回覆刪除
    回覆
    1. 布丁布丁吃布丁2022年2月24日 下午4:46

      您好，

      您說的Kiwi瀏覽器是指這個嗎？
      https://play.google.com/store/apps/details?id=com.kiwibrowser.browser

      Kiwi的確可以安裝LINE擴充套件
      https://chrome.google.com/webstore/detail/line/ophjlpahpchlmihnnnihgmmeilfjmjjc?hl=zh-TW

      雖然可以把LINE擴充套件的頁面用「加到主畫面」加入到Android桌面、新增捷徑，但那個捷徑無法開啟。
      「加到主畫面」我想應該桌面版Google Chrome的「新增捷徑」應該是不同概念。

      結論是本文章的方法無法用於Android上用Kiwi瀏覽器的LINE擴充套件，跟head語法無關喔。

      刪除
    2. 訪客2022年2月27日 晚上9:01

      對喔，就是Android上的那個瀏覽器沒錯。
      Android裡可以裝瀏覽器擴充套件的瀏覽器app不多，Kiwi就是其中之一。

      然後我看了一下手機版Chrome一樣也有「加到主畫面」按鈕，鑒於Kiwi瀏覽器是基於Chrome改成的，所以我想就算它跟桌面版的「新增捷徑」或許不同，但和手機版Chrome的「加到主畫面」應該是一樣的。

      其實我之所以會想用LINE擴充套件 是因為LINE Lite宣布在這個月底會結束服務：
      https://finance.ettoday.net/news/2181057
      https://udn.com/news/story/7088/6070131
      https://news.ebc.net.tw/news/living/300380

      那所以看起來在Android真的是沒其他辦法可以新增LINE了嗎？🥺

      刪除
    3. 布丁布丁吃布丁2022年3月1日 上午11:15

      您好，

      Android的「加到主畫面」，跟桌面版作業系統以指令列為主的捷徑，的確是不同概念。

      可能只能打開Kiwi手動開啟了吧。

      手機瀏覽器通常會設定成網頁在背景時完全停止。
      這樣的話，LINE擴充功能的通知、檔案傳輸功能，不知道還能不能正常運作？

      刪除
    4. 布丁布丁吃布丁2022年3月1日 晚上11:44

      我試了一下用Kiwi作為LINE的替代品，結論是不太可行。

      1. Kiwi的LINE擴充功能有通知功能，但不穩定。
      2. Kiwi開啟的分頁會被系統砍掉。砍掉後就要重新登入。
      3. 當螢幕關閉時，不太能指望可以收到通知。

      結論是，Kiwi應該作為LINE擴充功能的專用APP。
      把LINE擴充功能設為首頁，開啟時用儲存的帳號密碼登入，查看和溝通。
      但如果切換到其他程式，那應該當LINE斷線了。

      刪除
  4. 布丁布丁吃布丁2023年1月14日 晚上9:27

    https://github.com/pulipulichen/Chrome-Shortcut-Head-Modifier
    更名為
    https://github.com/pulipulichen/PWA-Builder
    喔

    回覆刪除
  5. 布丁布丁吃布丁2023年3月28日 晚上10:23

    如果想要看看自製的PWA有沒有被Chrome同步的話，可以從以下網址進入檢查：

    chrome://sync-internals/

    真的是意外發現，這裡可以看到很多細節。

    如果要管理PWA App的話，則是需要到這裡來設定：
    chrome://apps/

    但是我的Chromebook所使用的版本111.0.5563.74已經沒有APP功能了。
    筆電還在用106.0.5249.91，還有APP功能。

    在Linux裡面使用Google Chrome的好處之一就是不會被強制升級，該說是好處嗎？

    回覆刪除

訂閱： 張貼留言 (Atom)