用Svelte建立一個PWA

語言: CN / TW / HK

與本地應用程式類似,漸進式網路應用程式(PWA)是在移動裝置上執行網路應用程式的一種流行解決方案。有了PWA,使用者可以像移動應用一樣輕鬆熟悉地體驗網路應用;同樣地,公司能夠直接在網際網路上託管應用,而不是在不同的移動應用商店。

在本教程中,我們將用Svelte建立我們自己的PWA,這是一個基於命令式與宣告式應用的現代框架。對於像React這樣的傳統框架,你必須單獨構建你的應用程式的所有部分;然而,Svelte只需少量的程式碼就能預先渲染你的應用程式的構建。

首先,我們將通過在Svelte中構建我們自己的PWA來探索其工作原理。然後,我們將看看Sapper和SvelteKit的一些功能,你可以用它們來為你的應用帶來PWA功能。我們將參考一個樣本專案,該專案可以在GitHub上的我的repo中訪問。讓我們開始吧!

PWA功能

在建立我們自己的專案之前,讓我們仔細看看PWA是如何工作的。以下兩個特性與漸進式增強技術一起工作,創造出類似於本地應用程式的體驗。

服務工作者作為網路應用的中介或代理,能夠使用快取資源並優雅地處理糟糕的網際網路連線。

例如,當網際網路連線丟失時,我們可以使用服務工作者來向用戶顯示一條資訊,這樣應用程式就不會突然崩潰。同樣地,服務工作者可以使我們的應用程式儲存本地活動,並在重新獲得網際網路連線後重新同步。

網路清單使使用者能夠在特定平臺上下載或安裝應用程式。使用者在瀏覽器中看到的應用可以離線執行,也可以在類似於本地實現的狀態下執行。儘管清單仍被認為是實驗性的,但它們得到了現代瀏覽器的大力支援。

用Svelte構建PWA

現在我們瞭解了定義PWA的功能,讓我們用Svelte構建我們自己的PWA。本節中的例子是基於GitHub的一個例子。

首先,到你的終端,通過執行下面的程式碼建立一個新的Svelte專案。

``` npx degit sveltejs/template svelte-pwa

```

接下來,我們將安裝我們的JavaScript依賴項。導航到你剛剛建立的目錄中,執行下面的程式碼。

``` cd svelte-pwa npm install

```

當我們使用degit 來建立一個新的專案時,Svelte為一個基本的應用程式提供了支架,其結構如下。

Scaffolded Svelte App Structure

我們將主要處理src 目錄下的檔案。App.svelte 檔案是我們專案的入口點,包含以下程式碼。

``` <script> export let name;

Hello {name}!

Visit the Svelte tutorial to learn how to build Svelte apps.

```

.svelte 檔案有單獨的部分用於樣式、檢視html ,以及任何JavaScript程式碼<scripts>

在你的main.js 檔案中新增以下程式碼,以引導你的應用程式,並告訴捆綁器用你的.svelte App檔案構建專案。

``` import App from './App.svelte'; const app = new App({ target: document.body, props: { name: 'world' } }); export default app;

```

要建立一個PWA,首先,我們要在public 目錄中的service-worker.js 檔案內建立一個服務工作者。

``` "use strict"; // Cache Name const CACHE_NAME = "static-cache-v1"; // Cache Files const FILES_TO_CACHE = ["/offline.html"]; // install self.addEventListener("install", (evt) => { console.log("[ServiceWorker] Install"); evt.waitUntil( caches.open(CACHE_NAME).then((cache) => { console.log("[ServiceWorker] Pre-caching offline page"); return cache.addAll(FILES_TO_CACHE); }) ); self.skipWaiting(); }); // Active PWA Cache and clear out anything older self.addEventListener("activate", (evt) => { console.log("[ServiceWorker] Activate"); evt.waitUntil( caches.keys().then((keyList) => { return Promise.all( keyList.map((key) => { if (key !== CACHE_NAME) { console.log("[ServiceWorker] Removing old cache", key); return caches.delete(key); } }) ); }) ); self.clients.claim(); }); // listen for fetch events in page navigation and return anything that has been cached self.addEventListener("fetch", (evt) => { console.log("[ServiceWorker] Fetch", evt.request.url); // when not a navigation event return if (evt.request.mode !== "navigate") { return; } evt.respondWith( fetch(evt.request).catch(() => { return caches.open(CACHE_NAME).then((cache) => { return cache.match("offline.html"); }); }) ); });

```

在上面的程式碼塊中,我們註冊由服務工作者處理的事件,包括installfetch 事件。為了處理專案的離線使用,我們將快取導航中使用的檔案並記錄我們快取的內容。使用PWA,你可以只快取需要的東西,改善你的使用者體驗。

接下來,我們將建立一個offline.html 檔案,它將被快取到導航中。在public 目錄中新增以下程式碼。

Svelte Cache Public Directory

現在,讓我們在public 目錄中建立一個manifest.json 檔案。

Svelte Manifest JSON

你可以使用icons 條目來為不同的裝置設定安裝圖示,然而,為了簡單起見,我把它留空了。

現在,當Svelte構建你的應用程式時,它將讀取這些檔案並建立一個正在執行的服務工作者,在檢測到離線活動時快取一個導航資源。執行npm run dev ,就可以用服務工作者啟動你的應用程式。如果你在Chrome瀏覽器中開啟DevTools,你會看到服務工作者開始執行。

