【技术】PWA实践 - 应用激活与安装
文章目錄
- 你能用這項技術做什么？
- 適合人群
- 你可以學到什么
- 應用激活與安裝
- 激活與安裝
- Manifest
- 注意
- Service Worker
- Storage
- 管理應用
- Demo
- 本章參考資料
你能用這項技術做什么？
使用PWA能讓你的web網頁在支持使用最新版本Chome瀏覽器的桌面端（window，mac）和移動端（ios、android）生成類似原生應用的Chrome應用。
Chrome應用除了提供可訪問的web頁面功能，還可提供獨立應用訪問、消息推送、離線消息推送（需代理）、應用熱更新功能。
適合人群
希望給自己的web賦能，具備獨立應用訪問、消息推送、離線消息推送和應用熱更新的人。
例如：讓一個客戶管理系統能在window、mac系統上像原生應用一樣提供給用戶使用，還能在有客戶消息的時候實現通知，新版本更新的時候進行通知，重新打開應用或刷新的時候自動更新。
你可以學到什么
這篇文章主要告訴你如何創建第一個基本的PWA應用。
應用激活與安裝
可以從Chrome devTools 中看到一個應用分為Manifest、Service Workers、Storage 三個部分。
manifset.json的目標是將web應用程序安裝到主目錄，為用戶提供更快的訪問和更豐富的體驗
激活與安裝
Manifest
manifest 是一個在頁面中引用的manifset,json文件，一般在html頁面的head標簽中進行聲明。通過給web頁面增加聲明文件，瀏覽器可以識別當前PWA應用并支持將應用添加到主屏。
<head><!-- 應用描述文件 --><link rel="manifest" href="path/manifest.json"> </head>manifset.json 示例
{"name": "這里輸入PWA項目的名稱","short_name": "這里輸入PWA項目的簡稱","start_url": "指定項目啟動的url地址","display": "standalone","background_color": "red","theme_color": "green","icons": [{"src": "path/logo-192.png","sizes": "192x192", // icon 不能小于 144x144"type": "image/png"}] }manifset 中的配置信息會作為PWA應用的描述信息。
配置引用成功之后，可以在devTools上查看到對應信息。
激活Service Worker后正確安裝的PWA應用會在瀏覽器端提示，manifset中配置的信息就會在其中生效。
安裝應用時，彈窗提示應用的名稱以及對應域名。
應用安裝之后，應用標題被設置為manifset文件配置的name，和html文件中配置的title的組合。AplicationBar的背景顏色被設置為manifset.json文件中配置的theme_color。
注意
Service Worker
如果說manifset.json是應用的聲明文件代表應用的外觀名稱的話，那么Service Woker就是應用的核心，代表整個PWA應用的心臟。
整個PWA應用包含了應用的緩存機制，消息通知機制和應用更新機制。
相應的機制我們會在后續的文章中進行講解。
Storage
Storage標簽可以查看當前應用所使用的瀏覽器存儲類型和所占用的存儲空間。
管理應用
在應用的有上角可以對當前應用進行管理，查看應用的信息，卸載當前應用。
Demo
【技術】PWA實踐 - 應用激活與安裝
本章參考資料
漸進式 Web 應用介紹
manifset 文件部署
總結
以上是生活随笔為你收集整理的【技术】PWA实践 - 应用激活与安装的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 英特尔首度公开展示SSD超频技术
- 下一篇： 计算机原理与设计verilog pdf,