Turn your Vue Web App into a PWA，教大家把網頁轉成PWA

https://www.youtube.com/watch?v=15Yr-J4X34M

https://whatwebcando.today/

https://app-manifest.firebaseapp.com/  製作manifest

registerserviceworker.js  為用戶在本地建立serviceworker以儲存資源，提升訪問速度

1. vue add @vue/pwa   (會裝上@vue/cli-plugin-pwa)

2. register-service-worker

amplitudejs:  Design your web audio player, the way you want.    https://521dimensions.com/open-source/amplitudejs

https://github.com/521dimensions/amplitudejs

The Web App Manifest is a JSON document that provides application metadata for Progressive Web Apps. Use the form below to generate the JSON file and optionally upload an app icon.

https://www.webnoob.dev/articles/turn-your-vue-web-app-into-a-pwa  教學

https://developers.google.com/web/tools/workbox   其實service worker背後的機制是來自Workbox

https://developer.mozilla.org/zh-TW/docs/Web/Manifest   Manifest-MDN

https://cli.vuejs.org/core-plugins/pwa.html#configuration   @vue/cli-plugin-pwa

build 出來的precache-manifest.e3b607af8fbd9cd138ce9d19eb88214a.js，就是他precache住的資源，所以之後要載入時可以非常快速

開發者工具中的lighthouse 可以產生關於PWA, SEO, Acessibility,...在你的網站中的評價報告，可以算是順便檢測網站問題

apple目前還不支援PWA

優勢減少手機開發成本

service worker提升網頁加載速度

service worker只在https才可用

service worker可以在offline時運作

service worker實際上不是存在於chrome tab

有三種cache策略：
1. cache first: like Google Fonts
2. network first: like Twitter API ( need to always get the latest post )
3. stale-while-revalidate: like css, js (會先驗證是不是新的檔案再決定要不要下載)

教學中還未提及的有background fetch, background sync, ...

快速建置行動和Web 應用程式| AWS Amplify | Amazon Web ...

a

ws.amazon.com › amplify

AWS Amplify 可協助前端Web 和行動開發人員建置安全、可擴充的完整堆疊應用程式。支援iOS、Android、JavaScript、Flutter 及React 等。
(還不知道AWS Amplify 是什麼，之後可以看看)  (在教學影片的45:44提到)