Progressive Web App(PWA)

Progressive Web App

  • 一、 PWA 宣傳 : Reliable ( 可靠的 )、Fast( 快速的 )、Engaging( 可參與的 )
  • 二、什么是Progressive
  • 三、為什么我們需要Progressive Web App

一、 PWA 宣傳 : Reliable ( 可靠的 )、Fast( 快速的 )、Engaging( 可參與的 )

  • Reliable : 為什么他是可靠的呢,當用戶從手機主屏幕啟動時,不用考慮網絡的狀態是如何,都可以立刻加載出 PWA。
  • Fast:這一點應該都很熟悉了吧,站在用戶的角度來考慮,如果一個網頁加載速度有點長的話,那么我們會放棄瀏覽該網站,所以 PWA 在這一點上做的很好,他的加載速度是很快的。
  • Engaging : PWA 可以添加在用戶的主屏幕上,不用從應用商店進行下載( 似乎省了下載流量哦!)他們通過網絡應用程序 Manifest file 提供類似于 APP 的使用體驗( 在 Android 上可以設置全屏顯示哦,由于 Safari 支持度的問題,所以在 IOS 上并不可以 ),并且還能進行 ”推送通知” 。

二、什么是Progressive

PWA不是API或技術,但它是一種Web開發方法,它使用已有的工具和技術組合來創建有針對性的理想用戶體驗。

漸進式Web應用程序是:

漸進式- 適用于每個用戶,無論瀏覽器選擇如何,因為它是以漸進增強為核心原則構建的。
自適應- 適合任何形式:桌面設備,移動設備,平板電腦或其他任何設備。
獨立連接- 增強服務人員脫機工作或低質量網絡。
APP樣-感覺就像是一個應用程序,因為應用程序殼模型分離的應用程序的功能從應用內容。
新鮮- 由于服務工作者更新過程,始終保持最新狀態。
安全- 通過HTTPS提供服務以防止窺探并確保內容未被篡改。
可發現- 由于W3C清單和服務工作者注冊范圍,可以識別為“應用程序”,允許搜索引擎找到它。
可重新參與 - 通過推送通知等功能輕松實現重新參與。
可安裝- 允許用戶將他們認為最有用的應用添加到其主屏幕,而無需使用應用商店的麻煩。
可鏈接- 通過URL輕松共享應用程序,不需要復雜的安裝。

三、為什么我們需要Progressive Web App

FIRE:

Fast:PWA提供始終如一的快速體驗。從用戶下載應用程序到他們開始與之交互的那一刻起,一切都發生得非常快。因為您可以緩存數據,即使沒有訪問網絡,也可以非常快速地再次啟動應用程序。
Integrated user experience:PWA的感覺和行為就像本機應用程序一樣。它們位于用戶的主屏幕中,發送推送通知,如本機應用程序,并可訪問設備的功能,如本機應用程序。體驗感覺無縫集成。
Reliable experience:隨著服務人員的幫助下,我們能夠可靠地描繪出用戶的屏幕上的圖片,即使網絡出現故障。
?ngaging:因為我們可以發送通知給用戶,才能真正推動參與了由保持用戶通知,并與應用程式互動。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/278676.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/278676.shtml
英文地址,請注明出處:http://en.pswp.cn/news/278676.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

travis-cli 使用

1. 添加項目登錄 travis 選擇對應項目即可 2. 添加持續集成文件.travis.ymllanguage: node_js node_js:- "node" before_install: - npm install -g jspm - jspm install script: - jspm bundle lib/main --inject備注:這是一個jspm 項目 3. 構建travis 是…

在Windows Media Center中收聽超過100,000個廣播電臺

A cool feature in Windows 7 Media Center is the ability to listen to local FM radio. But what if you don’t have a tuner card that supports a connected radio antenna? The RadioTime plugin solves the problem by allowing access to thousands of online radio …

vue項目中按需引入viewUI

viewUI一、按需引入二、忽略eslint編譯器檢測和編譯檢測1.忽略編譯器檢測2.編譯器中忽略一、按需引入 npm install babel-plugin-import --save-dev // .babelrc1 { “plugins”: [[“import”, { “libraryName”: “view-design”, “libraryDirectory”: “src/components”…

IntelliJ IDEA——數據庫集成工具(Database)的使用

idea集成了一個數據庫管理工具,可以可視化管理很多種類的數據庫,意外的十分方便又好用。這里以oracle為例配置。 1、配置 在窗口的右邊有個Database按鈕,點擊。 如果沒有,請點擊上方的View(視圖)-Tool Windows(工具窗口)-Database…

為什么VC經常輸出燙燙燙燙燙燙燙燙

在Debug 模式下, VC 會把未初始化的棧內存全部填成0xcc,當字符串看就是 燙燙燙燙……會把未初始化的堆內存全部填成0xcd,當字符串看就是 屯屯屯屯……可以讓我們方便地看出那些內存沒初始化但是Release 模式下不會有這種附加動作,…

