1.關鍵字
Ionic 4
不久前，ionic-team發布了Ionic 4的第一個正式版，最大的一個變化：Ionic for Everyone；對Vue、React、Angular等主流框架提供了支持。
在此之前，ionic一直是基于Angular進行迭代，從最初的AngularJS到Angular2，從未改變。但是在2013年到2018年間，前端發生了巨大的變化。直到Web Components的API成熟完善，Ionic團隊終于發現了解決問題的關鍵。從2017年開始，Ionic團隊試著基于Web Components進行開發，經歷了漫長的實驗、開發，終于Ionic 4誕生了，Ionic 4是兩年多的研究和努力的結晶，將Ionic從“mobile for Angular”轉變為強大的UI設計系統和應用程序框架，適用于世界上每個Web開發人員。
原文請戳這里
Capacitor
Capacitor是一個跨平臺的應用程序編輯器，可以將你的web項目編譯成原生的IOS、Android或Electron項目。
例如，如果應用中依賴于用戶拍照的相機應用，用Capacitor可以檢查相機是否可用，如果不可用，請讓用戶上傳文件，代碼如下
import { Capacitor } from '@capacitor/core';
const isAvailable = Capacitor.isPluginAvailable('Camera');
if (!isAvailable) {
? // Have the user upload a file instead
} else {
? // Otherwise, make the call:? Camera.getPhoto()
}
了解更多Capacitor請看這里
PWA
PWA是Progressive Web App的英文縮寫， 中文是漸進式增強WEB應用。目的就是在移動端利用提供的標準化框架，在網頁應用中實現和原生應用相近的用戶體驗的漸進式網頁應用。具體可以看2019前端必會黑科技之PWA這篇文章
2.代碼
初始化Ionic項目
利用ionic cli工具可以快速的構建一個項目
第一步：
npm 全局安裝 Ionic
npm i -g ionic
使用如下命令確認是否安裝成功
ionic -V
如果展示下圖表示安裝成功
第二步：
用Ionic 4新建一個項目，非常簡單
ionic start appNme blank
appName 是你的項目名稱，ionic提供了三種常用“blank”、“tabs”、“sidemenu”選項，以便于快速創建合適的項目。效果如圖
按照安裝提示一步一步往下
第三步：
cd appName
運行
ionic serve
看到這個界面就成功了，一個空白的ionic項目就建好了，接下來就是把它變成一個PWA
構建PWA應用
構建一個PWA應用非常簡單
1.增加并引用App Manifest文件
為了路徑好找，我在assets文件夾下面新增了一個conf文件夾來放manifest.json和service worker的配置文件sw.js
manifest.json文件的內容如何配置、字段解釋和使用方法，請看這里
在index.html的head中引用
<link rel="manifest" href="assets/conf/manifest.json" />
2.配置一個service worker
service worker是一個可以攔截請求，并且創建緩存空間來緩存請求數據的一個工具，當然他還有其他的功能，如消息推送之類的，功能十分強大，具體使用方法可以看這里。
Capacitor建議我們使用Workbox工具來配置service worker，注冊service worker的代碼很簡單。
新建sw.js文件，也是在assets/conf下創建的
注冊service worker，在index.html的body中加入以下代碼
<script>
? ? ? // Check that service workers are registered
? if ('serviceWorker' in navigator) {
? ? console.log('before loading')
? ? // Use the window load event to keep the page load performant
? ? window.addEventListener('load', () => {
? ? ? console.log('loading')
? ? ? navigator.serviceWorker.register('./assets/conf/sw.js');
? ? });
? }
? </script>
這個時候，運行刷新，打開控制臺Application，如果看到你的sw.js，說明的service worker已經成功運行起來了，這個時候你就可以使用Workbox提供的方法去攔截你的某些請求，并緩存數據了，Workbox具體使用及Api請查看Workbox的文檔
總結
本文只是簡單介紹了，怎么用Ionic 4搭建一個PWA的項目，其他具體的如：manifest.json里面的緩存配置；service worker的路由攔截、緩存、消息發布；Capacitor的api使用等問題，都還沒有深入的涉及，還在一步一步爬坑的過程中，希望和大家共勉，有錯漏的地方，還請多多指正。如果你對pwa技術感興趣的話，請加入qq群620966990, 大家一起盤PWA。
