React同構(gòu)應(yīng)用的PWA升級指南

一、前言

近期，我為個人博客網(wǎng)站進行了PWA（Progressive Web App）升級，并在這一過程中遇到了不少在React同構(gòu)應(yīng)用中使用PWA時的問題。本文旨在分享我的經(jīng)驗，幫助大家解決類似的問題。需要注意的是，本文不會詳細介紹PWA的基礎(chǔ)知識，如有需要，請查閱相關(guān)資料。

二、PWA特性概述

PWA并非單一技術(shù)，而是眾多技術(shù)的集合，包括Service Worker、manifest文件、桌面添加、push通知等。在React同構(gòu)應(yīng)用中，我們可以充分利用PWA的特性，提升應(yīng)用的性能和用戶體驗。

三、Service Worker的應(yīng)用

Service Worker是PWA的核心技術(shù)之一，類似于瀏覽器后臺運行的線程。在頁面首次加載時，Service Worker會被激活，并通過fetch對每個資源進行和對緩存的控制。

四、緩存策略的實施

在React同構(gòu)應(yīng)用中，我們需要對靜態(tài)資源、頁面以及后端接口數(shù)據(jù)進行緩存。

1. 緩存靜態(tài)資源：我們需要緩存CSS、JS等靜態(tài)資源。對于我的博客來說，引用的腳本和樣式都通過hash進行持久化緩存。開啟強緩存后，下次用戶訪問網(wǎng)站時就可以直接從瀏覽器緩存中讀取。

2. 緩存頁面：緩存頁面是PWA的關(guān)鍵部分。在離線狀態(tài)下加載頁面時，如果沒有緩存，將無法加載頁面。有了Service Worker，即使離線也能加載之前緩存好的頁面。

3. 緩存后端接口數(shù)據(jù)：緩存接口數(shù)據(jù)是必要的，但并非必須通過Service Worker實現(xiàn)。前端可以通過localstorage、indexeddb等存放數(shù)據(jù)。在這里，我選擇通過Service Worker實現(xiàn)緩存接口數(shù)據(jù)的功能。

針對頁面緩存策略，由于React單頁同構(gòu)應(yīng)用每次加載頁面時數(shù)據(jù)都是動態(tài)的，我采取的策略是在第一次加載時緩存/index.html資源，并緩存頁面數(shù)據(jù)。用戶離線訪問時，如果沒有緩存對應(yīng)的路徑，例如/archives資源訪問不到，則返回/index.html走異步加載頁面的邏輯。在安裝（install）中緩存/index.html，以確保Service Worker第一次加載時緩存默認頁面。在頁面加載完成后，在React組件中立即緩存數(shù)據(jù)，以保證用戶離線訪問時能夠獲取到所需的數(shù)據(jù)。

五、總結(jié)

接口緩存策略

當我們談?wù)擁撁婢彺鏁r，接口緩存同樣是一個不可忽視的話題。何為接口緩存？它與頁面緩存有何異同？讓我們來一探究竟。

在網(wǎng)頁開發(fā)中，每當用戶訪問頁面時，為了提高性能和用戶體驗，我們都會考慮使用緩存機制。頁面緩存與接口緩存都是這一機制的重要組成部分。它們的相似之處在于，都是為了減少重復(fù)的數(shù)據(jù)請求，加速頁面的加載速度。但它們之間有一個明顯的不同點：在首次頁面加載時，不一定有頁面緩存，但接口緩存往往已經(jīng)存在。

針對接口緩存的策略，我們可以借鑒頁面緩存的經(jīng)驗。例如，在獲取數(shù)據(jù)接口時，我們可以先讀取緩存中的接口數(shù)據(jù)進行渲染，當真正的網(wǎng)絡(luò)接口數(shù)據(jù)返回后再進行替換。這樣不僅能有效減少用戶的首屏渲染時間，還能避免因網(wǎng)絡(luò)延遲導(dǎo)致的頁面卡頓或閃爍現(xiàn)象。為了平滑過渡，我們還可以添加一些動畫效果，提升用戶體驗。

