:::

自製網頁應用程式!使用Chrome的命令列選項app來製作網頁應用程式捷徑 / Run a Standalone Web APP in Google Chrome’s App Mode

image

你常常使用InboxWunderlist等網頁應用程式(Web APP),但又不想讓它們跟其他分頁混在一起、而希望能夠獨立成為一個視窗嗎?本篇教你利用Google Chrome命令列選項app將常用網頁製作成應用程式捷徑,不僅讓它以獨立無選單應用程式模式開啟,還能將捷徑直接加入Windows的開始 > 所有程式當中!


為什麼需要用獨立視窗開啟網頁 / Why you need open a Webpage in  Application Mode

會需要獨立視窗開啟網頁的理由大致上可以歸納為三項:

image

一般使用Google Chrome的時候,通常會伴隨著分頁列與網址列等操作介面。我們在瀏覽普通網頁的時候會需要它們,但是對一些網頁應用程式(Web APP)來說,這些介面只是占空間,不大實用。

image

另一方面,常常使用的網頁應用程式卻容易跟瀏覽器的其他分頁混在一起。像我工作時常常開啟20幾個分頁,變得讓我難以找到需要的Inbox跟Wunderlist分頁。雖然有像是「Quick Tabs」這樣好用的分頁搜尋擴充功能,但如果可以的話,我還是希望網頁應用程式能夠以獨立的Windows視窗呈現,而且還能像是一般的Windows程式一樣放在工作列當中。

image

一般開啟網頁的方式都得經過 1. 開啟Windows的所有程式、2. 開啟瀏覽器、3. 開啟書籤(我的最愛)、4. 切換到網頁應用程式的分頁。但是這樣的步驟實在是太瑣碎了,我希望能夠直接在Windows的所有程式裡面直接就能開啟我要的網頁應用程式。

為什麼不要用Chrome內建的「建立應用程式捷徑」? / Why don't use Chrome's "Create Application Shortcut"?

講到這裡很多熟悉Google Chrome的人應該會立刻想到Chrome內建的「應用程式捷徑」或是現在改名為「加到桌面」的功能。事實上這個功能有很多限制:

  1. 只能用現在所在分頁的網址,不能自訂網址:有些AJAX網頁應用程式常常㑹在開啟分頁之後修改網址,導致沒辦法直接用所在分頁的網址製作應用程式捷徑。這時候還是能夠使用自己定義的網址比較好。
  2. 不能使用擴充功能:使用內建的「建立應用程式捷徑」會讓Chrome產生一個應用程式,而Chrome的應用程式是沒辦法使用擴充功能。這樣子我就沒辦法使用「Stylebot」之類的擴充功能來客製化網頁的CSS,很不方便。
  3. 會被同步到其他電腦的Chrome上:用「建立應用程式捷徑」產生的Chrome應用程式㑹一直保留在同步帳戶中,除非你手動刪除它。
  4. 不能自訂網頁圖示:「建立網頁應用程式」㑹取用該網頁的圖示設定做為應用程式的圖示,但大部分的網頁都沒能做好圖示設定,所有建立的應用程式圖示都會是空白。

綜合以上所述,我不推薦大家使用Chrome內建的「建立應用程式捷徑」,而是改用以下我介紹的使用命令列選項app來建立。


製作獨立視窗開啟網頁的指令 / Application Mode Command

要建立獨立開啟視窗的捷徑,我們必須要確定兩個參數:

  • Google Chrome的執行檔位置:通常會是在以下路徑:
    "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"
  • 網頁應用程式的網址:例如本Blog:
    http://blog.pulipuli.info

然後參考Google Chrome的命令列選項,使用app選項來呼叫網頁應用程式。綜合之後指令如下:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --app=http://blog.pulipuli.info
建立指令的網頁程式 / Script for Creating Application Mode Command

因為我常常用到這個功能,所以就順便寫成網頁程式了:


建立網頁應用程式的捷徑 / Create Application Shortcut

