PWA 漸進式網頁應用程式

發表於 | 分類於 | |

讓你的 Web 直接變 APP?! …當然沒那麼誇張, 但除了一些限制外, 看起來就和 APP 一樣…

內文備註：

  • 基本設定
  • 插件推薦
  • Tips

Progressive Web App

基本設定

這裏你只需放兩隻檔案在網頁根目錄並在 html 檔中引入相關設定即可完成

檔案說明

  • manifest.json

    作用: 網頁加入手機桌面的必要資訊
    引入: <link rel="manifest" href="manifest.json" />

  • service-worker.js

    作用: 離線快取機制
    引入:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <script>
       if ("serviceWorker" in navigator) {
         window.addEventListener("load", () => {
           navigator.serviceWorker.register("./service-worker.js").then(
             (registration) => {
               console.log(
                 `ServiceWorker registration successful with scope: ${registration.scope}`
               );
             },
             (error) => {
               console.log(`ServiceWorker registration failed: ${error}`);
             }
           );
         });
       }
     </script>

至於這兩隻檔案怎麼寫呢???
除了 Google 一下基本範例來自己寫…
底下提供好用插件可以直接產出這兩隻檔案!!!

插件推薦

create-pwa

照裡面的文件使用就對了
好了, 現在你已經有所有該具備的檔案了
接下來就可以試試安裝在電腦桌面或手機桌面上了

什麼?!.. 安裝不了?!…
底下附註一些 Tips 幫你解決常見的問題

Tips

基本上安裝不了,主要和三個地方有關係, 檢查過後就可以安裝了!!!

  1. pwa 在 localhost 或 https 下, 才能安裝
  2. 快取檔案路徑不正確
  3. ios 手機只能用 safari 隱晦的方式加入桌面

什麼?!.. 安裝好了可是沒有東西?!…

別緊張, 檢查一下 manifest.json 內的 start_url 是否正確

其位置為 manifest.json 所在目錄的相對路徑

好了, 恭喜!!! 現在你有一個 PWA 了

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

0%