當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

【技术】PWA实践 - 应用激活与安装

發(fā)布時(shí)間：2024/3/24 编程问答 56 豆豆

生活随笔收集整理的這篇文章主要介紹了【技术】PWA实践 - 应用激活与安装小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

文章目錄

你能用這項(xiàng)技術(shù)做什么？
- 適合人群
- 你可以學(xué)到什么
應(yīng)用激活與安裝
- 激活與安裝
- - Manifest
  - - 注意
  - Service Worker
  - Storage
- 管理應(yīng)用
Demo
本章參考資料

你能用這項(xiàng)技術(shù)做什么？

使用PWA能讓你的web網(wǎng)頁在支持使用最新版本Chome瀏覽器的桌面端（window，mac）和移動(dòng)端（ios、android）生成類似原生應(yīng)用的Chrome應(yīng)用。

Chrome應(yīng)用除了提供可訪問的web頁面功能，還可提供獨(dú)立應(yīng)用訪問、消息推送、離線消息推送（需代理）、應(yīng)用熱更新功能。

適合人群

希望給自己的web賦能，具備獨(dú)立應(yīng)用訪問、消息推送、離線消息推送和應(yīng)用熱更新的人。

例如：讓一個(gè)客戶管理系統(tǒng)能在window、mac系統(tǒng)上像原生應(yīng)用一樣提供給用戶使用，還能在有客戶消息的時(shí)候?qū)崿F(xiàn)通知，新版本更新的時(shí)候進(jìn)行通知，重新打開應(yīng)用或刷新的時(shí)候自動(dòng)更新。

你可以學(xué)到什么

這篇文章主要告訴你如何創(chuàng)建第一個(gè)基本的PWA應(yīng)用。

應(yīng)用激活與安裝

可以從Chrome devTools 中看到一個(gè)應(yīng)用分為Manifest、Service Workers、Storage 三個(gè)部分。

manifset.json的目標(biāo)是將web應(yīng)用程序安裝到主目錄，為用戶提供更快的訪問和更豐富的體驗(yàn)

激活與安裝

Manifest

manifest 是一個(gè)在頁面中引用的manifset,json文件，一般在html頁面的head標(biāo)簽中進(jìn)行聲明。通過給web頁面增加聲明文件，瀏覽器可以識(shí)別當(dāng)前PWA應(yīng)用并支持將應(yīng)用添加到主屏。

manifset.json 示例

{"name": "這里輸入PWA項(xiàng)目的名稱","short_name": "這里輸入PWA項(xiàng)目的簡(jiǎn)稱","start_url": "指定項(xiàng)目啟動(dòng)的url地址","display": "standalone","background_color": "red","theme_color": "green","icons": [{"src": "path/logo-192.png","sizes": "192x192", // icon 不能小于 144x144"type": "image/png"}] }

manifset 中的配置信息會(huì)作為PWA應(yīng)用的描述信息。
配置引用成功之后，可以在devTools上查看到對(duì)應(yīng)信息。

激活Service Worker后正確安裝的PWA應(yīng)用會(huì)在瀏覽器端提示，manifset中配置的信息就會(huì)在其中生效。

安裝應(yīng)用時(shí)，彈窗提示應(yīng)用的名稱以及對(duì)應(yīng)域名。

應(yīng)用安裝之后，應(yīng)用標(biāo)題被設(shè)置為manifset文件配置的name，和html文件中配置的title的組合。AplicationBar的背景顏色被設(shè)置為manifset.json文件中配置的theme_color。

注意

如果項(xiàng)目要部署到線上地址。配置中的start_url必須為當(dāng)前PWA應(yīng)用的的域名。

PWA應(yīng)用只支持在localhost域名和https域名下進(jìn)行部署。為了安全考慮普通的http網(wǎng)站配置之后無法激活PWA應(yīng)用并將當(dāng)前網(wǎng)站添加到主屏。

Service Worker

如果說manifset.json是應(yīng)用的聲明文件代表應(yīng)用的外觀名稱的話，那么Service Woker就是應(yīng)用的核心，代表整個(gè)PWA應(yīng)用的心臟。

整個(gè)PWA應(yīng)用包含了應(yīng)用的緩存機(jī)制，消息通知機(jī)制和應(yīng)用更新機(jī)制。

相應(yīng)的機(jī)制我們會(huì)在后續(xù)的文章中進(jìn)行講解。

Storage

Storage標(biāo)簽可以查看當(dāng)前應(yīng)用所使用的瀏覽器存儲(chǔ)類型和所占用的存儲(chǔ)空間。

管理應(yīng)用

在應(yīng)用的有上角可以對(duì)當(dāng)前應(yīng)用進(jìn)行管理，查看應(yīng)用的信息，卸載當(dāng)前應(yīng)用。

Demo

【技術(shù)】PWA實(shí)踐 - 應(yīng)用激活與安裝

本章參考資料

漸進(jìn)式 Web 應(yīng)用介紹
manifset 文件部署

總結(jié)

以上是生活随笔為你收集整理的【技术】PWA实践 - 应用激活与安装的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

技术
PWA

上一篇：英特尔首度公开展示SSD超频技术
下一篇：计算机原理与设计verilog pdf,