image

接著我們就可以用建立捷徑的方式,將上面的指令貼在「輸入項目的位置」欄位當中。

image

然後為捷徑命名,例如「布丁布丁吃什麼?」。

image

這樣子就完成了一個捷徑。

image

點開捷徑時,就會出現像上圖一樣的獨立視窗。它不僅隱藏了分頁列與網址列,還會在Windows的工作列上成為獨立的視窗,方便大家使用。


Windows內的使用方式 / Use Application Shortcut in Windows

有了這個應用程式捷徑之後,我們就可以做很多事情。

將捷徑加入「開始 > 所有程式」 / Add Shortcut to "StartMenu > All Programs" Menu

最後我們可以把這個捷徑加到Windows的「開始 > 所有程式」之中。每個版本的Windows處理方式都不一樣,請看Where do Start Menu\All Programs shortcuts reside?這篇的說明。以Windows 7為例,所有程式的路徑如下:

  • C:\ProgramData\Microsoft\Windows\Start Menu\Programs

image

將捷徑加到「所有程式」的資料夾之後,未來就能直接從Windows的「開始」開啟網頁應用程式了。

釘選網頁應用程式到工作列 / Pin Web Application to Taskbar

image

用這種方式建立的捷徑,沒辦法用Windows內建的「釘選應用程式」來把它固定在工作列上。

2016-11-25_160440

這時候就要改用TaskbarPinner (Windows 7適用)、Pin to 8 (Windows 8適用)來釘選。或著也可以將捷徑複製到以下釘選的資料夾位置中:

  • C:\Users\[你的使用者名稱]\AppData\Roaming\Microsoft\Internet Explorer\Quick Launch\User Pinned\TaskBar
TaskbarPinner備份 / TaskbarPinner Backup

在此順便備份Windows 7專用的TaskbarPinner,這工具真的很好用,任何東西都可以盯到工作列上:

結合XLaunchPad選單 / Integrate to XLaunchPad

image

除了使用Windows內建的「開始 > 所有程式」之外,我們也可以把捷徑加入第三方選單工具XLaunchPad中。這樣子就能製作有如平板的選單畫面,操作起來非常方便。

以下順便備份XLaunchPad的資料:

 


網頁應用程式可搭配的擴充功能 / Extensions for Web Application Mode

使用上述地方建立的網頁應用程式能夠搭配擴充功能使用。以下我列出兩個我最常用的擴充功能供大家參考:

自訂網頁樣式:Stylebot / Customize Webpage: Stylebot

stylebot

Stylebot可以讓我們自訂網頁的CSS樣式。這可以做什麼呢?

image

讓我們以郵遞區號查詢功能來做為例子。打開快速查詢 3+2郵遞區號查詢網頁,你找得到在哪裡查詢郵遞區號嗎?

image

利用Stylebox套用自訂的CSS之後,就能夠呈現上面的樣貌。這段自訂的CSS內容如下:

#HeaderContainer, #Breadcrumbs, #LocalNavContainer, .acc-key, #Section_2, .PadinTop20, .BackToTop_2, .FatFooter, #FooterContainer {
    display: none;
}

input[type="Submit"] {
    display: block;
    font-size: large ;
    margin: 0.5rem;
    padding: 0.5rem ;
    width: 50% ;
}

select#city, #cityarea, #Select1 {
    font-size: 3em;
}

input.Submit_1 {
    font-size: 3em;
}

.GreenBold::before {
    content: " ";
    overflow: hidden;
    color: transparent;
    display: block;
}

不過這就不是給一般人使用的功能了。

取得網址:Copy URL + Title / Get URL: Copy URL + Title

在網頁應用程式的模式中,網址列會被隱藏起來,這樣要怎麼取得網址呢?試用了幾個擴充套件之後,我發現最好用的就是「Copy URL + Title」。

image

image

有這個擴充功能之後,就能夠用滑鼠右鍵開啟「Copy URL + Title」選單,進入「Copy URL > Simple URL」取得現在的網址了。

 

