:::

動態轉換PWA / Convert a Website to PWA dynamically

1月 23, 2023 , , 0 Comments Edit Copy Download

2023-0114-212919.png

把網頁變成電腦的應用程式，這種應用程式就叫做PWA (Progressive Web App)。最近我才發現，不用網站管理者，我也可以把網站變成PWA。

manifest.json

https://linyencheng.github.io/2021/09/04/progressive-web-application/pwa-manifest/?utm_source=link&utm_medium=article&utm_campaign=internal_link 

普通的網頁跟PWA之間最大的差異，就是有沒有導入manifest.json。manifest.json宣告了PWA的名稱、網址範圍、圖示、顯示成應用程式的時候的模式等等。

manifest.json本身項目並不是很多，要產生這種JSON檔案並不困難，困難的是，manifest.json一般來說只能擺在跟目前網頁在一個同網域底下才能生效。

2023-0114-210050.png

舉例來說，「布丁布丁吃什麼？」的Blog網域是 info.pulipuli.info，那manifest.json必須要擺在同一個網域底下，這樣才能瀏覽器才會把它視為一個合格的PWA。

也就是說，一般情況下只有網站管理者才能把網頁做成PWA，對網站有至高的管理權限。

動態產生manifest.json / Insert manifest.json in Base64 format

是的，一般情況下的確是如此。但我們可不一般啊。

https://stackoverflow.com/a/70259201

事實上，除了上傳到該網域的檔案之外，在該網頁上以Base64格式呈現的內容，也會被視為是同個網域的檔案。Guillermo Romero跟我們展示了如何動態產生manifest：

  • 建立manifest.json的JSON物件。
  • 將該JSON物件轉換成Base64的格式。
  • 動態產生<link>標籤，並插入到<head>內。

這樣就能把任一網頁做成PWA了。

2023-0114-212143.png

一旦建立好PWA，任何只要符合PWA的scope的連結，都可以用PWA的形式開啟。這樣子可以很方便地讓特定網頁開啟成獨立的視窗，特別適合多視窗的工作環境。

工具 / Tool

https://pulipulichen.github.io/PWA-Builder/

為了方便產生PWA，我修改了之前的工具，把它做成可以產生Base64格式的manifest.json的版本。

https://blog.pulipuli.info/2022/02/customize-your-web-application-no-pwa-any-favicon.html

大致上的思維跟之前的這篇差不多。

你有想過哪些網頁很適合做成應用程式嗎？

歡迎下面推薦喔！

訂閱： 張貼留言 (Atom)