PWA集成和离线使用

本文主要是介绍PWA集成和离线使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

最近项目需要，需要将h5代码集成到PWA，以此记录下。

mdn上早已有了介绍，用的时候才发现这门技术

在这里插入图片描述

这是google介绍的详细地址传送门

引言

我们知道，在chrome（等一些现代浏览器）中，你可以将访问的网站添加到桌面，这样就会在桌面生成一个类似“快捷方式”的图标，当你点击该图标时，便可以快速访问该网站（Web App）。

对于PWA来说，有一些重要的特性：

Web App可以被添加到桌面并有它自己的应用图标
同时，从桌面开启时，会和原生app一样有它自己的“开屏图”
更进一步的，这个Web App在的样子几乎和原生应用一样——没有浏览器的地址栏、工具条，似乎和Native App一样运行在一个独立的容器中。

1. 新建mainfest.json文件

Manifest是一个JSON格式的文件，你可以把它理解为一个指定了Web App桌面图标、名称、开屏图标、运行模式等一系列资源的一个清单。

manifest 的目的是将Web应用程序安装到设备的主屏幕，为用户提供更快的访问和更丰富的体验。 —— MDN

  {"name": "pwa测试","short_name": "pwa","start_url": "/","display": "standalone","background_color": "#333","description": "这是描述","orientation": "portrait-primary","theme_color": "#5eace0","icons": [{"src": "img/icons/book-32.png","sizes": "32x32","type": "image/png"}, {"src": "img/icons/book-72.png","sizes": "72x72","type": "image/png"}, {"src": "img/icons/book-128.png","sizes": "128x128","type": "image/png"}, {"src": "img/icons/book-144.png","sizes": "144x144","type": "image/png"}, {"src": "img/icons/book-192.png","sizes": "192x192","type": "image/png"}, {"src": "img/icons/book-256.png","sizes": "256x256","type": "image/png"}, {"src": "img/icons/book-512.png","sizes": "512x512","type": "image/png"}]
}

name, short_name 指定了Web App的名称。short_name其实是该应用的一个简称。一般来说，当没有足够空间展示应用的name时，系统就会使用short_name
start_url 指定了用户打开该Web App时加载的URL。相对URL会相对于manifest。这里我们指定了start_url为/，访问根目录。
display display控制了应用的显示模式，它有四个值可以选择：fullscreen、standalone、minimal-ui和browser。
- [ ] fullscreen：全屏显示，会尽可能将所有的显示区域都占满；
- [ ] standalone：独立应用模式，这种模式下打开的应用有自己的启动图标，并且不会有浏览器的地址栏。因此看起来更像一个Native App；
- [ ] minimal-ui：与standalone相比，该模式会多出地址栏；
- [ ] browser：一般来说，会和正常使用浏览器打开样式一致。
orientation 控制Web App的方向。设置某些值会具有类似锁屏的效果（禁止旋转），例如例子中的portrait-primary。具体的值包括：any, natural, landscape, landscape-primary, landscape-secondary, portrait, portrait-primary, portrait-secondary
icons 用来指定应用的桌面图标。icons本身是一个数组，每个元素包含三个属性
- [ ] sizes：图标的大小。通过指定大小，系统会选取最合适的图标展示在相应位置上。
- [ ] src：图标的文件路径。注意相对路径是相对于manifest。
- [ ] type：图标的图片类型。
background_color 是在应用的样式资源为加载完毕前的默认背景，因此会展示在开屏界面。也就是我们常说的启动页
theme_color 定义应用程序的默认主题颜色。这有时会影响操作系统显示应用程序的方式（例如，在Android的任务切换器上，主题颜色包围应用程序）。
description 应用的描述

配置完manifest文件后，在head中添加一个link标签：

  <!-- 在index.html中添加以下meta标签 -->
<link rel="manifest" href="/manifest.json">

2. service-worker.js 离线使用

首先需要缓存静态资源(sw.js)

