漸進(jìn)式網(wǎng)絡(luò)應(yīng)用程序（PWAS）：深入研究CSS和開(kāi)發(fā)

>

隨著移動(dòng)設(shè)備的興??起，在線景觀發(fā)生了巨大變化。網(wǎng)站已經(jīng)從單個(gè)版本到臺(tái)式機(jī)/移動(dòng)變化，響應(yīng)式設(shè)計(jì)，最後是本機(jī)移動(dòng)應(yīng)用程序。 最新的迭代是漸進(jìn)式Web應(yīng)用程序（PWA），旨在融合最好的網(wǎng)絡(luò)和本機(jī)應(yīng)用體驗(yàn)。本文探討了CSS技術(shù)對(duì)於PWA開(kāi)發(fā)至關(guān)重要。

密鑰概念：

PWA

PWA將本機(jī)應(yīng)用程序的可靠性，速度和引人入勝的體驗(yàn)與網(wǎng)絡(luò)的可訪問(wèn)性相結(jié)合，消除了對(duì)App Store下載的需求。 PWA開(kāi)發(fā)類似於標(biāo)準(zhǔn)Web應(yīng)用程序開(kāi)發(fā)，但需要一個(gè)

文件（控制PWA外觀），服務(wù)工作者（啟用離線功能），並仔細(xì)管理站點(diǎn)資產(chǎn)，包括CSS。
• >至關(guān)重要的CSS注意事項(xiàng)包括平臺(tái)特定的UI依從性，設(shè)備功能設(shè)計(jì)以及實(shí)施優(yōu)雅的降級(jí)/漸進(jìn)式增強(qiáng)。 精益，極簡(jiǎn)主義的設(shè)計(jì)是最佳性能的關(guān)鍵。
• 諸如創(chuàng)建React應(yīng)用，Angular和Ionic之類的框架簡(jiǎn)化了PWA的開(kāi)發(fā)，但會(huì)影響性能；仔細(xì)考慮他們的使用。 manifest.json
> Google Lighthouse（例如Google Lighthouse）的性能監(jiān)視工具對(duì)於優(yōu)化PWA速度和響應(yīng)能力是無(wú)價(jià)的。
• 理解PWA：
>三個(gè)核心PWA功能地址典型的Web應(yīng)用程序缺點(diǎn)：

可靠性：

> PWAS負(fù)載可靠，即使網(wǎng)絡(luò)連接較差，也可以模仿本機(jī)應(yīng)用程序，與標(biāo)準(zhǔn)網(wǎng)頁(yè)不同。

速度：

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

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

      

   2. 服務(wù)工作者：一個(gè)獨(dú)立於瀏覽器運(yùn)行的JavaScript文件，攔截網(wǎng)絡(luò)請(qǐng)求，緩存資源和處理推送通知。這是離線能力的基礎(chǔ)。 （下面的示例摘要）

      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'
          ]);
        })
      );
      });

   3. >

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

   PWAS的

   CSS注意事項(xiàng)：> 幾個(gè)關(guān)鍵決策會(huì)影響CSS實(shí)施：

   • >平臺(tái)特定的UIS：

     避免使用特定於平臺(tái)的UIS可防止用戶疏遠(yuǎn)用戶，並減少對(duì)潛在變化的平臺(tái)設(shè)計(jì)的依賴。通常建議採(cǎi)用一種平臺(tái)不足的方法，同時(shí)努力採(cǎi)用類似天然的行為。

     >
   >設(shè)備功能：
   • 所有平臺(tái)的設(shè)計(jì)，包括臺(tái)式機(jī)（Chrome已經(jīng)支持桌面PWAS）。 使用CSS和服務(wù)工作人員根據(jù)可用資源來(lái)調(diào)整功能。

   優(yōu)雅的降解和漸進(jìn)式增強(qiáng)： css固有的優(yōu)美降解（忽略了無(wú)支撐的屬性）應(yīng)通過(guò)漸進(jìn)的增強(qiáng)來(lái)補(bǔ)充。 在使用諸如服務(wù)工作者之類的功能之前，請(qǐng)測(cè)試API支持：

   • if (!('serviceWorker' in navigator)) {
       console.log('Service Worker not supported');
       return;
     }

     一般建議：
   >平衡用戶經(jīng)驗(yàn)與開(kāi)發(fā)資源的經(jīng)驗(yàn)。 利用設(shè)計(jì)標(biāo)準(zhǔn)（例如材料設(shè)計(jì)）和框架（例如Bootstrap）進(jìn)行平臺(tái) - 靜態(tài)設(shè)計(jì)。 有條件的CSS加載基於平臺(tái)（使用
   • 或

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

   框架加速了PWA的開(kāi)發(fā)，但會(huì)對(duì)性能產(chǎn)生負(fù)面影響。 明智地使用它們，尤其是在初始學(xué)習(xí)階段。 後來(lái)，爭(zhēng)取精益，極簡(jiǎn)主義樣式表和平臺(tái) - 不合Stic設(shè)計(jì)。

   創(chuàng)建React App：

   提供PWA開(kāi)發(fā)的React組件。 >

   • Google的框架提供本機(jī)PWA支持（

     ）。 >

     

   • > ionic：>利用角度，科爾多瓦和內(nèi)置服務(wù)工作者/對(duì)跨平臺(tái)PWA開(kāi)發(fā)的支持。

     

   PWA性能優(yōu)化： 保持速度和參與至關(guān)重要。 保持CSS苗條和極簡(jiǎn)主義。 考慮：

   > http/2服務(wù)器使用
   對(duì)於關(guān)鍵CSS
   > NetworkInformationApi和緩存
   • rel=preload插入關(guān)鍵CSS
   • 資源最小化和優(yōu)化
   • Google Lighthouse
   >
   • >此性能監(jiān)控工具（集成到Chrome DevTools中）生成詳細(xì)的報(bào)告，以幫助優(yōu)化PWA性能。

   結(jié)論：

   使用CSS開(kāi)發(fā)PWA需要仔細(xì)考慮性能和響應(yīng)能力。 儘管許多Web開(kāi)發(fā)技術(shù)都適用，但有關(guān)框架使用的明智決定，CSS優(yōu)化對(duì)於創(chuàng)造高性能，引人入勝的用戶體驗(yàn)至關(guān)重要。 切記優(yōu)先考慮精益，高效的設(shè)計(jì)。

以上是CSS和PWA：構(gòu)建進(jìn)步網(wǎng)絡(luò)應(yīng)用程序的一些技巧的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！