在實際應(yīng)用中，我們可能會遇到一些問題。其中一個是關(guān)于service worker的激活問題。默認情況下，頁面的請求并不會通過service worker（簡稱SW）處理，除非這個頁面是通過SW獲取的。這意味著在安裝SW后，用戶需要刷新頁面才能享受到離線緩存的效果。在SW成功安裝并激活之前，它不會響應(yīng)諸如fetch或push等。

對于單頁面應(yīng)用來說，這個問題更為突出。在路由切換（沒有刷新頁面）時，由于沒有激活的SW，接口數(shù)據(jù)往往沒有被緩存。我們需要快速激活SW。有些資料建議我們在install中添加self.skipWaiting()，以跳過等待時間快速激活SW。但在實踐中，我發(fā)現(xiàn)即使不添加這個命令，SW也能正常激活，具體原因還有待進一步探索?，F(xiàn)在，當你第一次加載頁面，即使在離線狀態(tài)下跳轉(zhuǎn)路由，也能順利加載頁面。

除了上述問題，我們還需要注意一些與SW相關(guān)的其他事項。比如不要對sw.js開啟強緩存。因為每次用戶訪問頁面時，我們都會重新獲取sw.js文件，通過比較文件內(nèi)容來判斷SW是否需要更新。如果開啟強緩存，可能會導(dǎo)致無法更新SW。避免改變SW的URL也是最佳實踐。如果在原地址上修改SW的URL，可能會導(dǎo)致用戶永遠獲取不到新的SW版本。

經(jīng)過上述步驟和注意事項的實施后，我們可以完成使用Service Worker對頁面進行離線緩存的功能。想要體驗這一功能，請訪問我們的博客（具體網(wǎng)址）。在這里，你可以隨意瀏覽任意頁面，然后關(guān)閉網(wǎng)絡(luò)再次訪問。你會發(fā)現(xiàn)之前瀏覽過的頁面都能在離線狀態(tài)下順暢訪問。需要注意的是，iOS需要在11.3版本以上的系統(tǒng)上才能支持該功能，推薦使用Safari瀏覽器進行訪問；而對于Android用戶，請選擇支持Service Worker的瀏覽器。

除了離線緩存功能外，我們還可以使用manifest文件將站點添加到移動端的桌面應(yīng)用。通過設(shè)置manifest文件，我們可以讓站點擁有趨近于原生應(yīng)用的體驗。這樣不僅能提高用戶的使用頻率和滿意度，還能為開發(fā)者帶來更多的可能性。

希望你能對接口緩存策略有更深入的了解，并在實際開發(fā)中靈活應(yīng)用，提升你的網(wǎng)頁性能和用戶體驗。使用webpack-pwa-manifest插件打造PWA體驗

=====================

我的博客站點是通過webpack構(gòu)建前端代碼的，為了進一步提升用戶體驗和應(yīng)用的性能，我選擇了在社區(qū)中引入webpack-pwa-manifest插件來生成manifest.json文件。接下來，讓我們一起探索如何輕松集成此插件，為您的React應(yīng)用添加PWA特性。

一、安裝與配置webpack-pwa-manifest插件

-

你需要安裝webpack-pwa-manifest插件。安裝完成后，在webpack配置文件中進行相應(yīng)的配置。配置信息非常直觀和簡單，你只需按照官方文檔的要求進行設(shè)置即可。一旦配置完成，webpack會在構(gòu)建過程中自動生成相應(yīng)的manifest文件，并在html文件中進行引用。生成的manifest文件包含了關(guān)于你的應(yīng)用的重要信息，如名稱、圖標、主題顏色等。

二、為iOS添加桌面應(yīng)用支持

--