const cacheName = 'pwa-cache-v1';const filesToCache = ['/index.html'];// 监听install事件，安装完成后，进行文件缓存self.addEventListener('install', function (event) {console.log('Service Worker 安装成功');event.waitUntil(caches.open(cacheName).then(function (cache) {return cache.addAll(filesToCache);}));});self.addEventListener('fetch', function (event) {// console.log('Service Worker 拦截到请求:', event.request);event.respondWith(caches.match(event.request).then(function (response) {// 如果缓存中有请求的资源，则直接返回缓存中的资源// if (response) {//     return response;// }// 否则通过网络获取资源return fetch(event.request);}));});self.addEventListener('activate', function (event) {console.log('Service Worker 激活成功');event.waitUntil(caches.keys().then(function (cacheNames) {return Promise.all(cacheNames.filter(function (cacheName) {// 清理旧版本缓存return cacheName.startsWith('pwa-cache-') && cacheName !== 'pwa-cache-v1';}).map(function (cacheName) {return caches.delete(cacheName);}));}));});

然后注册在index.js中来注册我们的Service Worke


// index.js
// 注册service worker，service worker脚本文件为sw.js
if ("serviceWorker" in navigator && 'PushManager' in window) {window.addEventListener('load', async () => {navigator.serviceWorker.register("/sw.js").then(function(registration) {console.log("ServiceWorker registration successful with scope: ",registration.scope);}).catch(function(err) {console.error("ServiceWorker registration failed: ",err);});})
}

这样后webapp可以离线使用

3. beforeinstallprompt触发安装

通过beforeinstallprompt事件，我们可以在用户点击安装按钮之前，弹出一个对话框，提示用户是否安装。

  window.addEventListener("beforeinstallprompt",function(event) {console.log("支持安装 PWA：", event);// 阻止默认的安装提示event.preventDefault();// 保存事件以在后面触发安装时使用deferredPrompt = event;});

如果未安装则调用deferredPrompt.prompt()弹出安装对话框，然后根据deferredPrompt.userChoice判断用户安装后的结果，如果为accepted则用户同意安装，否则拒绝。

在这里插入图片描述

以下是完整代码

// 监听 beforeinstallprompt 事件
let deferredPromptif ('serviceWorker' in navigator) {window.addEventListener('load', () => {var installButton = document.getElementById("installButton");// 添加按钮点击事件installButton.addEventListener("click", function() {deferredPromptAction();});// 监听 beforeinstallprompt 事件window.addEventListener("beforeinstallprompt",function(event) {console.log("支持安装 PWA：", event);// 阻止默认的安装提示event.preventDefault();// 保存事件以在后面触发安装时使用deferredPrompt = event;});window.addEventListener("appinstalled", function(event) {// 应用程序安装完成后的操作console.log("应用程序已安装完成！");});if (localStorage.getItem("allInstall")) {console.log("已经安装 PWA，在web中");} else {console.log("尚未安装 PWA，在web中");}function deferredPromptAction() {console.log("click:", deferredPrompt);if (deferredPrompt) {console.log("浏览器支持 PWA");// 触发安装提示deferredPrompt.prompt();// 等待用户作出安装决定deferredPrompt.userChoice.then(function(choiceResult) {if (choiceResult.outcome === "accepted") {console.log("用户已接受安装提示");localStorage.setItem("allInstall", true);if (window.matchMedia("(display-mode: standalone)").matches ||window.navigator.standalone === true) {console.log("已经在PWA");location.href = openUrl;} else {console.log("尚未安装 PWA");startCount();}} else {console.log("用户拒绝了安装提示");}// 清除安装提示deferredPrompt = null;});} else {console.log("浏览器不支持 PWA");// startCount();openInChrome();// window.location.href = openUrl;}}function openInChrome() {// `googlechrome://${e.replace(/(https|http):\/\//, "")}`// 当前页面的 URLvar currentUrl = window.location.origin;// 构建要传递给谷歌浏览器的 intent URI// var intentUrl = `intent://${currentUrl.replace(//     /(https|http):\/\//,//     ""// )}#Intent;scheme=https;action=android.intent.action.VIEW;component=com.android.chrome;end`;var intentUrl ="intent://open/#Intent;scheme=" +encodeURIComponent(currentUrl) +";package=com.android.chrome;end";console.log("openInChrome:", intentUrl);// 尝试在谷歌浏览器中打开当前页面window.location.href = intentUrl;}});
}