Svelte App Run Service Worker

要看到服務工作者的執行,你也可以進入network 標籤,將你的會話移到離線狀態。

Svelte Service Worker Offline

Svelte Final Service Worker

在SvelteKit中建立一個PWA

現在,讓我們使用SvelteKit建立一個PWA。在這個例子中,我們將建立一個 "你好,世界!"的應用程式。在你的終端中執行下面的程式碼。

``` npm init svelte@next sveltekit-pwa

```

CLI會問你是想建立一個演示應用程式還是一個骨架專案。選擇演示程式

Svelte Sapper CLI Demo App

CLI還將詢問你是否願意使用TypeScript、Prettier或ESLint。新增下面的配置。

Svelte Sapper TypeScript Prettier Eslint Configuration

現在,進入你的SvelteKit專案目錄,用以下程式碼安裝所需的依賴項。

``` cd sveltekit-pwa npm install

```

為了執行你的專案,新增下面的程式碼。

``` npm run dev -- --open

```

New SvelteKit App Homepage

現在我們的專案已經建立,我們可以使用建立基本的Svelte PWA所遵循的相同步驟使其成為一個PWA。在static 目錄中建立一個manifest.json 檔案。

SvelteKit PWA Manifest Json

接下來,修改src 目錄下的app.html 檔案,加入對manifest.json 檔案的引用。

Reference Manifest Json File

最後,在src 目錄中建立一個service-worker.js 檔案。

`` import { build, files, timestamp } from '$service-worker'; const worker = (self as unknown) as any; const FILES =cache${timestamp}; const to_cache = build.concat(files); const staticAssets = new Set(to_cache); // listen for the install events worker.addEventListener('install', (event) => { event.waitUntil( caches .open(FILES) .then((cache) => cache.addAll(to_cache)) .then(() => { worker.skipWaiting(); }) ); }); // listen for the activate events worker.addEventListener('activate', (event) => { event.waitUntil( caches.keys().then(async (keys) => { // delete old caches for (const key of keys) { if (key !== FILES) await caches.delete(key); } worker.clients.claim(); }) ); }); // attempt to process HTTP requests and rely on the cache if offline async function fetchAndCache(request: Request) { const cache = await caches.open(offline${timestamp}`); try { const response = await fetch(request); cache.put(request, response.clone()); return response; } catch (err) { const response = await cache.match(request); if (response) return response; throw err; } } // listen for the fetch events worker.addEventListener('fetch', (event) => { if (event.request.method !== 'GET' || event.request.headers.has('range')) return; const url = new URL(event.request.url); // only cache files that are local to your application const isHttp = url.protocol.startsWith('http'); const isDevServerRequest = url.hostname === self.location.hostname && url.port !== self.location.port; const isStaticAsset = url.host === self.location.host && staticAssets.has(url.pathname); const skipBecauseUncached = event.request.cache === 'only-if-cached' && !isStaticAsset; if (isHttp && !isDevServerRequest && !skipBecauseUncached) { event.respondWith( (async () => { // always serve static files and bundler-generated assets from cache. // if your application has other URLs with data that will never change, // set this variable to true for them and they will only be fetched once. const cachedAsset = isStaticAsset && (await caches.match(event.request)); return cachedAsset || fetchAndCache(event.request); })() ); } });

```

隨著我們的SvelteKit PWA的完成,我們可以將它連線到網際網路上,並看到它正在執行。

SvelteKit PWA Internet Connection

在沒有網際網路連線的情況下,我們的應用程式將看起來像下面的圖片。

SvelteKit PWA Without Internet

儘管有明顯的HTTP錯誤,但該應用能夠優雅地處理與網際網路斷開連線的問題。

在Sapper中建立一個PWA

正如官方Sapper文件中所說。Sapper的繼任者SvelteKit目前已經可以使用。所有的開發工作都將集中在SvelteKit上。Sapper文件包括一個有用的遷移指南。如果你喜歡用Sapper構建你的應用程式,儘管它缺乏支援,請繼續閱讀。

Sapper允許你像使用Svelte一樣開發你的應用程式,但是它有一個額外的好處,就是支援PWA。在你的終端執行以下程式碼,建立一個Sapper應用程式。

``` npx degit "sveltejs/sapper-template#rollup" sapper-pwa

```

通過執行下面的程式碼安裝所需的依賴性。

``` cd sapper-pwa npm install

```

現在,為了看到你的Sapper應用程式在執行,新增本地執行命令,如下所示。

npm run dev

Svelte Sapper PWA Template

看一下生成的程式碼,你會發現該專案已經包括一個服務工作者和一個清單檔案。

Svelte Sapper Service Worker Manifest File

通過這個過程,你基本上可以像使用Svelte那樣開發一個Sapper應用程式。

總結

在這篇文章中,我們探討了構建PWA的好處,並研究瞭如何使用服務工作者和Web清單構建PWA。然後,我們探討了使用Svelte、SvelteKit和Sapper構建PWA的三種方法。

由於本地應用程式的普及,PWA的使用可能會繼續增長。值得慶幸的是,當你使用像Svelte這樣的現代框架時,構建一個PWA是相當簡單的。我希望你喜歡這個教程!

The postBuilding a PWA with Svelteappeared first onLogRocket Blog.