ゴーストをテーマに追加
27324 ワード
PWAとは
プログレッシブWebアプリは、既存のプログレッシブ強化戦略と一緒に新興のWebブラウザのAPIと機能を使用してWebアプリケーションです.ウィキペディア
いつものように、定義は機能を説明するのにどんな目的でも機能しません.あなたはそれを理解するために学ぶ必要があります.
簡単な用語では、PWAはあなたのウェブサイトをアプリのように振る舞うためのテクニックのセットです.これを達成するには、ブラウザと基本的なオペレーティングシステムによって提供される機能の組み合わせを使用する必要があります.
詳細な紹介はmozilla .
始める
ゴーストCMSは、特にブログに向けてtargettedです.詳細はこちらhere
私は、ホイールを再発明したくなかったので、私はちょうど私がこのサイトの上でPWA支持を加えると言及した以下のポストからコードをコピーしました.より多くの情報のためにそれをチェックしてください.
BironThemes
まず、ゴーストのインストールにサービスワーカーとオフラインサポートを追加します.
WordPressゴーストとは異なり、かなり高速なnodejsベースのテンプレートエンジンとSEOを統合しています.しかし、それは箱からPWAサポートを提供しません.多分将来それは来るかもしれません.しかし、今のところ手動でそれをしなければなりません.
あなたが幽霊のブログをPWAに変換するために必要な4つのことがあります
https:// まだしなければmanifest あなたのアプリケーションのさまざまな属性を記述するファイルマニフェストファイルの追加
あなたのテーマのルートに新しいファイルを作成します.任意の名前を与えることができます.オプションのほとんどは自明です.重要なものは名前とアイコンです.あなたのアプリケーションが開いている間の色の背景スプラッシュ画面として使用されます.
ディスプレイプロパティは、アプリケーションのレンダリング方法を処理します.つのオプションがあります.
fullscreen , standalone , minimal-ui and browser .{
"name":"Cybercafe.dev",
"short_name":"Cybercafe",
"description":"A blog by z00md",
"lang":"en",
"start_url":"/",
"background_color":"#ffffff",
"display":"fullscreen",
"theme_color":"#313b3f",
"icons":[
{
"src": "/assets/icons/z00md_logo.png",
"type": "image/png",
"sizes": "200x200"
}
]
}
サービスワーカー
マニフェストは、あなたのアプリケーションの基本的な設定を提供します.動作の完全な制御を得るためには、ネットワークがない場合に何をすべきかを決定するためのタスクが手動でサービスワーカーを手動で追加する必要があります.
サイトを作る
installable アプリとしては、サービスワーカーを持っている必要がありますfetch ハンドラ.詳細についてはweb.dev
const PRECACHE = 'precache';
const RUNTIME = 'runtime';
// A list of local resources we always want to be cached.
const PRECACHE_URLS = [
'/',
'/offline/'
];
const OFFLINE_URL = [
'/offline/'
]
// The install handler takes care of pre caching the resources we always need.
self.addEventListener('install', event => {
event.waitUntil(
caches.open(PRECACHE)
.then(cache => cache.addAll(PRECACHE_URLS))
.then(self.skipWaiting())
);
});
// The activate handler takes care of cleaning up old caches.
self.addEventListener('activate', event => {
const currentCaches = [PRECACHE, RUNTIME];
event.waitUntil(
caches.keys().then(cacheNames => {
return cacheNames.filter(cacheName => !currentCaches.includes(cacheName));
}).then(cachesToDelete => {
return Promise.all(cachesToDelete.map(cacheToDelete => {
return caches.delete(cacheToDelete);
}));
}).then(() => self.clients.claim())
);
});
// The fetch handler serves responses for same-origin resources from a cache.
// If no response is found, it populates the runtime cache with the response
// from the network before returning it to the page.
self.addEventListener('fetch', event => {
// Skip cross-origin requests, like those for Google Analytics.
if (event.request.url.startsWith(self.location.origin)) {
event.respondWith(
caches.match(event.request).then(cachedResponse => {
if (cachedResponse) {
return cachedResponse;
}
return caches.open(RUNTIME).then(cache => {
return fetch(event.request).then(response => {
// Put a copy of the response in the runtime cache.
return cache.put(event.request, response.clone()).then(() => {
return response;
});
}).catch(error => {
// Check if the user is offline first and is trying to navigate to a web page
return caches.match(OFFLINE_URL);
});;
});
})
);
}
});
デフォルトを更新。HBS
今、我々は
sw.js and manifest.webmanifest 便利な、我々はこれを探すためにブラウザを指示する必要があります.他のリソースと同じようにcss 我々は、Aを作成する必要がありますlink マニフェストファイルへのHREFタグ.私が示したことに注意してください<head> セクションのみ.あなたdefault.hbs 他のコードもたくさんあります.<head>
{{!-- Document Settings --}}
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
{{!-- Base Meta --}}
<title>{{meta_title}}</title>
<meta name="HandheldFriendly" content="True" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{{!-- Styles'n'Scripts --}}
<link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
{{!-- This tag outputs SEO meta+structured data and other important settings --}}
{{ghost_head}}
{{!-- PWA --}}
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#313b3f">
<link rel="apple-touch-icon" href="/assets/icons/z00md_logo.png">
</head>
navigator API.ちょうどあなたの体タグの終わりをgotoし、下のスクリプトを追加します.
navigator は、デバイス、地理位置情報、キャッシュ、ストレージなどに関する情報をたくさん提供するブラウザAPIですserviceWorker 登録するオブジェクトsw.js ファイル. {{!-- Service Worker for PWA --}}
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js');
});
}
</script>
オフラインページ
あなたのアプリケーションがあなたのサイトに接続することができないたびに表示されるページを作成する必要があります.このためにゴースト管理の下に新しいページを作成することができます.あなたが好きなようにページを編集することができますが、ちょうどあなたがサービスワーカーで与えたものと同じページのURLを保ちます.
const OFFLINE_URL = [
'/offline/'
]
それを実行！
今ではすべてが設定です.その時間を構築し、あなたのアプリケーションを実行します.ビルドテーマとそれによって使用されるビルドツールによって、設定する必要があるかもしれません
package.json . 私のために、それはデフォルトで働きました.ローカルのゴーストdev環境が動作し、ローカルのdevのテーマを使用するように設定している場合は、コマンドの下で実行し、ブラウザのキャッシュを更新できます.
yarn dev
yarn zip
Add to home screen . あなたのデバイス上のネイティブアプリとしてあなたのサイトをインストールすることができます.そして、あなたが様々なページを開くと、彼らはキャッシュを取得を開始します.スイッチデータ/無線LANを試してみて、アプリをロードしてください.まだ訪問したページに移動することができます.そして、残りのURLのために、あなたはゴースト管理者から作成されたオフラインページを見るべきです.
注意事項-私の観察：間違っている可能性があります
localhostはHTTPです
サービスの労働者は
https:// サイト.例外は1回だけです.localhost . すべてがローカルに動作するかどうかをテストしようとしている場合は、使用する必要がありますhttp://localhost:<port> URL.その他localhost サービスの労働者が動作しないとマニフェストファイルがダウンロードされません.そしてもちろん、あなたもエラーを得ることはありません.マニフェストを含むタグは完全に無視されます.キャッシュ
サービスワーカーが登録されると、リソースのキャッシュを開始し、サービスワーカーキャッシュから常にサービスを提供します.これはブラウザベースのHTTPキャッシュとは異なります.したがって、devツールでキャッシュを無効にしても、ファイルはサービスワーカーからサービスを継続します.を使用する必要があります
Bypass for Network DEVツールの下のオプションApplication タブ.また、Offline オプションはネットワークをシミュレートし、あなたのアプリケーションをテストします.リフレッシュサービスワーカー
マニフェストであなたのアプリケーションに与えた名前や背景色が好きではなかった.あなたはそれを変更し、あなたのテーマを構築し、すべてのキャッシュを無効にしたが、まだあなたの変更は動作しないようですか?私はサービスワーカーのための期限切れの戦略について確信していません、しかし、私の観察に従って、それはキャッシュを無効にすることでリフレッシュしません.あなたが必要
unregister 変更を反映するサービスワーカー.すべてをリフレッシュするモバイルで何をするか
私たちは、その特定のタブのキャッシュを無効にすることができますdevのツールを持っていないので、モバイルデバイス上でテストするのは本当に難しい.また、一度Webアプリケーションをインストールして、もはやそのブラウザのキャッシュをクリアする必要があります.私はAndroid上でgotoアプリマネージャにして、リフレッシュするために設定メニューからデータ/キャッシュを削除する必要がありました.もちろん、ブラウザのキャッシュをクリアする必要があります.さもなければ、ブラウザはキャッシュされたバージョンを使用します.
モバイルでのトラブルシューティングを助けてくれたいくつかの手順
更なる読書
https://deanhume.com/displaying-a-new-version-available-progressive-web-app/
https://forum.ghost.org/t/progressive-web-app-version-of-ghost-blog-install-service-worker/2013/12
エンドノート
プログレッシブWebアプリは1つだけのプロパティではありません.代わりに、シームレスなユーザーエクスペリエンスを作成するために一緒に組み合わせるテクニックのセットです.そのまだ発展して、近い将来確かに変わります.言うまでもなく、すべてのプラットフォームがすべての機能をサポートしているわけではありません.ちょっと気をつけて.
年12月13日更新
のために
cache first サービスワーカーで使用された戦略、私は多くの問題を抱えていた新しい記事は出ない
これは、ホームページがキャッシュから常に提供されていたためです.これを克服するために、私はサービスワーカーを使用するように更新しました
Network first ネットワークコールが失敗したときのみファイルをキャッシュしたファイルを意味する戦略.そして、両方が失敗するならば、オフラインのページを提示してください.この戦略は、1つの欠点があります-あなたが燃えるような高速キャッシュ機能を失う完了するには、ネットワークコールを待つ必要があります.キャッシュの最初の戦略はより効果的でしょう.後でそれを試してください.
ゴーストエラーが500エラーになる
すべてのget呼び出しが矛盾したデータでキャッシュから出されていたので、これは起こっているかもしれません.
私は、すべてのAdmin呼び出しを無視するために、サービスワーカーでチェックを加えました
// The fetch handler serves responses for same-origin resources from a cache.
// If no response is found, it populates the runtime cache with the response
// from the network before returning it to the page.
self.addEventListener("fetch", (event) => {
// Skip cross-origin requests, like those for Google Analytics.
// Skip all ghost admin requests to prevent 500 errors
if (
event.request.url.startsWith(self.location.origin) &&
!event.request.url.startsWith(`${self.location.origin}$/ghost}`)
) {
event.respondWith(
caches.match(event.request).then((cachedResponse) => {
return caches.open(RUNTIME).then((cache) => {
return fetch(event.request)
.then((response) => {
// Put a copy of the response in the runtime cache.
return cache
.put(event.request, response.clone())
.then(() => {
return response;
});
})
.catch((error) => {
// Return cached reponse if network fails
if (cachedResponse) {
return cachedResponse;
} else {
// Return offline page if network and cache both fail
return caches.match(OFFLINE_URL);
}
});
});
})
);
}
});
End
ブログ一覧にもどるcybercafe.dev
Reference
この問題について(ゴーストをテーマに追加), 我々は、より多くの情報をここで見つけました https://dev.to/amt8u/add-pwa-support-to-ghost-theme-400fテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol