方格子開發誌 #12|PWA 給你仿 APP 的無縫閱讀體驗 ft. 豆皮壽司來三盤

更新於 發佈於 閱讀時間約 3 分鐘

又見面了!上次和大家分享新功能,又過了近一個月,本來想說:「就這麼拖稿下去,應該也不會被發現吧?」

但是,看到冨樫義博老師受腰痛折磨,仍每天在 twitter 上更新進度,如此不屈不撓的精神激勵了獅獅的上進心 (。・ω・。)(還有羞恥心)。

因此,今天要來向大家分享新功能,它叫做 —— 漸進式網頁應用程式(PWA, Progressive Web Application)

PWA? Is that good to eat?

漸進式 ⋯⋯ 網頁 ⋯⋯ 啥?

火星語我們就先不說了,有興趣的格友們,我們下集做個影片給大家介紹介紹(並不會)。簡而言之,PWA 提供了許多功能,讓我們的「網頁」瀏覽體驗變得更接近「原生 APP」

比方說,以前要來方格子看文章,都要先經過三個步驟:

  • 打開手機裡的網頁瀏覽器 APP
  • 點擊書籤裡面的「方格子」
  • 一邊想晚餐要吃什麼,一邊等方格子出現在你面前

是不是很麻煩呢?

從今以後,這些冗長的步驟將從你的人生中消失!為您隆重介紹 —— 加入主畫面功能(好不帥氣的名字 ಥ_ಥ)。

Before & After:將捷徑加入主畫面後,點開捷徑瀏覽方格子時,視窗畫面內就不會有瀏覽器的預設網址列、工具列,可以全螢幕瀏覽站上的好內容!

Before & After:將捷徑加入主畫面後,點開捷徑瀏覽方格子時,視窗畫面內就不會有瀏覽器的預設網址列、工具列,可以全螢幕瀏覽站上的好內容!

iOS Safari 步驟教學:走捷徑只要兩秒鐘~ ♫

那麼,我們就馬上來看看新功能怎麼運作吧!

1. 打開方格子,點擊底部的這個按鈕

(有人知道它叫什麼名字嗎?)

(有人知道它叫什麼名字嗎?)

2. 點選「加入主畫面」

raw-image

3. 按下「新增」

新增啦哪次不新增

新增啦哪次不新增

4. 回到主畫面點擊捷徑:享受更乾淨的閱讀介面

  so fantastic so fun! 是不是很簡單呢?(沒錯,我死都不回 Line)

so fantastic so fun! 是不是很簡單呢?(沒錯,我死都不回 Line)

Android Chrome 步驟教學:一樣只要兩秒鐘~ ♫

1. 打開方格子,點擊右上角的這個按鈕

raw-image

2. 點選「加到主畫面」

raw-image

3. 按下「新增」

raw-image

4. 回到主畫面點擊捷徑:享受更乾淨的閱讀介面

輕輕鬆鬆新增完畢!

輕輕鬆鬆新增完畢!

未來無論是通勤時、閒暇時、躺在床上耍廢時、遠距開會時,只要簡單動動一根手指,馬上就可以遁入方格子,享受閱讀與文字!

其實,除了捷徑之外,PWA 還有其他強大又實用的功能,還在獅獅的秘密實驗室試驗中,看看這些新玩意兒是否能讓方格子變得更棒。格友們,是不是也和我們一樣期待呢 (●°u°●)​ 。


題外話:稻荷壽司 No.1

raw-image


天氣變熱後,壽司店成了最常造訪的餐廳,我吃壽司只有一個原則,那就是稻荷壽司點爆。

其他朋友都很不解,同樣的價格可以吃到鮭魚、鮪魚或海貝,為什麼要點無聊的豆皮?還點三盤?