代碼評審會議_如何將電話會議(和訪問代碼)另存為聯系人

代碼評審會議Dialing a conference call doesn’t have to be a tedious process. Your iPhone or Android phone can automatically dial into the call and enter a confirmation code for you. You just have to create a special type of contact. 撥打電話會議不一定是一個…

Vuex使用總結

Vuex綜合使用一、倉庫1.主倉庫2.子倉庫二、使用1.全局(index.js和未開啟命名空間的子倉庫)2.子倉庫(子倉庫定義了namespaced: true),倉庫名:home3.使用strict嚴格模式(建議)三、批量…

好未來提前批

好未來提前批(注:轉載于牛客網) 一面(25minutes) 1.創建對象的幾種方式2.Jsp九大隱式對象3.自己封裝的持久層框架用過么4.Spring ioc讓你實現怎么實現呢(工廠反射,我半年前寫過,忘記了)5.Aop的實…

Nginx服務學習(6)-日志模塊

日志模塊的說明 日志的默認路徑:error_log /var/log/nginx/error.log warn; warn是指日志的等級,一般有debug, info, notice, warn, error, crit。access_log /var/log/nginx/access.log main; main是指訪問日志記錄的格式信息,在…

vue mock模擬后臺接口數據

vue mock一、Json server二、Mock 服務1.安裝2.創建 Mock3.main.js引入4.組件中axure請求一、Json server 輕量級,將已有的json文件跑在服務器上供前端調用 npm install -g json-server 啟動JSON數據服務器: json-server --watch json文件名 或 json-se…

個人站立會議-----20181216

繼續閱讀測量程序設計這本書,并根據測量平差基礎中的知識編寫多個已知點水準網的間接平差,結果總是差些,詢問過老師之后,才知道在程序中要增加檢索閉合歡或閉合線段的條件,正在改進中 轉載于:https://www.cnblogs.com/…

使用iOS 4越獄iPhone或iPod Touch

In case you haven’t heard the news over the past couple of days, there is now an incredibly easy way to jailbreak your iPod Touch or iPhone running iOS 4. Here we will take a look at how easy the process is. 如果您在過去的幾天里沒有聽到這個消息&#xff0c…

[轉] 深入理解React 組件狀態(State)

React 的核心思想是組件化的思想,應用由組件搭建而成,而組件中最重要的概念是State(狀態),State是一個組件的UI數據模型,是組件渲染時的數據依據。 一. 如何定義State 定義一個合適的State,是正…

vue-router query,parmas,meta傳參

1.query,顯示在導航欄?后,相當于get請求傳參 this.router.push({path:/login,query:{ redirect:/home}}) this.router.push({name:Login,query:{ redirect:/home}})2.parmas,不會顯示,相當于post請求傳參,…

Keras 獲取中間某一層輸出

1.使用函數模型API,新建一個model,將輸入和輸出定義為原來的model的輸入和想要的那一層的輸出,然后重新進行predict. 1 #codingutf-82 import seaborn as sbn3 import pylab as plt4 import theano5 from keras.models import Sequential6 fr…

在Windows 7中禁用或修改Aero Peek的“延遲時間”

Are you looking for an easy way to modify the “delay time” for Aero Peek in Windows 7 or perhaps want to disable the feature altogether? Then see how simple it is to do either with the Desktop Peek Tweak. 您是否正在尋找一種簡便的方法來修改Windows 7中Aer…

php內核分析(六)-opcode

這里閱讀的php版本為PHP-7.1.0 RC3,閱讀代碼的平臺為linux 查看opcode php是先把源碼解析成opcode,然后再把opcode傳遞給zend_vm進行執行的。 // 一個opcode的結構 struct _zend_op {const void *handler; // opcode對應的執行函數,每個opcod…

vue 監聽路由變化

一.watch監聽$route($router的對象) // 監聽,當路由發生變化的時候執行 watch:{$route(to,from){console.log(to.path);} },// 監聽,當路由發生變化的時候執行 watch: {$route: {handler: function(val, oldVal){console.log(val);},// 深度觀察監聽dee…

音頻剪切_音頻編輯入門指南:剪切,修剪和排列

音頻剪切Audacity novices often start with lofty project ideas, but sometimes they lack the basics. Knowing how to cut and trim tracks is basic audio editing and is a fundamental starting point for making more elaborate arrangements. 大膽的新手通常從崇高的項…

Mybatis自定義SQL攔截器

本博客介紹的是繼承Mybatis提供的Interface接口,自定義攔截器,然后將項目中的sql攔截一下,打印到控制臺。 先自定義一個攔截器 package com.muses.taoshop.common.core.database.config;import org.apache.commons.lang3.StringUtils; import…