成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

pwa簡(jiǎn)介

learning / 3304人閱讀

摘要：簡(jiǎn)稱，是提升的體驗(yàn)的一種新方法，能給用戶原生應(yīng)用的體驗(yàn)。能做到原生應(yīng)用的體驗(yàn)不是靠特指某一項(xiàng)技術(shù)，而是經(jīng)過(guò)應(yīng)用一些新技術(shù)進(jìn)行改進(jìn)，在安全性能和體驗(yàn)三個(gè)方面都有很大提升，本質(zhì)上是，借助一些新技術(shù)也具備了的一些特性，兼具和的優(yōu)點(diǎn)。

Progressive Web App, 簡(jiǎn)稱 PWA，是提升 Web App 的體驗(yàn)的一種新方法，能給用戶原生應(yīng)用的體驗(yàn)。 PWA 能做到原生應(yīng)用的體驗(yàn)不是靠特指某一項(xiàng)技術(shù)，而是經(jīng)過(guò)應(yīng)用一些新技術(shù)進(jìn)行改進(jìn)，在安全、性能和體驗(yàn)三個(gè)方面都有很大提升，PWA 本質(zhì)上是 Web App，借助一些新技術(shù)也具備了 Native App 的一些特性，兼具 Web App 和 Native App 的優(yōu)點(diǎn)。 PWA 的主要特點(diǎn)包括下面三點(diǎn)：

可靠 - 即使在不穩(wěn)定的網(wǎng)絡(luò)環(huán)境下，也能瞬間加載并展現(xiàn)

體驗(yàn) - 快速響應(yīng)，并且有平滑的動(dòng)畫(huà)響應(yīng)用戶的操作

粘性 - 像設(shè)備上的原生應(yīng)用，具有沉浸式的用戶體驗(yàn)，用戶可以添加到桌面

可靠

通過(guò) Service Worker 能夠讓用戶在網(wǎng)絡(luò)條件很差或離線的情況下也能瞬間加載并且展現(xiàn)。

介紹個(gè)sw的簡(jiǎn)便實(shí)現(xiàn)方法 offline-plugin

  // webpack.config.js
  var OfflinePlugin = require("offline-plugin");
  module.exports = {
    plugins: [
      new OfflinePlugin({
        Caches: "all"
      })
    ]
  }
  //index.js
  import * as OfflinePluginRuntime from "offline-plugin/runtime";
  OfflinePluginRuntime.install();
體驗(yàn)

首屏加載優(yōu)化
App Shell

粘性

借助 Web App Manifest 提供給用戶和 Native App 一樣的沉浸式體驗(yàn)

可以通過(guò)給用戶發(fā)送離線通知，讓用戶回流

坑：

ios桌面icon 實(shí)現(xiàn)依然使用link標(biāo)簽

全站必須使用https, 免費(fèi)證書(shū)

manifest.json配置的start-url必須在sw.js緩存列表中，否則無(wú)法離線使用

推薦閱讀文章：

下一代 Web 應(yīng)用模型 —— Progressive Web App

餓了么的 PWA 升級(jí)實(shí)踐

Your first service worker

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97793.html