豆皮才不無聊,你才無聊 (`Д´),吸飽湯汁、微蘸醬油、鹹鹹甜甜的豆皮壽司是最棒的!

格友們的必點壽司又是什麼呢?



那麼,今天的開發誌就到這裡囉,希望下次見面時,我們已經看完新的獵人了(可以吧 ⋯⋯ 冨樫老師?),下次見!

留言
avatar-img
留言分享你的想法!
方格子 vocus-avatar-img
2023/08/03
在 Google News 追蹤 vocus,精選內容隨手閱讀提及了這篇文章,趕快過去看看吧!
壹肆說-avatar-img
2022/06/10
鮭魚!
 -avatar-img
2022/06/10
不回Line 何必裝呢?XD
Thomas Tang-avatar-img
2022/06/10
還是期待能有app推出~
avatar-img
方格子 vocus 官方沙龍
337.6K會員
3.2K內容數
哈囉,歡迎來到方格子 vocus 的官方沙龍! 在這裡你可以參與方格子 vocus 的發展旅程,接受到所有關於 vocus 的最新動態,包含平台重大功能更新、活動消息、各房間發佈的最新內容,甚至是徵才資訊等等,現在就按下「加入」,與 vocus 一起展開精彩的創作冒險吧!
2023/03/02
如何在頁面上建立足夠且具有內容相關的連結 一直是方格子努力的目標。在過去方格子的閱讀頁上,我們提供了「上下篇區塊」,讓使用在發布文章的同時,可以快速建立文章的閱讀脈絡,也新增了「其他內容區塊」,讓同一作者與專題的文章可以更有系列性的被收攏,作者的文章與文章之間可以因此很快地被串連起來!
Thumbnail
2023/03/02
如何在頁面上建立足夠且具有內容相關的連結 一直是方格子努力的目標。在過去方格子的閱讀頁上,我們提供了「上下篇區塊」,讓使用在發布文章的同時,可以快速建立文章的閱讀脈絡,也新增了「其他內容區塊」,讓同一作者與專題的文章可以更有系列性的被收攏,作者的文章與文章之間可以因此很快地被串連起來!
Thumbnail
2022/09/14
在過去,作者都是自己實踐工人智慧,在欄位中輸入自己想要為文章下的關鍵字們。而就在今天此時此刻 Right now!!格友們會發現在輸入欄位下方多了「建議標籤」的貼心推送!
Thumbnail
2022/09/14
在過去,作者都是自己實踐工人智慧,在欄位中輸入自己想要為文章下的關鍵字們。而就在今天此時此刻 Right now!!格友們會發現在輸入欄位下方多了「建議標籤」的貼心推送!
Thumbnail
2022/05/20
時光匆匆,距上次本獅以文會友已是快要兩個月前了( ̄. ̄)+ 今天發佈這篇,是因為本獅這兩個月在各種忙碌中,特別想要浮出水面向各位格友說說一個近期的大改動--交易流程換新囉!
Thumbnail
2022/05/20
時光匆匆,距上次本獅以文會友已是快要兩個月前了( ̄. ̄)+ 今天發佈這篇,是因為本獅這兩個月在各種忙碌中,特別想要浮出水面向各位格友說說一個近期的大改動--交易流程換新囉!
Thumbnail
看更多
你可能也想看
Thumbnail
大家好,我是一名眼科醫師,也是一位孩子的媽 身為眼科醫師的我,我知道視力發展對孩子來說有多關鍵。 每到開學季時,診間便充斥著許多憂心忡忡的家屬。近年來看診中,兒童提早近視、眼睛疲勞的案例明顯增加,除了3C使用過度,最常被忽略的,就是照明品質。 然而作為一位媽媽,孩子能在安全、舒適的環境
Thumbnail
大家好,我是一名眼科醫師,也是一位孩子的媽 身為眼科醫師的我,我知道視力發展對孩子來說有多關鍵。 每到開學季時,診間便充斥著許多憂心忡忡的家屬。近年來看診中,兒童提早近視、眼睛疲勞的案例明顯增加,除了3C使用過度,最常被忽略的,就是照明品質。 然而作為一位媽媽,孩子能在安全、舒適的環境
Thumbnail
我的「媽」呀! 母親節即將到來,vocus 邀請你寫下屬於你的「媽」故事——不管是紀錄爆笑的日常,或是一直想對她表達的感謝,又或者,是你這輩子最想聽她說出的一句話。 也歡迎你曬出合照,分享照片背後的點點滴滴 ♥️ 透過創作,將這份情感表達出來吧!🥹
Thumbnail
我的「媽」呀! 母親節即將到來,vocus 邀請你寫下屬於你的「媽」故事——不管是紀錄爆笑的日常,或是一直想對她表達的感謝,又或者,是你這輩子最想聽她說出的一句話。 也歡迎你曬出合照,分享照片背後的點點滴滴 ♥️ 透過創作,將這份情感表達出來吧!🥹
Thumbnail
如果你認為瀏覽器只是一個開分頁的工具,那麼你就錯了!Arc 帶給你的不僅僅是瀏覽器的功能,更是一個全新的瀏覽體驗。Arc 徹底顛覆了你對瀏覽器的認知,讓每一個分頁在閒置一段時間後自動關閉,就像手機上的 App 一樣。區分不同的「空間」、釘選分頁、開啟畫中畫播放影片、拖拉分隔頁面....
Thumbnail
如果你認為瀏覽器只是一個開分頁的工具,那麼你就錯了!Arc 帶給你的不僅僅是瀏覽器的功能,更是一個全新的瀏覽體驗。Arc 徹底顛覆了你對瀏覽器的認知,讓每一個分頁在閒置一段時間後自動關閉,就像手機上的 App 一樣。區分不同的「空間」、釘選分頁、開啟畫中畫播放影片、拖拉分隔頁面....
Thumbnail
今天在瀏覽方格到處瀏覽方格的時候,發現自己頁面裡多了一個奇怪的板塊。 我想說我什麼時候多了一個「三溫暖」出來,是不是睡覺前沒把手機放好,點到什麼了。看了半天,也看不出個所以然,點了其他幾篇,好像也只有這篇出現這個板塊,不知道是不是方格的「系統推薦」,懷疑是不是手機版的bug,手機chrome有個「電
Thumbnail
今天在瀏覽方格到處瀏覽方格的時候,發現自己頁面裡多了一個奇怪的板塊。 我想說我什麼時候多了一個「三溫暖」出來,是不是睡覺前沒把手機放好,點到什麼了。看了半天,也看不出個所以然,點了其他幾篇,好像也只有這篇出現這個板塊,不知道是不是方格的「系統推薦」,懷疑是不是手機版的bug,手機chrome有個「電
Thumbnail
首先為什麼要設定facebook 在打開外部網站時,不要使用fb app本身來打開網頁? 我想大部份人在滑fb需要點開fb以外的網站時,都是看一些有趣的文章,業配連結等等,也知道看這些網站時都會搭配大量的廣告。有些人為了不想看這些廣告,會去下載手機內建以外的瀏覽器或擋廣告的APP,例如Brave、A
Thumbnail
首先為什麼要設定facebook 在打開外部網站時,不要使用fb app本身來打開網頁? 我想大部份人在滑fb需要點開fb以外的網站時,都是看一些有趣的文章,業配連結等等,也知道看這些網站時都會搭配大量的廣告。有些人為了不想看這些廣告,會去下載手機內建以外的瀏覽器或擋廣告的APP,例如Brave、A
Thumbnail
筆者今天有參與 10/18 Vocus Project V 的創作者工作坊,過程中有聽到一項關鍵數據以及一個痛點。 那就是目前有 70% 的讀者是透過手機版閱讀 Vocus 上的文章,但礙於這項功能其實多數創作者平台或是部落客並不擁有此項編輯功能,因此筆者想來提供一個解方。 第一步:開啟任一瀏覽器
Thumbnail
筆者今天有參與 10/18 Vocus Project V 的創作者工作坊,過程中有聽到一項關鍵數據以及一個痛點。 那就是目前有 70% 的讀者是透過手機版閱讀 Vocus 上的文章,但礙於這項功能其實多數創作者平台或是部落客並不擁有此項編輯功能,因此筆者想來提供一個解方。 第一步:開啟任一瀏覽器
Thumbnail
在過去,作者都是自己實踐工人智慧,在欄位中輸入自己想要為文章下的關鍵字們。而就在今天此時此刻 Right now!!格友們會發現在輸入欄位下方多了「建議標籤」的貼心推送!
Thumbnail
在過去,作者都是自己實踐工人智慧,在欄位中輸入自己想要為文章下的關鍵字們。而就在今天此時此刻 Right now!!格友們會發現在輸入欄位下方多了「建議標籤」的貼心推送!
Thumbnail
向大家分享新功能,它叫做 —— 漸進式網頁應用程式(PWA, Progressive Web Application)!從今以後,你可以將方格子首頁加入你的手機桌面捷徑,就可以用更乾淨簡潔的畫面瀏覽方格子!
Thumbnail
向大家分享新功能,它叫做 —— 漸進式網頁應用程式(PWA, Progressive Web Application)!從今以後,你可以將方格子首頁加入你的手機桌面捷徑,就可以用更乾淨簡潔的畫面瀏覽方格子!
Thumbnail
你曾經好奇過我們每天瀏覽的網頁效能有多高嗎? 今天就讓我們實際測試一下吧。 測試對象: 方格子主頁、matters主頁、中央社主頁、youtube 方格子 方格子整體網頁的效能似乎蠻低的,雖然我在用手機時是沒有特別感覺,不知道大家覺得如何? matters matters 整體效能似
Thumbnail
你曾經好奇過我們每天瀏覽的網頁效能有多高嗎? 今天就讓我們實際測試一下吧。 測試對象: 方格子主頁、matters主頁、中央社主頁、youtube 方格子 方格子整體網頁的效能似乎蠻低的,雖然我在用手機時是沒有特別感覺,不知道大家覺得如何? matters matters 整體效能似
Thumbnail
如果你像我一樣 常常想要專心寫好一篇文章 當想靜下心來的時候,偏偏手指不聽使喚 開始逛臉書看YouTube 推薦一個還不錯的Chrome擴充軟體 可以幫助使用者降低使用fb等社交軟體的頻率 非常有效!
Thumbnail
如果你像我一樣 常常想要專心寫好一篇文章 當想靜下心來的時候,偏偏手指不聽使喚 開始逛臉書看YouTube 推薦一個還不錯的Chrome擴充軟體 可以幫助使用者降低使用fb等社交軟體的頻率 非常有效!
Thumbnail
接近6點的時侯打開了FB,突然看到一行字 “你已獲邀使用全新 Facebook.com ”,原來 FB 有新版面啦~~我的帳號好像很容易排到試用中耶,然後就點了一下看看新界面長的如何啦~~ 就是上圖這句話,問了一下我的朋友們結果他們都沒有 點了立即試用後會看到下圖的介紹,說明一下新界面的訴求,感覺就
Thumbnail
接近6點的時侯打開了FB,突然看到一行字 “你已獲邀使用全新 Facebook.com ”,原來 FB 有新版面啦~~我的帳號好像很容易排到試用中耶,然後就點了一下看看新界面長的如何啦~~ 就是上圖這句話,問了一下我的朋友們結果他們都沒有 點了立即試用後會看到下圖的介紹,說明一下新界面的訴求,感覺就
Thumbnail
為了增進使用者體驗,前端愈來愈複雜,現在就讓我們一起搞懂技術名詞。
Thumbnail
為了增進使用者體驗,前端愈來愈複雜,現在就讓我們一起搞懂技術名詞。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News