最初發佈在Substack 上： https://andresalvareziglesias.substack.com/p/pwa-and-django-1-what-is-a-web-application?r=1ymfiv

目前的網路應用程式不僅僅是顯示互動資訊的網頁。有時，它們的行為幾乎就像本機應用程式一樣。他們使用什麼樣的魔法來做到這一點？本系列文章將回答這個問題...

什麼是漸進式 Web 應用程式

我喜歡 Mozilla 開發者網站 (https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps) 上 PWA 的定義：

漸進式 Web 應用程式 (PWA) 是使用 Web 平台技術建立的應用程序，但提供類似於特定於平台的應用程式的使用者體驗。與網站一樣，PWA 可以透過單一程式碼庫在多個平台和裝置上運行。與特定於平台的應用程式一樣，它可以安裝在設備上，可以在離線和後台運行，並且可以與設備和其他已安裝的應用程式整合。

它是本機應用程式和網頁之間的混合體，這要歸功於當今網頁瀏覽器的令人難以置信的功能，例如：

• 嵌入式資料庫
• 線下工作者
• 桌面與行動作業系統整合
• ETC。

在本系列文章中，我們將在 Google Project IDX 的幫助下，使用我們喜愛的 Django 開發一個離線且可安裝的漸進式 Web 應用程式。

建立演示環境

建立 github 儲存庫：

在 IDX 中建立新應用程式並匯入該儲存庫：

從 IDX 控制台初始化 Django 應用程式：

python -m venv ~/.venv
source ~/.venv/bin/activate

mkdir src
cd src

echo "django" > requirements.txt
pip install --upgrade pip
pip install -r requirements.txt

django-admin startproject djangopwa

進行初始遷移並運行伺服器：

python manage.py migrate
python manage.py runserver

在專案 https://github.com/arifnd/nix-idx/ 的幫助下建立 IDX 檔案以啟用嵌入式預覽，該專案編譯了多個 IDX 配置：

cd ~/djangopwa 
wget https://raw.githubusercontent.com/arifnd/nix-idx/main/python/django/devserver.sh
cd ~/djangopwa/.idx
wget https://raw.githubusercontent.com/arifnd/nix-idx/main/python/django/dev.nix

注意：根據需要編輯預設的 dev.nix 和 devserver.sh 並重新啟動 IDX 環境

然後，建立演示應用程式：

python manage.py startapp demo

新增空白視圖：

from django.shortcuts import render

def index(request):
    context = {}
    return render(request, "index.html", context)

創建到新應用程式的路由：

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path("", include("demo.urls")),
    path('admin/', admin.site.urls),
]

再等幾天，下一章！

關於名單

在Python和Docker的貼文中，我也會寫一些其他相關主題，例如：

• 軟體架構
• 程式設計環境
• Linux作業系統
• ETC。

如果您發現一些有趣的技術、程式語言或其他什麼，請告訴我！我總是願意學習新事物！

關於作者

我是 Andrés，一位來自帕爾馬的全端軟體開發人員，我正在踏上提高編碼技能的個人旅程。我也是一位自行出版的奇幻作家，以我的名字出版了四本小說。有什麼問題都可以問我！