PWA 漸進式網路應用程式 - 1. 加到主畫面、安裝

前言

一直尋找 iPhone 上網頁如何全螢幕，後來找到 <meta name="apple-mobile-web-app-capable" content="yes"> 這行網頁宣告，然後才開始認識這個已經推出好幾年的技術。

PWA 是一個很大的議題，先從「方便加入主畫面」的「安裝」說起

參考資源

工具

線上檢查 manifest 正確性

可安裝

為了要讓網頁可以符合安裝需要

網址必須是 https://
網頁增加 <link rel="manifest" href="manifest.json" /> 宣告
manifest.json 必須正確設定，缺少不行，多餘也也不行，如果沒有 App 抄 Hoyo 的設定即可

PWA_Test.html

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <title>PWA 測驗</title>
    <link rel="manifest" href="/manifest.json" />
</head>
<body>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

manifest.json

start_url - Web app manifests | MDN

{
  "id": "/",
  "name": "Hoyo 遊戲平台",
  "short_name": "Hoyo",
  "start_url": "/",
  "background_color": "white",
  "display": "standalone",
  "orientation": "portrait",
  "theme_color": "#ffffff",
  "icons": [
    {
      "src": "/img/game.hoyo.idv.tw.logo-180.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/img/game.hoyo.idv.tw.logo-180.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

{

"id": "/",

"name": "Hoyo 遊戲平台",

"short_name": "Hoyo",

"start_url": "/",

"background_color": "white",

"display": "standalone",

"orientation": "portrait",

"theme_color": "#ffffff",

"icons": [

{

"src": "/img/game.hoyo.idv.tw.logo-180.png",

"sizes": "192x192",

"type": "image/png"

{

"src": "/img/game.hoyo.idv.tw.logo-180.png",

"sizes": "512x512",

"type": "image/png"

}

]

}

需要注意的是，不需要的設定就不要填寫，有疑問可以看一下這個網頁：rel=manifest - HTML: HyperText Markup Language | MDN (mozilla.org)

Chrome 顯示安裝

Android 顯示安裝

加入主畫面 → 安裝

除錯

使用 Google Chrome 或 Edge 瀏覽器 F12 可以進行檢查、除錯

重新安裝

Trigger installation from your PWA - Progressive web apps | MDN (mozilla.org)

<button id="install" hidden>Install</button>

<script>
    let installPrompt = null;
    const installButton = document.querySelector("#install");

    window.addEventListener("beforeinstallprompt", (event) => {
        event.preventDefault();
        installPrompt = event;
        installButton.removeAttribute("hidden");
    });

    installButton.addEventListener("click", async () => {
        if (!installPrompt) {
            return;
        }
        const result = await installPrompt.prompt();
        console.log(`Install prompt was: ${result.outcome}`);
        disableInAppInstallPrompt();
    });

    function disableInAppInstallPrompt() {
        installPrompt = null;
        installButton.setAttribute("hidden", "");
    }

    window.addEventListener("appinstalled", () => {
        disableInAppInstallPrompt();
    });
</script>

<button id="install" hidden>Install</button>

let installPrompt = null;

const installButton = document.querySelector("#install");

window.addEventListener("beforeinstallprompt", (event) => {

event.preventDefault();

installPrompt = event;

installButton.removeAttribute("hidden");

});

installButton.addEventListener("click", async () => {

if (!installPrompt) {

return;

}

const result = await installPrompt.prompt();

console.log(`Install prompt was: ${result.outcome}`);

disableInAppInstallPrompt();

});

function disableInAppInstallPrompt() {

installPrompt = null;

installButton.setAttribute("hidden", "");

}

window.addEventListener("appinstalled", () => {

disableInAppInstallPrompt();

});

</script>

1,210 total views, 2 views today

PWA 漸進式網路應用程式 - 1. 加到主畫面、安裝

前言

參考資源

工具

可安裝

除錯

重新安裝

Related Post

發佈留言

PWA 漸進式網路應用程式 - 1. 加到主畫面、安裝

前言

參考資源

工具

可安裝

除錯

重新安裝

Related Post

PWA - LINE Notify 結束服務後，有網站的真正免費解決方案

PWA 漸進式網路應用程式 - 2. 使用 FCM 推播通知

CSS - 自定義 Radio, Checkbox 為方塊

發佈留言