生成的manifest文件不僅可以為你的應(yīng)用提供豐富的元數(shù)據(jù)，還能讓你的應(yīng)用在iOS上具備桌面應(yīng)用的功能。當你的應(yīng)用在iOS設(shè)備上引導(dǎo)開時，系統(tǒng)會根據(jù)manifest文件中的配置信息提示用戶是否將你的應(yīng)用添加到桌面。這樣，你的應(yīng)用就能像原生應(yīng)用一樣被用戶便捷地使用。

三、測試與驗證

-

完成上述配置后，你可以通過Chrome開發(fā)者工具中的Application-Manifest選項來查看生成的manifest文件是否生效。如果一切配置正確，你會發(fā)現(xiàn)manifest文件已經(jīng)被成功加載并應(yīng)用到你的應(yīng)用中。安卓設(shè)備會自動識別并提示用戶安裝你的應(yīng)用。這意味著你的應(yīng)用已經(jīng)成功地實現(xiàn)了PWA功能。接下來，你可以進一步測試應(yīng)用的性能和用戶體驗，確保一切運行正常。

四、React Native的優(yōu)劣分析

除了使用PWA技術(shù)提升web應(yīng)用的性能外，React Native作為一種流行的移動應(yīng)用開發(fā)框架也備受關(guān)注。React Native充分利用了Facebook的現(xiàn)有技術(shù)資源，是一個優(yōu)秀的集成作品。這個團隊對前端的深入了解使得Native code在React Native中退居二線。React Native對于前端開發(fā)者來說有很大的吸引力，因為大多數(shù)布局代碼都是JSX編寫，所有Native組件都是標簽化的，這大大降低了學(xué)習(xí)成本并大大減少了代碼量。復(fù)用React系統(tǒng)也減少了一定的學(xué)習(xí)和開發(fā)成本，更重要的是利用了React的分層和diff機制。js層傳給Native層的是一個diff后的json，然后由Native將這個數(shù)據(jù)映射成真正的布局視圖。這些特性使得React Native成為了一種非常受歡迎的開發(fā)框架。對于是否需要編譯的問題以及其他的性能考量因素需要根據(jù)項目的實際需求進行評估和選擇。目前iOS 11.3僅支持PWA中的service worker和app manifest功能但相信不久的將來其他功能也會得到支持屆時PWA將在移動端展現(xiàn)其強大的潛力。總的來說無論是React Native還是PWA都有其獨特的優(yōu)勢和適用場景開發(fā)者可以根據(jù)項目需求選擇最適合的技術(shù)方案來提升應(yīng)用的性能和用戶體驗。本文介紹了如何使用webpack-pwa-manifest插件為React應(yīng)用添加PWA特性以及評價了React Native的優(yōu)劣分析讓讀者更好地了解這兩種技術(shù)在移動應(yīng)用開發(fā)中的應(yīng)用價值和特點。未來隨著技術(shù)的不斷發(fā)展和完善PWA和React Native等移動應(yīng)用開發(fā)框架將為企業(yè)和個人開發(fā)者帶來更多創(chuàng)新和機會推動移動應(yīng)用的快速發(fā)展和普及。React Native的系統(tǒng)架構(gòu)與通信機制詳解

一、React Native的通信機制

React Native通過js-objc的單向調(diào)用機制，將原生UI組件的方法通過JavaScriptCore或WebView（針對低版本iOS）映射到JavaScript中。這種異步的調(diào)用過程，使得React Native能夠?qū)avaScript運行在桌面Chrome中，并通過WebSocket連接Native Code和桌面Chrome，從而極大地便利了開發(fā)者進行調(diào)試。這一機制在React Native通信機制詳解的文章中有詳細的闡述。這種設(shè)計也帶來了一些問題，將在后文進行詳細討論。

二、點按操作的抽象

三、調(diào)試的便利性

React Native的調(diào)試過程相當方便。修改JavaScript代碼后，通過內(nèi)建的nodeJS watcher編譯成bundle，在模擬器中按Cmd+R即可實時查看效果。按Cmd+D可以打開一個Chrome窗口，所有的JavaScript代碼都在Chrome中運行，這使得斷點單步調(diào)試、調(diào)用棧查看等操作變得非常簡單。

