Note
この文章は、あなたがすでに sw を使用してウェブサイトを加速できることを前提としています。
前言#
最近、私は cyf さんの sw 加速ソリューションを使い始め、これまでに異なる 3 人の著者が開発した sw 加速を使用しましたが、cyf のコードが理解しづらかったため（私が未熟なため）、yfun さんのコードを使用して、ウェブページがフロントエンドで更新されるようにしました。
なぜファーストスクリーン最適化が必要か#
cyf さんのソリューションを使用しているときに、cyf のファーストスクリーン最適化ソリューションを発見しました。
実際、ServiceWorker の最も顕著な欠点は、ウェブページを初めて読み込んだ後にインストールされ、再読み込みしないとアクティブにならないことです。つまり、訪問者が初めて訪れるときは sw の制御を受けません。言い換えれば、訪問者のファーストスクリーンは加速されず、その読み込み速度はあなたのサーバーに直接関連しています
[インストールが完了すれば飛躍的に速くなりますが、インストール前は遅いです]。
さらに厄介なのは、ファーストスクリーンの読み込み時に静的リソースが直接取得され、キャッシュされず、sw がアクティブになった後に強制的に 2 回目の取得が行われるため、速度が低下することです。しかし、この欠点をできるだけ軽減することができます。私たちは js を使用してすべてのリクエストを中断し、ファーストスクリーンには 1 つの html と 1 つの sw.js のみを読み込むようにし、他のリソースは読み込まないようにして、ファーストスクリーンの読み込み遅延を減らします。
そのため、私は cyf さんのファーストスクリーン最適化を試みましたし、かっこいい sw インストールページがあるのは誰もが好きです。
私は前後で 2 つのファーストスクリーン最適化スタイルを使用したので、ここで共有します。
方案 1（by cyfan）#
<!-- sw前端竞速 -->
<script>
(async () => {//匿名関数を使用してbodyが読み込まれたことを確認
/*
QYBlogHelper_SetはLocalStorageに保存され、swのインストール状態を示します
0 または存在しない 未インストール
1 中断済み
2 インストール済み
3 アクティブで、必要なファイルがキャッシュされています（ここでは記載していませんので、気にしないでください）
*/
if ('serviceWorker' in navigator) { //swがサポートされている場合
if (Number(window.localStorage.getItem('QYBlogHelper_Set')) < 1) {
setTimeout(async () => {
console.log('あなたのブラウザにQYBlogHelperがインストールされていないことを検出しました。登録を開始します。')
window.stop()
window.localStorage.setItem('QYBlogHelper_Set', 1)
const replacehtml = await fetch('https://npm.elemecdn.com/chenyfan-blog@1.0.13/public/notice.html')
document.body.innerHTML = await replacehtml.text()
$('#info').innerText = 'QYBlogHelperのインストールを試みています...';
}, 0);
}
const $ = document.querySelector.bind(document);//シンタックスシュガー
navigator.serviceWorker.register(`/sw.js?time=${new Date().getTime()}`)//ランダム数、強制更新
.then(async () => {
if (Number(window.localStorage.getItem('QYBlogHelper_Set')) < 2) {
setTimeout(() => {
$('#info').innerText = 'インストール成功、少々お待ちください...';
}, 0);
setTimeout(() => {
window.localStorage.setItem('QYBlogHelper_Set', 2)
console.log('リダイレクトの準備をしています')
window.location.reload()//リフレッシュしてswを読み込む
}, 500)//インストール後500ms待ってアクティブにする
}
})
.catch(err => console.error(`QYBlogHelperError:${err}`))
} else {
setTimeout(() => {
$('#info').innerText = '申し訳ありませんが、あなたのブラウザはもはやサポートされていません。';
}, 0);
}
})()
</script>
方案 2（by yfun）#
<!-- sw前端竞速 -->
<script>
(async () => {//匿名関数を使用してbodyが読み込まれたことを確認
/*
QYBlogHelper_SetはLocalStorageに保存され、swのインストール状態を示します
0 または存在しない 未インストール
1 中断済み
2 インストール済み
3 アクティブで、必要なファイルがキャッシュされています（ここでは記載していませんので、気にしないでください）
*/
if ('serviceWorker' in navigator) { //swがサポートされている場合
if (Number(window.localStorage.getItem('QYBlogHelper_Set')) < 1) {
setTimeout(async () => {
console.log('あなたのブラウザにQYBlogHelperがインストールされていないことを検出しました。登録を開始します。')
window.stop()
window.localStorage.setItem('QYBlogHelper_Set', 1)
const replacehtml = await fetch('https://npm.elemecdn.com/qycdn@0.9.13/html/swinstall.html')
document.body.innerHTML = await replacehtml.text()
}, 0);
}
const $ = document.querySelector.bind(document);//シンタックスシュガー
navigator.serviceWorker.register(`/sw.js?time=${new Date().getTime()}`)//ランダム数、強制更新
.then(async () => {
if (Number(window.localStorage.getItem('QYBlogHelper_Set')) < 2) {
setTimeout(() => {
window.localStorage.setItem('QYBlogHelper_Set', 2)
console.log('リダイレクトの準備をしています')
window.location.reload()//リフレッシュしてswを読み込む
}, 500)//インストール後500ms待ってアクティブにする
}
})
.catch(err => console.error(`QYBlogHelperError:${err}`))
} else {
setTimeout(() => {
console.log('申し訳ありませんが、あなたのブラウザはもはやサポートされていません');
}, 0);
}
})()
</script>
注意事項#
Warning
可能な限り中断コードを<head>に移動して、他のリソースによってブロックされないようにします。Hexo の場合は、テーマの head.ejs を開き、<head>タグの前の方に追加してください。そうしないと、理想的な加速効果が得られない可能性があります。