CSS和PWA：構建進步網絡應用程序的一些技巧

漸進式網絡應用程序（PWAS）：深入研究CSS和開發

>

隨著移動設備的興​​起，在線景觀發生了巨大變化。網站已經從單個版本到台式機/移動變化，響應式設計，最後是本機移動應用程序。 最新的迭代是漸進式Web應用程序（PWA），旨在融合最好的網絡和本機應用體驗。本文探討了CSS技術對於PWA開發至關重要。

密鑰概念：

PWA

PWA將本機應用程序的可靠性，速度和引人入勝的體驗與網絡的可訪問性相結合，消除了對App Store下載的需求。 PWA開發類似於標準Web應用程序開發，但需要一個

文件（控制PWA外觀），服務工作者（啟用離線功能），並仔細管理站點資產，包括CSS。
• >至關重要的CSS注意事項包括平台特定的UI依從性，設備功能設計以及實施優雅的降級/漸進式增強。 精益，極簡主義的設計是最佳性能的關鍵。
• 諸如創建React應用，Angular和Ionic之類的框架簡化了PWA的開發，但會影響性能；仔細考慮他們的使用。 manifest.json
> Google Lighthouse（例如Google Lighthouse）的性能監視工具對於優化PWA速度和響應能力是無價的。
• 理解PWA：
>三個核心PWA功能地址典型的Web應用程序缺點：

可靠性：

> PWAS負載可靠，即使網絡連接較差，也可以模仿本機應用程序，與標準網頁不同。

速度：

PWA性能仍然保持一致，無論位置，網絡速度或其他外部因素如何
1. >參與：> PWA提供與本機應用相似的身臨其境的全屏體驗，沒有App Store安裝，並且經常支持推送通知。
Google倡導了PWA的採用，其受歡迎程度正在迅速增長。 正如DUDA首席執行官Itai Sadan在2018年CloudFest上指出的那樣：“進步的Web應用程序代表了下一個偉大的飛躍……他們採用了本機應用程序的最佳方面……並將其納入響應式網站。”
3. PWA開發要點：> PWA開發與標準Web應用程序開發相似，需要HTTP進行部署（Localhost測試是可以接受的）。 關鍵要求包括：

   1. 清單文件（manifest.json）：此JSON文件控制PWA在設備的主屏幕上的外觀，定義名稱，圖標，顏色等。 CSS在這裡不直接涉及；純粹是配置。 （下面顯示的示例）

      

   2. 服務工作者：一個獨立於瀏覽器運行的JavaScript文件，攔截網絡請求，緩存資源和處理推送通知。這是離線能力的基礎。 （下面的示例摘要）

      <code class="language-javascript">self.addEventListener('install', function(e) {
      e.waitUntil(
        caches.open('airhorner').then(function(cache) {
          return cache.addAll([
            '/',
            '/index.html',
            '/index.html?homescreen=1',
            '/?homescreen=1',
            '/styles/main.css',
            '/scripts/main.min.js',
            '/sounds/airhorn.mp3'
          ]);
        })
      );
      });</code>

   3. >

      >網站資產（包括CSS）：在服務工作者安裝期間，安裝了所有站點資產，包括CSS，JavaScript和媒體文件。 這是CSS樣式生效的地方。

   PWAS的

   CSS注意事項：> 幾個關鍵決策會影響CSS實施：

   • >平台特定的UIS：

     避免使用特定於平台的UIS可防止用戶疏遠用戶，並減少對潛在變化的平台設計的依賴。通常建議採用一種平台不足的方法，同時努力採用類似天然的行為。

     >
   >設備功能：
   • 所有平台的設計，包括台式機（Chrome已經支持桌面PWAS）。 使用CSS和服務工作人員根據可用資源來調整功能。

   優雅的降解和漸進式增強： css固有的優美降解（忽略了無支撐的屬性）應通過漸進的增強來補充。 在使用諸如服務工作者之類的功能之前，請測試API支持：

   • <code class="language-javascript">if (!('serviceWorker' in navigator)) {
       console.log('Service Worker not supported');
       return;
     }</code>

     一般建議：
   >平衡用戶經驗與開發資源的經驗。 利用設計標準（例如材料設計）和框架（例如Bootstrap）進行平台 - 靜態設計。 有條件的CSS加載基於平台（使用
   • 或

     ，儘管後者的可靠性較低），但可以增加複雜性。 navigator.platformnavigator.userAgent> PWA框架：

   框架加速了PWA的開發，但會對性能產生負面影響。 明智地使用它們，尤其是在初始學習階段。 後來，爭取精益，極簡主義樣式表和平台 - 不合Stic設計。

   創建React App：

   提供PWA開發的React組件。 >

   • Google的框架提供本機PWA支持（

     ）。 >

     

   • > ionic：>利用角度，科爾多瓦和內置服務工作者/對跨平台PWA開發的支持。

     

   PWA性能優化： 保持速度和參與至關重要。 保持CSS苗條和極簡主義。 考慮：

   > http/2服務器使用
   對於關鍵CSS
   > NetworkInformationApi和緩存
   • rel=preload插入關鍵CSS
   • 資源最小化和優化
   • Google Lighthouse
   >
   • >此性能監控工具（集成到Chrome DevTools中）生成詳細的報告，以幫助優化PWA性能。

   結論：

   使用CSS開發PWA需要仔細考慮性能和響應能力。 儘管許多Web開發技術都適用，但有關框架使用的明智決定，CSS優化對於創造高性能，引人入勝的用戶體驗至關重要。 切記優先考慮精益，高效的設計。

以上是CSS和PWA：構建進步網絡應用程序的一些技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！