pwa簡介

learning 發布于2019-08-23 11:59 / 3296人閱讀

摘要：簡稱，是提升的體驗的一種新方法，能給用戶原生應用的體驗。能做到原生應用的體驗不是靠特指某一項技術，而是經過應用一些新技術進行改進，在安全性能和體驗三個方面都有很大提升，本質上是，借助一些新技術也具備了的一些特性，兼具和的優點。

Progressive Web App, 簡稱 PWA，是提升 Web App 的體驗的一種新方法，能給用戶原生應用的體驗。 PWA 能做到原生應用的體驗不是靠特指某一項技術，而是經過應用一些新技術進行改進，在安全、性能和體驗三個方面都有很大提升，PWA 本質上是 Web App，借助一些新技術也具備了 Native App 的一些特性，兼具 Web App 和 Native App 的優點。 PWA 的主要特點包括下面三點：

可靠 - 即使在不穩定的網絡環境下，也能瞬間加載并展現

體驗 - 快速響應，并且有平滑的動畫響應用戶的操作

粘性 - 像設備上的原生應用，具有沉浸式的用戶體驗，用戶可以添加到桌面

可靠

通過 Service Worker 能夠讓用戶在網絡條件很差或離線的情況下也能瞬間加載并且展現。

介紹個sw的簡便實現方法 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();

體驗

首屏加載優化
App Shell

粘性

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

可以通過給用戶發送離線通知，讓用戶回流

坑：

ios桌面icon 實現依然使用link標簽

全站必須使用https, 免費證書

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

推薦閱讀文章：

下一代 Web 應用模型 —— Progressive Web App

餓了么的 PWA 升級實踐

Your first service worker

GPU云服務器云服務器 PWA 使用簡介函數簡介基礎簡介

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97793.html

Service Worker學習與實踐（二）——PWA簡介

摘要：簡稱，是提升的體驗的一種新方法，能給用戶原生應用的體驗。當網站以這種方式啟動時它具有唯一的圖標和名稱，以便用戶將其與其他網站區分開來。表示啟動時的方向，橫屏豎屏等，具體參數值可參考文檔。下一篇文章中，主要講述在實踐中的重要能力。這周，Chrome 70正式版本發布，Progressive Web Apps（PWA）已經正式支持到Windows 10平臺，然而，早在前幾個版本之前，Ch...

KavenFan 2019-08-26 13:24 評論0 收藏0
【PWA學習與實踐】(3) 讓你的WebApp離線可用

摘要：學習與實踐系列文章已整理至學習手冊，文字內容已同步至。本文是學習與實踐系列的第三篇文章。引言其中一個令人著迷的能力就是離線可用。但是，如果你注意到文章開頭的圖片就會發現，離線時我們不僅可以訪問，還可以使用搜索功能。《PWA學習與實踐》系列文章已整理至gitbook - PWA學習手冊，文字內容已同步至learning-pwa-ebook。轉載請注明作者與出處。本文是《PWA學習與實...

since1986 2019-08-23 12:46 評論0 收藏0
PWA之 workbox 學習

摘要：另一部分屬于進程，它重新在后臺起了一個進程，它和應用的主進程互不影響，可以同時執行。其中一般作為應用程序瀏覽器和網絡如果可用之間的代理服務。他們還將允許訪問推送通知和后臺同步。然后開始在進程中通過事件，來監聽請求，并對請求和響應進行緩存。前言:我們的應用可以分為兩部分，一部分是屬于主進程的(包括js(同步,異步)，以及dom渲染等等)，在一個時刻點，只能執行一個，要么先去渲染dom，...

zhangyucha0 2019-08-26 13:55 評論0 收藏0
借助 workbox 將網站升級成 PWA

摘要：是谷歌近幾年一直在推進的應用新模型。既然如此，我們最好是站在巨人的肩膀上，這個巨人就是谷歌。是由谷歌瀏覽器團隊發布，用來協助創建應用的庫。當然直接用還是太復雜了，谷歌還很貼心的發布了一個插件，能夠自動生成和靜態資源列表。 PWA（Progressive Web Apps）是谷歌近幾年一直在推進的 web 應用新模型。PWA 借助 Service Worker 緩存網站的靜態資源，甚至...

shaonbean 2019-08-22 17:35 評論0 收藏0
pwa-之service worker 離線文件處理

摘要：勾上刷新頁面，顯示如圖實現原理使用，預先緩存和。又請求已經緩存好的。加載離線圖片創建創建創建訪問，然后打開。一定要訪問啊，不然不會成功多個事件調用事件和其他事件一樣都是可以注冊多次的。 pwa-之service worker 基本概念pwa-之service worker 離線文件處理本章包含以下知識點顯示離線頁面加載離線圖片加載離線css 多個fetch處理事件調用簡介...

fizz 2019-08-06 13:35 評論0 收藏0