四、遺留問題與挑戰(zhàn)

盡管React Native具有許多優(yōu)點，但仍存在一些遺留問題。系統(tǒng)仍然依賴原生組件暴露出來的組件和方法。例如，ScrollView這個組件在Native層有大量的，但這些在現(xiàn)有版本中的React Native并未完全暴露出來，這限制了組件聯(lián)動效果的開發(fā)。當前版本的React Native中有很多組件是iOS only的，這意味著開發(fā)者需要在不同平臺下寫兩套代碼，且所有功能仍然強烈依賴于React Native開發(fā)人員暴露的接口。

五、學(xué)習(xí)成本與未來發(fā)展

由于React Native最外層是React，初次學(xué)習(xí)成本較高。與傳統(tǒng)的Hybrid方案不同，學(xué)習(xí)React Native需要掌握更多的知識和技能。一旦掌握了React的相關(guān)知識，后續(xù)的開發(fā)會變得相對簡單。盡管React Native仍然不完善，文檔不全，但其在集成到現(xiàn)有應(yīng)用方面的文檔已經(jīng)逐步推出?；趇OS的殘缺不全的系統(tǒng)在React的包裝下，顯得不那么面目可憎，且其未來發(fā)展值得期待。

React Native作為一種新興的移動應(yīng)用開發(fā)框架，雖然在某些方面還存在不足，但其強大的功能、便捷的調(diào)試體驗和不斷完善的生態(tài)環(huán)境，使其成為一種備受關(guān)注的技術(shù)。React 的新動態(tài)與深入解讀：

Android版本更新及未來設(shè)計變動

據(jù)官方消息透露，React 的 Android 版本將在半年后才發(fā)布。屆時，整個系統(tǒng)設(shè)計可能會有重大更新和改進。對于一直關(guān)注 React 的開發(fā)者和愛好者來說，這無疑是一個值得期待的消息。

在此次更新中，Tabbar的設(shè)計引起了我的注意。令我驚喜的是，他們采用了iconfont方案。在我的當前項目中也有類似的實現(xiàn)，但API的設(shè)計一直是我們面臨的一個難題。在React的Tabbar實現(xiàn)中，我發(fā)現(xiàn)了一種新的寫法：

在這里，_ix_DEPRECATED的定義處有一行注釋：“TODO(nicklockwood): How can this fit our require system?”這句話引發(fā)了我對如何整合現(xiàn)有系統(tǒng)的思考。

一周前對React Native源碼的解讀

一周前，在React Native還未開源的時候，我們組通過反編譯Facebook Group的ipa代碼進行了一些分析。經(jīng)過幾天的源碼閱讀，我們對React Native的內(nèi)部核心機制有了基本的了解。

React Native的核心實現(xiàn)可以概括為以下幾點（詳細的解讀將會后續(xù)更新）：

1. React Native中沒有使用WebView，它是一個真正的Native應(yīng)用。它執(zhí)行JS使用的是JavascriptCore，而不是通過Hybrid的方式。
2. React Native的核心由iOS Native code提供了一些最基本的類和組件。這些類（如RCTDeviceEventEmitter、RCTRenderingPerf等）和組件（如RCTView、RCTTextField、RCTTextView等）構(gòu)成了React Native的JS部分的基本組件（如Popover、Listview等），供上層業(yè)務(wù)使用。
3. React Native實現(xiàn)了一套類似CSS的子集來解決樣式問題。這套系統(tǒng)相當復(fù)雜且強大，它允許將Native的核心組件組裝成JS層的基本組件，再進一步組成業(yè)務(wù)端的業(yè)務(wù)組件。據(jù)我們所知，這是通過采用facebook/css-layout的C語言版本實現(xiàn)的。這套系統(tǒng)支持類似于flex-direction: column這樣的代碼，這正是css-layout支持的語法。