相關(guān)文章

  • Service Worker學(xué)習(xí)與實(shí)踐（二）——PWA簡(jiǎn)介

    摘要：簡(jiǎn)稱，是提升的體驗(yàn)的一種新方法，能給用戶原生應(yīng)用的體驗(yàn)。當(dāng)網(wǎng)站以這種方式啟動(dòng)時(shí)它具有唯一的圖標(biāo)和名稱，以便用戶將其與其他網(wǎng)站區(qū)分開(kāi)來(lái)。表示啟動(dòng)時(shí)的方向，橫屏豎屏等，具體參數(shù)值可參考文檔。下一篇文章中，主要講述在實(shí)踐中的重要能力。 這周，Chrome 70正式版本發(fā)布，Progressive Web Apps（PWA）已經(jīng)正式支持到Windows 10平臺(tái)，然而，早在前幾個(gè)版本之前，Ch...

    KavenFan 評(píng)論0 收藏0

  • 【PWA學(xué)習(xí)與實(shí)踐】(3) 讓你的WebApp離線可用

    摘要：學(xué)習(xí)與實(shí)踐系列文章已整理至學(xué)習(xí)手冊(cè)，文字內(nèi)容已同步至。本文是學(xué)習(xí)與實(shí)踐系列的第三篇文章。引言其中一個(gè)令人著迷的能力就是離線可用。但是，如果你注意到文章開(kāi)頭的圖片就會(huì)發(fā)現(xiàn)，離線時(shí)我們不僅可以訪問(wèn)，還可以使用搜索功能。 《PWA學(xué)習(xí)與實(shí)踐》系列文章已整理至gitbook - PWA學(xué)習(xí)手冊(cè)，文字內(nèi)容已同步至learning-pwa-ebook。轉(zhuǎn)載請(qǐng)注明作者與出處。 本文是《PWA學(xué)習(xí)與實(shí)...

    since1986 評(píng)論0 收藏0

  • PWA之 workbox 學(xué)習(xí)

    摘要：另一部分屬于進(jìn)程，它重新在后臺(tái)起了一個(gè)進(jìn)程，它和應(yīng)用的主進(jìn)程互不影響，可以同時(shí)執(zhí)行。其中一般作為應(yīng)用程序?yàn)g覽器和網(wǎng)絡(luò)如果可用之間的代理服務(wù)。他們還將允許訪問(wèn)推送通知和后臺(tái)同步。然后開(kāi)始在進(jìn)程中通過(guò)事件，來(lái)監(jiān)聽(tīng)請(qǐng)求，并對(duì)請(qǐng)求和響應(yīng)進(jìn)行緩存。 前言:我們的應(yīng)用可以分為兩部分，一部分是屬于主進(jìn)程的(包括js(同步,異步)，以及dom渲染等等)，在一個(gè)時(shí)刻點(diǎn)，只能執(zhí)行一個(gè)，要么先去渲染dom，...

    zhangyucha0 評(píng)論0 收藏0

  • 借助 workbox 將網(wǎng)站升級(jí)成 PWA

    摘要：是谷歌近幾年一直在推進(jìn)的應(yīng)用新模型。既然如此，我們最好是站在巨人的肩膀上，這個(gè)巨人就是谷歌。是由谷歌瀏覽器團(tuán)隊(duì)發(fā)布，用來(lái)協(xié)助創(chuàng)建應(yīng)用的庫(kù)。當(dāng)然直接用還是太復(fù)雜了，谷歌還很貼心的發(fā)布了一個(gè)插件，能夠自動(dòng)生成和靜態(tài)資源列表。 PWA（Progressive Web Apps）是谷歌近幾年一直在推進(jìn)的 web 應(yīng)用新模型。PWA 借助 Service Worker 緩存網(wǎng)站的靜態(tài)資源，甚至...

    shaonbean 評(píng)論0 收藏0

  • pwa-之service worker 離線文件處理

    摘要：勾上刷新頁(yè)面，顯示如圖實(shí)現(xiàn)原理使用，預(yù)先緩存和。又請(qǐng)求已經(jīng)緩存好的。加載離線圖片創(chuàng)建創(chuàng)建創(chuàng)建訪問(wèn)，然后打開(kāi)。一定要訪問(wèn)啊，不然不會(huì)成功多個(gè)事件調(diào)用事件和其他事件一樣都是可以注冊(cè)多次的。 pwa-之service worker 基本概念pwa-之service worker 離線文件處理 本章包含以下知識(shí)點(diǎn) 顯示離線頁(yè)面 加載離線圖片 加載離線css 多個(gè)fetch處理事件調(diào)用 簡(jiǎn)介...

    fizz 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<