PWA 偽裝術

發表於 | 分類於 | |

A: 你看我做了一個 APP!
B: 那是 WEB 好嗎?
A: 露餡了…

內文:

  • 隱藏 PWA 在手機上的縮放
  • 隱藏跳出的 GOOGLE 翻譯
  • BONUS: 更新快取內容

PWA 偽裝術


即便 PWA 可以安裝在手機上,
打開後沒有網址列,
但畢竟還是一個網頁,
故使用上會出現一些網頁的特有行為,
為了讓網頁在手機上的體驗更像原生 APP,
底下提供一些實用的小 tips

隱藏 PWA 在手機上的縮放

meta 標籤位於 html 檔的 head 標籤裡頭,
主要功能是記載著網頁內的相關資訊,
我們可以使用 meta viewport 來解決網頁可根據使用者自由縮放的問題,
只需要將底下代碼即可:

1
2
3
4
<meta
  name="viewport"
  content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no"
/>

接下來說明 content 屬性內容作用

  • width=device-width: 將畫面寬度設定為符合裝置畫面寬度
  • initial-scale=1: 畫面初始的縮放比例
  • shrink-to-fit=no:
    針對 iOS9 畫面自適應寬度需要加上, 否則 Safari 在畫面上會發生 scale down (縮小)
  • user-scalable=no: 解決畫面可縮放問題

隱藏跳出的 GOOGLE 翻譯

這個問題主要是針對 Android 會發生的,
如果網頁內是用到其他語言,
一樣利用 meta 標籤可以解決此問題,
這此我們所使用的是 meta google 這個標籤,
以下為代碼, 加上即可:

1
<meta name="google" content="notranslate" />

content 內容從字面上即可看出來是不用翻譯的意思

BONUS: 更新快取內容

首先需要先簡單講一下 service-worker 主要的幾個事件,

  • register

    註冊 service-worker (sw)

  • install

    當 sw 成功註冊後, 即會觸發此事件, 在背景執行安裝, 白話就是快取設定的內容

  • active

    當完成安裝後, 即為啟動狀態, 這裡可以設定清除舊快取 (filter 快取名稱來 clean)

  • fetch

    當在 sw scope 下發生任何請求都會觸發此事件, 並從快取中檢查是否已有相同項目

基本上 sw 在檢查所有快取上都是依照 CACHE NAME 來判定的,
而 CACHE NAME 基本上是我們一開始命名的字串變數,
所以要讓 PWA 自動更新, 最簡單快速的方法就是將 CACHE NAME 重新命名即可

本文作者： David Huang
本文地址： https://davidblog.github.io/2020/06/07/pwa2/

0%