還有其他的知名擴充套件,像是擋廣告神器AdBlock、英文文法校對grammarly、網頁手勢Gestures for Google Chrome,都可以在這個模式下正常運作。光是可以使用擴充套件這點,就勝過Chorme內建的「建立應用程式捷徑」功能了。

 


結語 / Conclusion

本篇是以捷徑的方式建立網頁應用程式,這算是Google Chrome的進階應用方式,主要是為了想提升工作效率的Windows進階使用者所寫的教學。

我使用這樣子的方式在Windows中大量網頁應用程式的時間也差不多快一年了。用捷徑建立網頁應用程式的方法雖然看起來繁瑣,但只要建立一次之後,未來就能夠直接在開始程式、XLaunchPad中取用,還能搭配Stylebox調整成自己喜歡的樣式。這方法大幅改善了我的工作效率。

image

舉另一個例子來說,我特別喜歡它可以讓我同時開啟多個相同的Google Doc長文件。這樣我就能直接參照前後文的內容,以免寫出頭尾不符的敘述。這個視窗切割的是搭配Winsplit Revolution使用,這個經典的小工具也常駐在我的電腦中許多年了。

題外話,這篇教學大概半年前我就想過要來介紹,結果還是拖到這麼久才下定決心動筆。本來這次只是想單純寫Chrome命令列選項app的用法,其他部分則是拆開成其他文章來撰寫。後來想想,光是這篇都拖這麼久了,其他部分我也不見得會好好地寫完他們。不如就以建立網頁應用程式捷徑的介紹為主,其他Windows跟擴充功能的介紹就蜻蜓點水帶過吧。

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

  1. 另外介紹好用的指令列選項:「--ignore-certificate-errors」,這可以省略SSL認證錯誤的畫面,好用

    回覆刪除
  2. Chrome的指令列選項:http://peter.sh/experiments/chromium-command-line-switches/
    可是很多Chrome本人卻不見得能夠正常使用,奇怪

    所以我改用Iron Portable,這個就能正常使用「--ignore-certificate-errors」
    http://www.srware.net/en/software_srware_iron_download.php

    備份:
    - GitHub: http://pulipulichen.github.io/blogger/posts/2016/11/IronPortable.zip
    - Google Drive: https://drive.google.com/open?id=0B5UXWzdIPpm0eFJpUG1iN05ZWEU
    - OneDrive: https://1drv.ms/u/s!AqkXZ97o-6JrnRcjHCkjMR0__yXv
    - Box: https://app.box.com/s/oe9te87g4mt7qvmyng3nyvamdhxtwr0c
    - Mega: https://mega.nz/#!EwYFDYxJ!B8fgIunVxFREGBSx4HL4RJ5Ded01kOCvk4TKr3Z3-5k
    - MediaFire: http://www.mediafire.com/file/8s9ojjhsp6dxjrx/IronPortable.zip

    回覆刪除
    回覆
    1. 修正IromPortable.zip在Google Drive的下載連結:
      https://drive.google.com/file/d/0B5UXWzdIPpm0eFJpUG1iN05ZWEU/view?usp=sharing&resourcekey=0-_uiASKaKr-GdacNIXi2moQ

      刪除
  3. 當Google Chrome以獨立app模式開啟時,有些設定會跟普通網頁不太一樣。例如使用window.open開啟有設定width跟height的獨立視窗時,視窗就不會出現網址列。

    要怎麼判斷現在Google Chrome是不是以獨立app模式開啟呢?感謝josemmo的教學,我們可以從CSS跟JavaScript兩個方向著手:

    ````css
    @media all and (display-mode: standalone) {
    /* Here goes the CSS rules that will only apply if app is running standalone */
    }
    ````

    ````js
    function isRunningStandalone() {
    return (window.matchMedia('(display-mode: standalone)').matches);
    }
    ````

    資料來源:https://stackoverflow.com/a/34516083

    回覆刪除