沂水縣的旅游景區(qū)的網(wǎng)站建設(shè)seo的基本步驟是什么
1.什么是PWA？
漸進式網(wǎng)絡(luò)應(yīng)用（PWA）是谷歌在2015年底提出的概念?；旧纤闶莣eb應(yīng)用程序，但在外觀和感覺上與原生app類似。支持PWA的網(wǎng)站可以提供脫機工作、推送通知和設(shè)備硬件訪問等功能。
2.PWA有那些優(yōu)點？?
- 更小更快: 漸進式的web應(yīng)用程序比原生應(yīng)用程序小得多。他們甚至不需要安裝。這是他們沒有浪費磁盤空間和加載速度非常快。
- 響應(yīng)式界面:
PWA支持的網(wǎng)頁能夠自動適應(yīng)各種屏幕大小。它可以是手機、平板、臺式機或筆記本。 - 無需更新: 大多數(shù)移動應(yīng)用程序需要每周定期更新。與普通網(wǎng)站一樣，每當用戶交互發(fā)生且不需要應(yīng)用程序或游戲商店批準時，PWA總是加載最新更新版本。
- 高性價比：原生移動應(yīng)用需要分別為
Android和iOS設(shè)備開發(fā)，開發(fā)成本非常高。另一方面，PWAs有著相同的功能，但只是先前價格的一小部分，開發(fā)成本低。 - SEO優(yōu)勢：搜索引擎可以發(fā)現(xiàn)
PWAs，并且加載速度非?？臁＞拖衿渌W(wǎng)站一樣，它們的鏈接也可以共享。提供良好的用戶體驗和結(jié)果，在SEO排名提高。 - 脫機功能：由于
service worker API的支持，可以在脫機或低internet連接中訪問PWAs。 - 安全性：
PWAs通過HTTPS連接傳遞，并在每次交互中保護用戶數(shù)據(jù)。 - 推送通知：通過推送通知的支持，
PWAs輕松地與用戶進行交互，提供非常棒的用戶體驗。 - 繞過應(yīng)用商店：
原生app如果需要任何新的更新,需要應(yīng)用商店幾天的審批，且有被拒絕或禁止的可能性,對于這方面來說，PWAs有它獨特的優(yōu)勢，不需要App Store支持。更新版本可以直接從web服務(wù)器加載，無需App Store批準。 - 零安裝：在瀏覽過程中，
PWA會在手機和平板電腦上有自己的圖標，就像移動應(yīng)用程序一樣，但不需要經(jīng)過冗長的安裝過程。
3.pwa緩存的原理
為什么能實現(xiàn)緩存或者叫離線存儲？核心就是利用瀏覽器service-worker另啟一個線程，這個線程負責去監(jiān)聽所有https請求（注意是https）,當發(fā)現(xiàn)某些資源是需要緩存下來的他會把資源拉取到瀏覽器本地，訪問的時候攔截請求，不走網(wǎng)絡(luò)請求，直接讀取本地資源。這樣資源相當于都是用戶本地的資源,響應(yīng)速度肯定飛快，還有就是資源都在用戶瀏覽器里面，就算斷了網(wǎng),資源也都是能正常訪問。
pwa緩存的提速效果是非常明顯，能保證你的頁面在弱網(wǎng)環(huán)境下秒開，資源大部分都是在50毫秒左右的的響應(yīng)時間。我們在safari瀏覽器測試的響應(yīng)時間更加快速，基本都是在15ms左右!!!
4.PWA關(guān)鍵技術(shù)
- Service Worker?（可以理解為服務(wù)工廠）
- Manifest?（應(yīng)用清單）
- Push Notification（推送通知）
?
5.PWA代碼初探
看來上面的介紹，是不是躍躍欲試呢？接下來將用代碼來簡單使用一下service worker，緩存頁面中的css、js文件，具體例子：
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="stylesheet" type="text/css" href="/cache1.css"><title>pwa</title></head><body><div id="app">test1</div><!-- built files will be auto injected --><script src='/cache1.js'></script><script>if ('serviceWorker' in navigator) {window.addEventListener('load', function () {navigator.serviceWorker.register('/sw.js').then((registration) => {console.log('Service Worker Registration')}, (err) => {console.log(err)})})}self.addEventListener('fetch', () => {console.log('ss')})</script></body>
</html>sw.js：
var cacheName = 'my-cache'
var cacheList = ['/cache1.css', '/cache1.js']
self.addEventListener('install', function(event) {event.waitUntil(// 安裝成功后向caches中存入需要緩存的文件 caches.open(cacheName).then(function (cache) {return cache.addAll(cacheList)}))
});
// 監(jiān)聽service worker fetch
self.addEventListener('fetch', function (event) {event.respondWith(caches.match(event.request).then(function(response) {// 在緩存中查找到匹配的請求，就從緩存返回if (response) {console.log(response)return response;}// 緩存中沒有查找到對應(yīng)請求，繼續(xù)網(wǎng)絡(luò)請求return fetch(event.request);}));
})如上例所示，利用service worker緩存了頁面請求中cache1.js、cache1.css，然后再刷新一下網(wǎng)頁，網(wǎng)頁請求就會變成下圖這樣：
?
6.可以使用webpack打包技術(shù)將service worker引入項目當中
A. 創(chuàng)建文件
?
B. 下載安裝包
npm install --save-dev workbox-webpack-pluginC. 修改配置文件
在webpack.config.js文件當中配置：
plugins: [new WorkboxWebpackPlugin.GenerateSW({/*1. 幫助serviceworker快速啟動2. 刪除舊的 serviceworker生成一個 serviceworker 配置文件~*/clientsClaim: true,skipWaiting: true})]在index.html當中要配置：
<script>
if ('serviceWorker' in navigator) {window.addEventListener('load', () => {navigator.serviceWorker.register('/service-worker.js').then(() => {console.log('sw注冊成功了~');}).catch(() => {console.log('sw注冊失敗了~');});});
}
</script>?要注意一下package.json文件的配置也要進行更改
? 1. eslint不認識 window、navigator全局變量
? ? 解決：需要修改package.json中eslintConfig配置
? ? ? "env": {
? ? ? ? "browser": true // 支持瀏覽器端全局變量
? ? ? }
? ?2. sw代碼必須運行在服務(wù)器上
? ? ? --> nodejs
? ? ? -->npm i serve -g
? ? ? ? serve -s build 啟動服務(wù)器，將build目錄下所有資源作為靜態(tài)資源暴露出去