[TOC] > [參考網站](https://www.jianshu.com/p/74ee8695140c) ## 概述 PWA是漸進式 Web 應用 可以通過安裝應用使得它在離線的狀態下也可以運行 ## Service Worker demo ``` if ('serviceWorker' in navigator) { window.addEventListener('load', function () { navigator.serviceWorker.register('/a.js', {scope: '/'}) .then(function (registration) { // 注冊成功 console.log('ServiceWorker registration successful with scope: ', registration.scope); }) .catch(function (err) { // 注冊失敗:( console.log('ServiceWorker registration failed: ', err); }); }); } ``` 查看 `chrome://inspect/#service-workers` 注冊失敗的原因 * 不是 HTTPS 環境，不是 localhost 或 127.0.0.1。 * Service Worker 文件的地址沒有寫對，需要相對于 origin。 * Service Worker 文件在不同的 origin 下而不是你的 App 的，這是不被允許的。 ## 添加到主屏幕 manifest.json ``` { "short_name": "短名稱", //用于主屏幕顯示 "name": "這是一個完整名稱", //用于安裝橫幅顯示 "icon": [ { "src": "icon.png", "type": "image/png", "sizes": "48x48" } ], "start_url": "index.html" } ``` `<link rel="manifest" href="path-to-manifest/manifest.json"> ` ## 應用添加橫幅 > [參考項目](https://github.com/lavas-project/lavas-project.github.io/tree/master/pwa-demo/manifest-demo/add-to-home-screen/delay) 滿足條件時,會自動顯示,也可配置