在React Native中，JS工程師主要負責將基本組件拼裝成可用的React組件，而Native Code的工程師則致力于提供核心組件并確保足夠的擴展性、靈活性和性能。這一分工使得React Native能夠充分發(fā)揮其優(yōu)勢，為開發(fā)者提供更加高效、靈活的開發(fā)體驗。

通過以上解讀，我們可以發(fā)現(xiàn)React Native在不斷發(fā)展和完善中。無論是Android版本的更新還是源碼的解讀，都讓我們對React Native的未來充滿期待。隨著技術(shù)的不斷進步，React Native將會為我們帶來更多的驚喜和新的開發(fā)體驗。

以上。

調(diào)研手段及收獲

在React Native還未開源的時候，我們采用了反編譯的手段對Facebook Group的ipa代碼進行了分析。通過反解出來的幾百個JS文件，我們對React Native的內(nèi)部機制有了初步了解。

通過幾天的源碼閱讀和分析，我們發(fā)現(xiàn)了React Native的一些核心實現(xiàn)細節(jié)。例如，它并沒有使用WebView，而是使用JavascriptCore來執(zhí)行JS代碼。iOS Native code提供了一些核心類和組件，這些類和組件構(gòu)成了React Native的JS部分的基本組件。

通過這次分析過程，我們不僅了解了React Native的內(nèi)部機制，還發(fā)現(xiàn)了它的一些優(yōu)點和挑戰(zhàn)。例如，React Native實現(xiàn)了一套類似CSS的子集來解決樣式問題，這使得它能夠在Native環(huán)境中提供高效、靈活的UI開發(fā)體驗。如何更好地整合現(xiàn)有系統(tǒng)、提供足夠的擴展性和性能仍然是我們需要面對的挑戰(zhàn)。

這次分析過程讓我們對React Native有了更深入的了解，也讓我們對未來的開發(fā)有了更多的期待。

React Native設(shè)計概覽

一、ReactJS與React Native的關(guān)系

雖然我對ReactJS有著深刻的理解（盡管未在生產(chǎn)環(huán)境中直接使用過React，但我對ReactJS與Angular都有研究），React Native與ReactJS之間確實存在直接的關(guān)聯(lián)。React Native的設(shè)計靈感來源于ReactJS的核心思想，并為其在Native應(yīng)用開發(fā)中找到了全新的應(yīng)用場景。

二、ReactJS的設(shè)計特點在React Native中的體現(xiàn)

1. 虛擬DOM與數(shù)組表示：ReactJS中的大工廠入口createElement并不直接返回實體DOM對象，而是一個數(shù)組。在React Native中，這一設(shè)計得到了繼承，并通過特定的橋接機制將這組數(shù)組轉(zhuǎn)換為Native的UI組件。

2. 渲染核心的可替換性：React的底層渲染核心具有靈活性，可以根據(jù)需要進行更換。這一特點在React Native中同樣得到了體現(xiàn)，尤其是在iOS版本的開發(fā)中，通過特定的方法注入機制，實現(xiàn)了與原生代碼的深度融合。

三、React Native的核心實現(xiàn)

React Native充分利用了Facebook的開源項目如JSX和css-layout。在Native code中實現(xiàn)了三組核心API：提供核心組件的API、方法以及對css的解析和樣式返回。這樣，React Native不僅繼承了ReactJS的所有核心功能和設(shè)計思路，而且使得Native開發(fā)變得更為簡單。

四、React Native是什么？

從Native開發(fā)角度看，React Native相當于重新發(fā)明了一個瀏覽器渲染引擎并套上了React的殼。而從Web開發(fā)角度看，React Native是將原來React的后端用Native code來實現(xiàn)。其目標是提供一種融合Web開發(fā)和Native開發(fā)的最佳方案，同時擁有兩者的優(yōu)勢。

五、React Native的優(yōu)勢與劣勢

優(yōu)勢：

1. 無需Webview：React Native擺脫了Webview的束縛，從而避免了由此產(chǎn)生的交互和性能問題。

2. 強大的擴展性：Native端提供基本控件，JS可以自由組合使用，使得應(yīng)用具有更強的擴展性。

