<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          關于漸進式 Web 應用,你應該知道的一切

          時間:?2017-12-21閱讀:?1010標簽:?web

          漸進式 Web 應用是利用現代瀏覽器的特性,可以添加到主屏幕上,表現得像原生應用程序一樣的 Web 應用程序。


          什么是漸進式 Web 應用

          漸進式 Web 應用(PWA)本質上與普通的網站沒有什么不同 - 它也是由 HTML、CSS 和 JavaScript 組成,并且存活于瀏覽器中。將 PWA 與普通網站區別開的是它需要滿足的 10 個核心概念列表。下面就是直接從 Google 開發者網站上摘錄的這個列表:

          1. 安全 – 通過 HTTPS 來提供服務來防止網絡窺探,保證內容不被篡改。
          2. 漸進式 – 能夠讓每一位用戶使用,無論用戶使用什么瀏覽器,因為它是始終以漸進增強為原則
          3. 響應式 – 適應任何環境:桌面電腦、智能手機、平板電腦,或者其他設備。
          4. 不依賴網絡連接 – 通過用 service workers 增強,可以在離線或者低質量網絡下工作
          5. 類原生應用 – 有像原生應用般的交互和導航給用戶原生應用般的體驗,因為它是建立在 app shell model 上的。
          6. 持續更新 – 受益于 service worker 的更新進程,應用能夠始終保持更新。
          7. 可發現 – 可識別為“應用程序”,是得益于 W3C manifests 元數據和 service worker 的登記,讓搜索引擎能夠找到 web 應用。
          8. 可再次訪問 – 通過推送通知等特性讓用戶再次訪問變得容易。
          9. 可安裝 – 允許用戶保留對他們有用的應用在主屏幕上,不需要通過應用商店。
          10. 可鏈接 – 通過 URL 可以輕松分享應用,不用復雜的安裝即可運行。

          遵循這些指南,會確保你的應用不僅在瀏覽器中查看時,還能在單獨通過主屏幕快捷鍵啟動時,都運行的不錯。你可能會發現 Google 選用的措辭令人相當困惑,不過不要著急,我們會在本教程中一個一個解釋這些規則。


          漸進式 Web 應用不是什么

          PWA 的概念不應該與如下概念混淆:基于 Cordova 的混合 app,React Native,NativeScript,Electron 以及 NW.js...

          所有前面提到的技術都是把 HTML 應用打包成可執行文件,比如.apk、.exe等等,然后必須從各自的應用商店下載下來,安裝到用戶的設備上。

          PWA 不需要安裝,也依然不能用在 Google Play 或者 iTunes 應用商店中。要下載一個 PWA,只需要訪問它的網站,然后將其作為快捷鍵保存到主屏幕上。對 iOS 和 Android 各自開發和維護一個版本不再是問題,但是需要考慮瀏覽器支持不支持。


          1. 安全

          大多數漸進式 Web 應用要使用原生 API 和 service worker 這些處理敏感數據的技術,需要謹慎處理。這就是為什么每個 PWA 都要通過 HTTPS 連接訪問的原因。

          如果你沒有帶有 SSL 證書的服務器,那么在安全環境下運行項目的最簡單的方法是通過 GitHub Pages 或者類似的服務。所有 Github 庫都可以直接通過 HTTPS 存放,并且 GitHub 和 GitHub Pages 對公共倉庫都是免費的。

          這是我們用來存放演示應用的地方:https://tutorialzine.github.io/pwa-photobooth/

          如果只是在本地服務器上測試,還可以試試 Ngrok。它是一個小工具,可以在任何當前運行的本地主機和一個公共 URL 之間建立一個安全通道。Ngrok 是免費的,并且可用在 Windows、Mac 和 Linux 系統上。


          2. 漸進式

          本質上,漸進式的意思是,PWA 應該使用被廣泛支持的 Web 技術,并且可以同樣運行在盡可能多的瀏覽器上。眾所周知,在 Web 開發領域,這近乎是不可能的,但是我們依然可以做一些事情來覆蓋更大的用戶群。

          例如,在 PhotoBooth 應用程序中,我們使用 getUserMedia() API 來訪問一個設備上的硬件相機。它在不同瀏覽器上的支持很不一致 - Safari 完全不支持,而支持它的瀏覽器需要前綴,并且用法各不相同。

          為確保更多的人可以使用我們的應用程序,我們涵蓋了所有前綴:

          navigator.getMedia = ( 
              navigator.getUserMedia ||
              navigator.webkitGetUserMedia ||
              navigator.mozGetUserMedia ||
              navigator.msGetUserMedia
          );
          

          如果所有前綴都不行,就顯示一個錯誤:

          if (!navigator.getMedia) {
              displayErrorMessage("你的瀏覽器不支持 navigator.getUserMedia 接口。");
          }
          else {
              // 使用 Camera API
          }
          

          在可能的情況下,應該提供回退(Fallback)和填補(polyfill)。同樣的原則也適用于 CSS 和 HTML 代碼。


          3. 響應式

          應用程序應該在所有設備上都看起來不錯,不管屏幕大小是多少。我們應用的 UI 相當簡單,所以只用了兩個媒體查詢來控制字體大小、padding、margin 等。

          不要害怕使用 CSS 庫和框架,比如 Bootstrap。它們會讓表單柵格、排版處理和普通的響應性變得很容易。


          4. 獨立于網絡連接

          這是很重要的一點。使用 service worker 可以讓應用能在無互聯網連接的情況下依然可以運行。

          有些應用可以只部分緩存:UI 被緩存,并且離線可用,動態內容依然需要訪問服務器。

          有些應用,比如我們的 PhotoBooth 演示應用,可以全部緩存。所有源代碼和資源都將被保存在本地,應用程序在離線和在線情況以完全相同的方式運行。如下是讓這種奇跡得以發生的代碼:

          > 這是 Service Worker 的過分簡化用法,在商業項目中要慎用。

          首先需要創建一個 service worker JavaScript 文件,定義背后的邏輯。

          sw.js

          // 安裝 service worker.
          this.addEventListener('install', function(event) {
              event.waitUntil(
                  caches.open('v1').then(function(cache) {
                      // 如果這些資源中有任何資源不能保存,緩存就會失敗
                      return cache.addAll([
                          // 路徑是相對于緩存來源,而不是應用程序的目錄。
                          '/pwa-photobooth/',
                          '/pwa-photobooth/index.html',
                          '/pwa-photobooth/assets/css/styles.css',
                          '/pwa-photobooth/assets/fonts/MaterialIcons-Regular.woff2',
                          '/pwa-photobooth/assets/js/script.js',
                          '/pwa-photobooth/assets/icons/ic-face.png',
                          '/pwa-photobooth/assets/icons/ic-face-large.png',
                          '/pwa-photobooth/manifest.json'
                      ])
                      .then(function() {
                          console.log('成功! App 離線可用!');
                      })
                  })
              );
          });
          
          // 定義一個資源被請求時候會發生什么
          // 對于我們的應用,我們以緩存優先的方式
          self.addEventListener('fetch', function(event) {
              event.respondWith(
                  // 試著從緩存中獲取.
                  caches.match(event.request)
                  .then(function(response) {
                      // 如果資源沒有存儲在緩存中,就回退到網絡
                      return response || fetch(event.request);
                  })
              );
          });
          

          然后,我們需要將該 service worker 鏈接到 HTML。

          index.html

          // 注冊 Service Worker.
          
          if ('serviceWorker' in navigator) {
              // 路徑是相對于緩存來源,而不是應用程序的目錄.
              navigator.serviceWorker.register('/pwa-photobooth/sw.js')
              .then(function(reg) {
                  console.log('Registration succeeded. Scope is ' + reg.scope);
              })
              .catch(function(error) {
                  console.error('Registration failed with ' + error);
              });
          }
          

          現在,項目中的所有文件都將被保存在用戶瀏覽器中。所有 JavaScript 變量和對象也應該盡可能保存在 localStorage 或者 IndexDB 中。

          > 現在 Service Worker 在 Chrome、Firefox 和 Opera 中是被支持的。Safari 和 Edge 也正努力采用它。希望將來所有瀏覽器都支持它。


          5. 類原生引用

          在創建 PWA 時,推薦遵循一個稱為應用外殼的架構的設計概念。它聽起來很復雜,但是實際上可以總結為:應用被分為兩個主要組件:外殼 和內容

          外殼包含了所有靜態 UI 元素,比如標題、菜單、抽屜等。在緩存應用程序時,外殼應該總是保存在設備上,因為我們想讓它始終可用。這樣,當無互聯網連接的用戶打開應用程序時,就不會看到空白屏幕或者一個奔跑的恐龍 - 而是會看到緩存了的應用程序界面以及恰當的錯誤消息。


          內容駐留在外殼內。它也可以被緩存,但是沒有必要這樣做,因為內容通常是動態的,會頻繁發生改變,并且每個頁面加載時都可能是不同的。 


          6. 持續更新

          一旦被緩存了,PWA 會總是從本地存儲加載。不過,如果以任何方式修改了 service worker sw.js,那么在下一個頁面加載時,新版本就會被下載和安裝。

          this.addEventListener('install', function(event) {
              event.waitUntil(
                  caches.open('v1.0.1').then(function(cache) {
                      // ...
                  })
              );
          }); 

          通過使用 service worker 更新,我們可以重新下載資源,刪除舊緩存,或者徹底修改 service worker 邏輯。你可以從這篇 Google 開發者文章中,學到更多有關 SW 更新過程的知識。 


          7. 可發現

          通過給應用程序添加一個 Web Manifest,可以提供有關應用程序的各種信息,并且可以修改應用程序在用戶設備上的顯示方式。它允許應用程序被帶自定義圖標的方式保存到主屏幕上,在一個單獨的瀏覽器窗口中啟動,以及很多其它很酷的東西。

          Web Manifest 是以一個簡單 JSON 文件的形式出現:

          manifest.json

          {
            "name": "Progressive Web App: PhotoBooth",
            "short_name": "PhotoBooth",
            "description": "Simple Progressive Web App for taking selfies.",
            "icons": [{
                "src": "assets/icons/ic-face.png",
                "type": "image/png",
                "sizes": "72x72"
              }, {
                "src": "assets/icons/ic-face-large.png",
                "type": "image/png",
                "sizes": "144x144 256x256" 
              }],
            "start_url": "index.html",
            "display": "standalone",
            "background_color": "#fff",
            "theme_color": "#fff",
            "orientation": "portrait"
          }
          

          大多數屬性是自解釋的,所以我們只講講較為重要的一些屬性。要查看完整的 Web manifest 格式,以及所有可用的字段,請到這里

          • Shortname – 這是應用保存到主屏幕上時的名稱。
          • Icons – 不同分辨率的圖標數組。
          • Display – 定義應用打開的方式。我們選擇的是獨立(standalone),所以啟動 PhoneBooth 時,會以全屏窗口出現,沒有瀏覽器導航欄或者菜單。它還會被看作為多任務中的一個單獨的應用。

          要注冊 Manifest 文件,必須把它鏈接到 HTML 中:

          
          &lt;link rel="manifest" href="manifest.json"&gt;
          

          Safari 還不支持 Web Manifest 標準,但是我們可以用如下的蘋果特定的 meta 標記,定義類原生應用的行為:

          
          &lt;meta name=”apple-mobile-web-app-capable” content=”yes”&gt;
          


          8. 可再次訪問

          通知推送不再只限于原生應用。多虧了 service worker 和 Push API,Web 應用程序也可以發送消息給 Android 通知欄。并不是所有應用都可以從這個功能受益,但是當正確使用此功能時,通知確實可以幫助吸引用戶。

          這個主題已經超出了本教程的范圍,因為推送很復雜,值得用一個完整的課程講解。如果你依然想在你的 Web 應用中實現通知推送,這里有一些最好的學習資源:

          • Google 開發者網站上的《推送通知:及時、相關和準確》 – 這里.
          • Google 開發者網站上的《開放 Web 上的推送通知 – 這里.
          • MDN 上的《使用 Push API》 – 這里.
          • Push.js 庫,提供處理推送通知的更清潔的 API – 這里.


          9. 可安裝

          默認情況下,任何網站都可以用 Chrome 瀏覽器菜單的 "添加到主屏幕" 按鈕,保存到主屏幕上。不過,讓用戶以這種方式 "安裝" 應用程序可能有點難,因為大多數人完全不知道這個功能。

          值得慶幸的是,還是有一種方式讓應用程序提示用戶保存它,即采用一個簡單安裝彈出窗口來提示。為防止開發者濫用這些彈出窗口,不允許以編程的方式顯示它們。而是在應用程序滿足如下幾個條件時,才會讓這些窗口自己出現:

          1. 有一個有效的 Web Manifest。
          2. 安裝有有效的 Service Worker。
          3. 通過 HTTPS 訪問應用程序。

          我們滿足上面涉及的所有條件,所以當用戶訪問網站幾次后,會得到這個提示:


          整個應用程序的安裝過程就在這個簡單的提示中。安裝立即發生,并且一旦保存了,PhotoBooth 就可以從主屏幕圖標啟動,表現得與原生應用一模一樣。 


          10. 可鏈接

          任何人只有要瀏覽器,就可以訪問 PWA 應用,這樣應用僅通過其 URL 就可以被共享。發現或者安裝這些應用不需要第三方工具。

          如果應用程序以獨立模式運行,因為瀏覽器地址欄和菜單都是不可見的,所以在應用內添加一個共享按鈕也是明智的。


          總結

          現在我們的 PWA 完成了。我們可以用 Google 的官方工具 Lighthouse 來測試一下它對 PWA 規則遵循的咋樣。Lighthouse 會重建可能的場景,并且完整測試應用。如下是它告訴我們關于 PhotoBooth 的東西: 


          我們通過了!

          如果你想找到更多的 PWA 玩玩,請到 pwa.rocks。這個網站上有一些不錯的游戲和工具,展示了漸進式 Web 應用的威力。原文鏈接

          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/266

          WebAR 如何改變增強現實的未來

          增強現實技術在開發人員和智能手機用戶中越來越受歡迎,但它還是沒有在無所不在的技術中占據一席之地。要體驗 AR,用戶必須安裝專用的程序,但經常會在用過幾次后就將其刪除,甚至根本去下載它

          Web服務常用的幾種開發方法

          Web服務,即通過程序實現網頁服務,服務啟動后,一般用戶可通過訪問URL獲取到網站提供的網頁服務,如網頁瀏覽、留言、商品購買等。開發Web服務的技術有很多,有Java、Python、ASP.NET、腳本語言等

          5 張圖描繪Web3 堆棧全景

          Web3 堆棧最令人難以置信的一點是,它們不需要任何集中協調就可以組合在一起。開發本身是去中心化的。沒有主架構師。這與地球上幾乎所有其他的開發堆棧項目形成了鮮明的對比。在 Linux 基金會,少數人設定整個 Linux 的方向

          web開發新手應該知曉的20件事

          在我當初剛從事 web 開發的時候,有很多重要的事我并沒有事先了解。現在看來,我的很多期望都和現實有很大的差距。在這篇文章里,我會告訴你 20 件事情,這些都是在你準備開始或者剛開始 web 開發不久的時候就應該知曉的

          Web前端開發的應用和前景:web 1.0到web 3.0

          web3.0時代,前端做著前端的工作,盡自己可能去在多端的世界去為用戶體驗努力,后端去做著后端的工作,去更好的處理數據,利用人工智能?利用爬蟲?將數據充分的使用,為用戶分析數據,給予用戶最想要的數據。

          函數式 UI:Web開發終于擺脫了框架的束縛

          用戶界面都是響應式系統,因此可以使用一個純響應函數,將用戶界面接受的事件映射到接口系統上的動作來定義用戶界面。利用函數式編程的實現技術可以讓實現更接近規范,更易推理和測試。函數式 UI 可以讓開發人員擺脫不兼容的 UI 和測試框架帶來的麻煩

          W3C是什么?IETF是什么?

          無規矩不成方圓,軟件開發當然不能例外。Web開發涉及的廠商和技術非常多,所以必須要有參考的標準,而且需要一系列的標準。Web程序都是通過瀏覽器來解析執行的,通過頁面的展示內容與用戶互動,所以Web標準不僅要求各個瀏覽器都要遵循

          如何遷移Flutter項目到Flutter Web?

          這篇簡單介紹下怎么將一個現有的 Flutter 項目轉成 Flutter Web 項目。開始之前先澆一盆冷水,我們理想中的一套代碼、多端運行的愿望是要破滅了,至少目前版本的 Flutter Web SDK 是沒法做到的

          Gavin Wood:創造一個web3.0的加密世界

          我最早是以太坊的聯合創始人,也是CTO,黃皮書的作者。當開啟以太坊時,我們是局外人,關注的焦點更多的是BTC。當時,人們將投身以太坊視為浪費時間和精力。但現在以太坊已經成長起來,進入了完整循環。但與此同時

          web頁面的回流和重繪

          什么是回流? 回流也叫重排(reflow),當頁面中的元素發生影響布局的變化,比如:改變寬高,修改顯示影藏。頁面需要重新布局,就會觸發重排。 簡單的說就是,頁面布局改變,就會觸發重排。

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网