長途關(guān)系通常涉及頻繁的飛行。在這些航班期間，趕上Reddit的想法變得吸引人。我決定構(gòu)建自己的現(xiàn)代網(wǎng)絡(luò)技術(shù)和“無構(gòu)建”開發(fā)方法，而不是尋找離線Reddit應(yīng)用程序。

這篇文章慶祝創(chuàng)新的網(wǎng)絡(luò)開發(fā)人員及其貢獻(xiàn)。雖然不是分步教程，但可以在GitHub上獲得完整的代碼。

目標(biāo)是Reddit讀取器，最大程度地減少了工具和依賴項(xiàng)。我們將利用：

• litelement：輕巧，易于使用的組件模型利用Web組件。
• @Vaadin/Router：具有出色開發(fā)人員體驗(yàn)的緊湊型路由器。
• @pika/web：簡化開發(fā)過程中的模塊管理。
• ES-DEV服務(wù)器：直接的DEV服務(wù)器（盡管任何HTTP服務(wù)器都可以使用）。

我們還將利用瀏覽器標(biāo)準(zhǔn)：ES模塊，Web組件，導(dǎo)入地圖，KV存儲和服務(wù)工作者。

依賴性安裝：

 npm i -s lit -Element @vaadin/路由器
NPM I -D @Pika/Web ES-DEV服務(wù)器

添加一個postinstall腳本到package.json ：

 “腳本”：{
  “開始”：“ es-dev-server”，
  “郵政安裝”：“ Pika-Web”
}

皮卡：簡化依賴性

Pika（由Fred K. Schott）簡化了Web開發(fā)，將依賴項(xiàng)安裝為web_modules/ Directory中的單個JavaScript文件。這簡化了過程并避免復(fù)雜的構(gòu)建配置。輸出類似于：

 <code>└─ web_modules/ ├─ lit-element.js └─ @vaadin └─ router.js</code>

導(dǎo)入地圖：解決裸露的指定符

我們的index.html包含一個用于處理裸模塊指定符的導(dǎo)入映射：

<script type="importmap">
  {
    "imports": {
      "@vaadin/router": "/web_modules/@vaadin/router.js",
      "lit-element": "/web_modules/lit-element.js"
    }
  }
</script>
<reddit-pwa-app></reddit-pwa-app>

reddit-pwa-app.js ：

從“ lit-Element”導(dǎo)入{litelement，html}；

redditpwaapp類擴(kuò)展了litelement {
  使成為（） {
    返回html`<h1>你好世界！</h1> `;
  }
}

customElement.define（'reddit-pwa-app'，redditpwaapp）;

導(dǎo)入地圖求解了裸模塊指定問題，從而無需復(fù)雜的構(gòu)建過程即可啟用瀏覽器兼容性。

服務(wù)工作者：離線功能

要啟用離線訪問，我們在index.html中實(shí)施了一個服務(wù)工作者（ sw.js ）：

如果（Navigator中的'ServiceWorker'）{
  window.addeventlistener（'load'，（）=> {
    Navigator.ServiceWorker.Register（'./ sw.js'）;
  }）;
}

服務(wù)工作者預(yù)資產(chǎn)，確保離線功能。皮卡通過提供清晰的資產(chǎn)清單來簡化這一點(diǎn)。 （有關(guān)sw.js的詳細(xì)信息，請參見GitHub回購）。

KV存儲：離線數(shù)據(jù)持久性

為了節(jié)省帖子，我們使用KV Storage，這是一個內(nèi)置的模塊，該模塊在索引EDEXEDDB的頂部分層。它提供了異步操作，并且在LocalStorage上的性能提高了。多填充用于確保更廣泛的瀏覽器支持。 （有關(guān)實(shí)施詳細(xì)信息，請參見GitHub回購）。

用進(jìn)口地圖進(jìn)行多填充

包括KV存儲多填充（ kv-storage-polyfill ）并通過導(dǎo)入地圖進(jìn)行管理，如果沒有本機(jī)KV存儲，則提供后備機(jī)制。

結(jié)論

該項(xiàng)目展示了建立一個具有最小依賴性的功能性PWA，突出了現(xiàn)代網(wǎng)絡(luò)標(biāo)準(zhǔn)的好處和無建造方法。盡管存在替代構(gòu)建工具，但此方法優(yōu)先考慮簡單性和易于訪問的便利性。 GitHub存儲庫提供了完整的代碼庫，以進(jìn)行進(jìn)一步探索。歡迎在Twitter（@passle_或@openwc）和Open-wc.org上進(jìn)行反饋和討論。

致謝：

特別感謝Guy Bedford（Es-Module-Shims），Luke Jackson（“不要構(gòu)建該應(yīng)用！”），Benny Powers和Lars Den Bakker的貢獻(xiàn)。

以上是無構(gòu)建的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！