3. 原生動畫的便捷實現(xiàn)：Native code可以輕松地實現(xiàn)復(fù)雜的動畫效果，這是Web開發(fā)難以企及的。

React Native是一種融合了Web和Native開發(fā)優(yōu)勢的新型開發(fā)方式。它既繼承了ReactJS的設(shè)計思想，又充分利用了Native開發(fā)的靈活性，為開發(fā)者提供了一種全新的選擇。 優(yōu)勢相對于Native app

一、遠程更新的便捷性

通過更新遠端JS，Native app可以迅速實現(xiàn)功能迭代。這一優(yōu)勢在于，開發(fā)者無需經(jīng)過復(fù)雜的審核流程或等待應(yīng)用商店的更新時間，即可直接推送更新至用戶手中。這一特性在快速響應(yīng)市場需求、修復(fù)漏洞等方面具有顯著優(yōu)勢。這一優(yōu)勢目前已被眾多大型Native app廣泛采用，要想脫穎而出，還需在其它方面展現(xiàn)實力。

劣勢

二、擴展性的局限

與Web開發(fā)和直接編寫Native code相比，其擴展性仍有待提高。Web具有無盡的資源和龐大的社區(qū)支持，而Native code則能更直接地利用設(shè)備硬件功能。在這方面，現(xiàn)有方案仍顯不足。

三、概念轉(zhuǎn)換的復(fù)雜性

從Native轉(zhuǎn)向Web，或反之，都需要進行復(fù)雜的概念轉(zhuǎn)換。這不僅涉及到編程語言的差異，還包括開發(fā)思維、設(shè)計理念等方面的轉(zhuǎn)變。例如，Web開發(fā)中的CSS需要適應(yīng)Native的環(huán)境，而Native的樣式布局也需要轉(zhuǎn)換為原生語言的表達。這一過程中的轉(zhuǎn)換復(fù)雜性，無疑增加了開發(fā)成本和難度。

更新內(nèi)容

四、React Native的新動態(tài)

React Native的開源，為前端工程師提供了新的選擇。React Native的iOS版本已經(jīng)相當成熟，并且得到了廣泛的實踐驗證。通過React Native，前端工程師可以更方便地利用React的技能開發(fā)Native應(yīng)用。React Native也面臨著一些挑戰(zhàn)，如與原生代碼的交互、性能優(yōu)化等問題。隨著技術(shù)的不斷進步，這些問題也在逐步得到解決。

五、基于Electron和Vite的React桌面應(yīng)用開發(fā)

在現(xiàn)代開發(fā)中，結(jié)合Chromium和Node.js的Electron框架為C/S架構(gòu)的桌面應(yīng)用開發(fā)提供了強大的工具。特別是在2023年，基于electron-vite構(gòu)建React桌面客戶端的解決方案已經(jīng)成為新的技術(shù)潮流。這一方案不僅保留了Web開發(fā)的靈活性，還能方便地訪問桌面資源。

本教程系列將詳細介紹如何使用electron-vite構(gòu)建React桌面應(yīng)用。從項目初始化到國內(nèi)鏡像源配置，再到樣式管理、Ant Design集成等實用環(huán)節(jié)，都將一一詳述。無論你是React還是Vue技術(shù)棧的開發(fā)者，都能在這個教程中找到所需的內(nèi)容。清晰的目錄結(jié)構(gòu)和命名規(guī)范也將大大提高開發(fā)效率。完整教程可通過公眾號【臥梅又聞花】獲取，項目源碼已在Gitee和GitHub上提供，歡迎查閱和下載。

總體來說，基于Electron和Vite的React桌面應(yīng)用開發(fā)方案為開發(fā)者提供了一種新的選擇，既能利用Web開發(fā)的靈活性，又能實現(xiàn)桌面應(yīng)用的資源訪問優(yōu)勢。隨著技術(shù)的不斷進步，這一方案將在未來得到更廣泛的應(yīng)用。