如何判斷web應用是否添加到主屏幕

如何判斷web應用是否從桌面圖標啓動

這就要說到web應用添加到桌面後的顯示模式了，一共有這麼多種，經過mainfest來控制。只要知道啓動模式是什麼，就能判斷出是否從桌面啓動。

fullscreen: 全屏顯示, 全部可用的顯示區域都被使用, 而且不顯示狀態欄chrome
standalone: 讓這個應用看起來像一個獨立的應用程序，包括具備不一樣的窗口，在應用程序啓動器中擁有本身的圖標等。這個模式中，用戶代理將移除用於控制導航的UI元素，可是能夠包括其餘UI元素，例如狀態欄。
minimal-ui: 該應用程序將看起來像一個獨立的應用程序，但會有瀏覽器地址欄。 樣式因瀏覽器而異。
browser: 這是默認的設置。該應用程序在傳統的瀏覽器標籤或新窗口中打開，具體實現取決於瀏覽器和平臺。

IOS桌面圖標啓動

經過桌面圖標啓動後，navigator.standalone會等於true，只要判斷這個變量就夠了。

安卓桌面圖標啓動

經過桌面圖標啓動後，CSS的媒體查詢是可以探測到的，換而用js寫，下面的結果爲True。

window.matchMedia('(display-mode: standalone)').matches

總結

這裏有我實現好的方法，也有npm包，引入後可直接用。很是小，很是簡單
https://github.com/GeoffZhu/i...