天天看點

從普通網站到 PWA 你還在重新寫代碼嗎?

作者:鼎道智聯

在 Web 技術大放異彩的今天,我們正在享受着不斷湧現的新技術所帶來的全新 Web 體驗。網站從 Web 1.0 時代由超連結構成的靜态隻讀頁面,到 Web 2.0 時代由 AJAX 和 動态 JavaScript 技術構成的可互動的動态内容 Web 應用。

Web 正向着更加标準化、語義化、智能化、3D 化、去中心化的方向極速發展。漸進式 Web 應用 (Progressive Web Apps,即 PWA) 則是在這種時代背景下必然會誕生并持續發展的産物。

01

PWA到底是什麼?

PWA 是一個技術名詞,更代表了一種不斷進步的理念。它集合了多種讓 Web 應用更好運作的技術規範來增強 Web 應用的功能和體驗。

從普通網站到 PWA 你還在重新寫代碼嗎?
  • Web 應用清單 (manifest) 可以輕松描述一個無限貼近原生的 Web 應用的行為和展現方式;
  • Service worker 提供了一系列接口來扮演 Web 應用、浏覽器與網絡之間的代理人使得 Web 的離線通路成為可能;
  • HTTPS 保證了 PWA 可以阻止通訊竊聽及保證内容不被篡改。

雖然 PWA 中的 P 代表了 progressive,即從普通的 Web 應用到 PWA 以及每一個 Web 新特性的疊代都是漸進式的,但是具備這一系列優勢的 PWA,也并不是沒有任何改造成本。

幫助你快速完成普通 Web 應用到 PWA 的轉化,補全缺失的 PWA 要素,是鼎道 PWA CoDing 的主要目标。

02

什麼是PWA CoDing?

鼎道PWA CoDing 作為一款智能的線上 PWA 轉化工具,會提供一種更加便捷的、可視化的方式來完成這些看似繁瑣的工作。

它本身就是一個 PWA,可以運作在較新的基于 Chromium 核心的浏覽器中,像是 Chrome、Edge、Opera 等等,在鼎道浏覽器 (DingTao) 中,它的功能會有一定的增強。

從普通網站到 PWA 你還在重新寫代碼嗎?

03

首頁最中心的位置就是兩類 PWA 的建立入口。無論選擇“上傳 Web 源檔案”還是“線上建立 PWA”,接下來的一系列向導式步驟都可以幫助你完成以下的 PWA 要素生成:

1.應用外表,随心裝飾:

應用清單 (Manifest) 的配置集合了最常用且必備的選項,除了基本的清單資訊,圖示生成器可以幫助你生成 PWA 所需的各種尺寸的圖示。

2.代碼指南,随動展示:

跟随選項的設定,代碼訓示器與選項說明會時刻變化,讓你清晰了解每一個選項的含義和對應的代碼結構。對于 service worker,這種貼心的提示依舊會為你服務。

3.服務代理,随你選擇:

Service worker 一直是 PWA 讓人感覺煩瑣且不易上手的一環。

你也許隻是需要一個簡單的模闆來達成 PWA 要素生成,這些 service worker 模闆都是經過精心挑選且具有代表性的,對模闆代碼的少量修改即可滿足很多場景的需要。

而更進階的 workbox 則會給你更大的選擇權來實作更加精細化的 service worker 編寫。

Workbox 是 Google 推出得更加易用的 service worker 工具,鼎道PWA CoDing 将這些配置項以圖形化的方式呈現以減少代碼編寫。

從普通網站到 PWA 你還在重新寫代碼嗎?

上述的 PWA 要素都會被自動注入到你的 Web 應用中。

PWA 預覽環境,可以第一時間檢視自己的 PWA 的實際運作效果,你的網站到 PWA 的漸進提升就是這麼簡單!

04

我們也歡迎你将剛剛生成的 PWA 釋出到鼎道生态開放平台,使您的服務成為鼎道生态的一份子。

從普通網站到 PWA 你還在重新寫代碼嗎?

未來,鼎道PWA CoDing 還會陸續推出更多的與 PWA、與 Web 特性相關的功能。

正如産品名稱“CoDing”一樣,雖未編碼,勝似編碼,我們緻力于為開發者提供一種全新的編碼體驗,展現更多角度的 Web 之美。

我們将“助天下人盡享智能物聯服務”作為己任,緻力于打造出全新的軟硬體生态,為各個開發者提供更便利的研發空間,為使用者提供更優質的服務體驗。我們期待着鼎道智聯帶來更多驚喜,創造更多的可能性。

歡迎各界關注并加入鼎道智聯,我們一起探索和前進。

從普通網站到 PWA 你還在重新寫代碼嗎?