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

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

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

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

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

依賴(lài)性安裝：

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

添加一個(gè)postinstall腳本到package.json ：

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

皮卡：簡(jiǎn)化依賴(lài)性

Pika（由Fred K. Schott）簡(jiǎn)化了Web開(kāi)發(fā)，將依賴(lài)項(xiàng)安裝為web_modules/ Directory中的單個(gè)JavaScript文件。這簡(jiǎn)化了過(guò)程並避免複雜的構(gòu)建配置。輸出類(lèi)似於：

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

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

我們的index.html包含一個(gè)用於處理裸模塊指定符的導(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類(lèi)擴(kuò)展了litelement {
  使成為（） {
    返回html`<h1>你好世界！</h1> `;
  }
}

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

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

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

要啟用離線(xiàn)訪(fǎng)問(wèn)，我們?cè)?code>index.html中實(shí)施了一個(gè)服務(wù)工作者（ sw.js ）：

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

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

KV存儲(chǔ)：離線(xiàn)數(shù)據(jù)持久性

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

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

包括KV kv-storage-polyfill ）並通過(guò)導(dǎo)入地圖進(jìn)行管理，如果沒(méi)有本機(jī)KV存儲(chǔ)，則提供後備機(jī)制。

結(jié)論

該項(xiàng)目展示了建立一個(gè)具有最小依賴(lài)性的功能性PWA，突出了現(xiàn)代網(wǎng)絡(luò)標(biāo)準(zhǔn)的好處和無(wú)建造方法。儘管存在替代構(gòu)建工具，但此方法優(yōu)先考慮簡(jiǎn)單性和易於訪(fǎng)問(wèn)的便利性。 GitHub存儲(chǔ)庫(kù)提供了完整的代碼庫(kù)，以進(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)。

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