如何开发一个渐进式Web应用程序PWA


Posted in Javascript onMay 10, 2021

概述

自苹果推出了iPhone应用商店以来,App成为了我们生活中不可或缺的一部分,而对于实体业务也是如此,现在各行业都在推出自己的App,但有没有人想过这样一种场景,如果自己的潜在客户还没有安装你的App亦或是即便安装但因为客户的手机存储空间紧张而卸载掉了你的App?那有没有使App更轻量,更易安装的技术实现呢?答案是“有的”。

渐进式Web应用程序就是为此而生的,它同时具备了Web应用功能和以前只有在原生应用才有的功能的特点,渐进式Web应用程序通过从主屏幕上的图标启动,也可以根据推送通知启动,加载时间几乎可以忽略不计,而且除了可以在线使用外,也可以打包成可离线使用。

最重要的是,渐进式Web应用程序在手机上创建方式也很简单,因为它们只是对你网站的增强,当有人在第一次访问你的网站时,PWA的功能在经过你授权后就会自动为你创建在手机上。

下面, 我们会一起来看看如何来创建一个属于自己的PWA应用。

要求

要开始学习本教程,您必须安装以下软件:

  • node 8.9 版本及以上 (https: // nodejs.org/en/download/). Yarn(https://yarnpkg.com) Git.

作为本教程初始的工程,你可以clone以下Github库:

git clone https://github.com/petereijgermans11/progressive-web-app

然后,到以下目录中  

cd pwa-article / pwa-app-manifest-init

通过以下命令安装依赖并启动工程

npm i && npm start

通过以下地址打开应用:http:// localhost:8080

如何开发一个渐进式Web应用程序PWA

应用的网址

有许多方法可以访问我的本地主机:为了从远程访问发布在你机器上的8080端口的地址。为此,您可以使用ngrok。请参阅:https://ngrok.com/

使用以下命令安装ngrok:

npm install -g ngrok

在终端中运行以下命令。该命令为您生成一个可供外部访问的URL

ngrok http 8080

然后在Chrome中的移动设备上浏览至生成的网址。

PWA需要的技术组件是什么?

PWA有三个重要的技术组件协调工作,包括:

Manifest清单文件,Service Worker和在https下运行。

如何开发一个渐进式Web应用程序PWA

Manifest清单文件

清单文件是一个JSON配置文件,其中包含了PWA的基础信息,例如应用的icon,Web应用程序名称及背景颜色。如果浏览器检测到网站存在PWA清单文件,Chrome会自动出现“添加到主屏幕”按钮。如果用户点击同意,该图标将被添加到主屏幕,并且将安装PWA。

如何开发一个渐进式Web应用程序PWA

创建一个Manifest.json

PWA的Manifest.json文件如下所示:

JSON格式

{
  "name": "Progressive Selfies",
  "short_name": "PWA Selfies",
  "icons": [
    {
      "src": "/src/images/icons/app-icon-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/src/images/icons/app-icon-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/index.html",
  "scope": ".",
  "display": "standalone",
  "background_color": "#fff",
  "theme_color": "#3f51b5"
}

告诉浏览器你应用的清单

在与index.html文件相同的级别的目录中创建Manifest.json文件。清单文件创建后,将清单文件引用链接添加到index.html中。

<link rel=”manifest” href=”/manifest.json”>

Manifest 属性介绍

Manifest有很多配置属性,接下来我们会对其中的属性做一个简单的介绍

  • name、short_name:指定Web应用的名称,short_name是该应用的简称,当没有足够空间展示应用的name属性时,系统就会使用short_name 。 
  • display:display属性指定Web应用的显示模式,它有四个值可供配置:fullscreen、standalone、minimal-ui和browser,但一般常用的属性就是fullscreen和standalone。 fullscreen:全屏显示 standalone:这种模式下打开的应用不会出现浏览器的地址栏,所以因此看起来更像是一个原生应用 minimal-ui、browser:和使用浏览器访问区别不大。 
  • orientation:控制Web应用的显示的方向及禁止手机转屏。 
  • icons、background_color:icon用于指定应用图标,background_color是应用加载完成前的背景色,通过设置这两个属性,可组合成应用的Splash Screen。 
  • theme_color:定义应用程序的默认主题颜色。 
  • description:设置应用的一段描述内容。

以上是pwa 清单文件属性的一些说明,我们通过将设置完成的清单文件并将其放置在与index.html文件同级的目录中即可完成清单文件的添加。

打开Chrome开发者工具 ? Application - Manifest,查看添加的清单文件是否加载完成,如果没有下图的信息,我们可以通过重新启动服务器npm start来重新加载。

如何开发一个渐进式Web应用程序PWA

什么是Service Worker?

Service Worker(SW) 是一段JavaScript,它作为浏览器和网络服务器间的代理。Service Worker可以在基于浏览器的 web 应用中实现如离线缓存、消息推送、静默更新等 native 应用常见的功能,以给 web 应用提供更好更丰富的使用体验。

另外,这个API还允许利用缓存来支持离线体验,从而使开发人员可以完全控制用户的使用体验

如何开发一个渐进式Web应用程序PWA

Service Worker生命周期

对于Service Worker,基本设置的步骤如下:

  • 首先应注册SW,如果SW已注册,浏览器会根据于安装事件自动开始安装。
  • 安装SW后,它将收到激活事件。此激活事件可用于清理SW早期版本的中使用的资源。

如何开发一个渐进式Web应用程序PWA

实际操作应该首先创建一个和index.html同级,名为sw.js的空文件。然后再index.html文件中,添加一个base标签,如下:

<base href="/" rel="external nofollow" >

最后,在src/js/app.js中添加以下代码注册SW。此代码将在页面 “加载”过程中被激活。

你可以打开Chrome DevTools ? Application - Service Worker 中检查SW是否已经启用。

window.addEventListener('load', () => {
    const base = document.querySelector('base');
    let baseUrl = base && base.href || '';
    if (!baseUrl.endsWith('/')) {
        baseUrl = `${baseUrl}/`;
    } 
   
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register(`${baseUrl}sw.js`)
            .then( registration => {
            // Registration was successful
            console.log('ServiceWorker registration successful with scope: ', registration.scope);
        })
        .catch(err => {
            // registration failed :(
            console.log('ServiceWorker registration failed: ', err);
        });
    }
});

以上这段代码主要的作用是检查SW的API在window对象的navigator属性中是否可用。window对象代表浏览器窗口。如果SW在navigator中可用,则在页面加载时立即注册SW。

虽然注册一个SW很简单,但在有些情况下我们依然会遇到无法注册Service Worker的问题,我们来简单看看无法注册SW的原因都有什么并如何解决:

  • 您的应用程序无法在HTTPS下运行。在开发过程中,你可以通过localhost使用SW。但如果将其部署在网站上时,则需要启用HTTPS。
  • SW的路径不正确。

没有勾选Update on reload。 

如何开发一个渐进式Web应用程序PWA

Service Worker 事件

除了install和activate事件外,其他事件还有message、fetch、sync和push事件。

如何开发一个渐进式Web应用程序PWA

将以下代码添加到你的SW中以监听生命周期事件(安装和激活):

self.addEventListener('install', event => {
    console.log('[Service Worker] Installing Service Worker ...', event);
    event.waitUntil(self.skipWaiting());
});
self.addEventListener('activate', event => {
    console.log('[Service Worker] Activating Service Worker ...', event);
    return self.clients.claim();
});

install回调调用skipWaiting()函数来触发activate事件,并告诉Service Worker立即开始工作,而无需等待用户浏览或重新加载页面。

skipWaiting()函数强制等待中的Service Worker成为活动的Service Worker。self.skipWaiting()函数也可以和self.clients.claim()函数一起使用,以确保对底层Service Worker的更新立即生效。

在这种情况下,self-property 代表窗口对象(即你的浏览器窗口)。

添加到主屏幕按钮

"添加到主屏幕按钮" 允许用户在其设备上安装PWA。为了真正用这个按钮安装PWA,你必须在SW中定义一个fetch事件处理程序。让我们在sw.js中解决这个问题。

self.addEventListener('fetch', event => {
    console.log('[Service Worker] Fetching something ....', event);
    // This fixes a weird bug in Chrome when you open the Developer Tools
    if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin') {
        return;
    }
    event.respondWith(fetch(event.request));
});

Service Worker缓存

Service Worker的强大之处在于其拦截HTTP请求的能力。在这一步中,我们使用这个选项来拦截HTTP请求和响应,直接从缓存为用户提供闪电般快速的响应。

在Service Worker安装期间进行预缓存

当用户第一次访问你的网站时,SW会开始自行安装。在这个安装阶段,你可以将PWA使用的所有页面、脚本和样式文件下载并缓存起来,以下是完成这项工作的sw.js文件代码:

const CACHE_STATIC_NAME = 'static';
const URLS_TO_PRECACHE = [
    '/',
    'index.html',
    'src/js/app.js',
    'src/js/feed.js',
    'src/lib/material.min.js',
    'src/css/app.css',
    'src/css/feed.css',
    'src/images/main-image.jpg',
    'https://fonts.googleapis.com/css?family=Roboto:400,700',
    'https://fonts.googleapis.com/icon?family=Material+Icons',
];
self.addEventListener('install', event => {
    console.log('[Service Worker] Installing Service Worker ...', event);
    event.waitUntil(
        caches.open(CACHE_STATIC_NAME)
            .then(cache => {
                console.log('[Service Worker] Precaching App Shell');
                cache.addAll(URLS_TO_PRECACHE);
            })
            .then(() => {
                console.log('[ServiceWorker] Skip waiting on install');
                return self.skipWaiting();
            })
    );
});

这段代码使用安装事件,并在安装阶段添加了一个URLS_TO_PRECACHE数组。一旦调用开启缓存函数(caches.open),你就可以使用cache.addAll()函数来缓存数组中的文件。通过event.waitUntil()方法使用JavaScript promise来知道安装需要多长时间以及是否成功。

安装事件会调用self.skipWaiting()直接激活SW。如果所有文件都已被成功缓存,SW就会被安装。但如果其中一个文件无法下载,则安装步骤将会失败。在Chrome开发者工具中,你可以检查缓存(在Cache Storage中)是否被URLS_TO_PRECACHE数组中的静态文件填充。

如何开发一个渐进式Web应用程序PWA

但是,如果你查看Network选项卡,文件仍然是通过网络获取的。原因是虽然缓存已经准备就绪了,但我们并没有从缓存中读取引用资源。所以为了完成这部分工作,我们首先要监听应用的fetch事件,然后拦截并从缓存中获取资源,让我们看看下面的代码吧:

self.addEventListener('fetch', event => {
    console.log('[Service Worker] Fetching something ....', event);
    event.respondWith(
        caches.match(event.request)
            .then(response => {
                if (response) {
                    console.log(response);
                    return response;
                }
                return fetch(event.request);
            })
    );
});

我们使用caches.match()函数检查传入的URL是否与当前缓存中可能存在的资源匹配。如果匹配,我们就返回该缓存资源,但如果该资源不存在于缓存中,我们就像正常情况下一样继续获取请求的资源。

在Service Worker安装并激活后,刷新页面并再次检查网络选项卡。现在,Service Worker将拦截HTTP请求,并从缓存中即时加载相应的资源,而不是向服务器发出网络请求。

现在,如果我们在网络选项卡中设置离线模式,我们的应用也依然能正常访问。

后台传输

Background Fetch API是SW的后台功能,它允许用户在后台下载大文件、视频和音乐等资源。在获取/传输过程中,你的用户即便关闭标签,乃至关闭整个浏览器,也不会清除传输任务。当用户再次打开浏览器后,传输过程将恢复。这个API也可以将传输的进度可以显示给用户,用户可以取消或暂停这个过程。

如何开发一个渐进式Web应用程序PWA

默认情况下,后台传输功能是不可用的,你必须通过url(chrome://flags/#enable-experimental-web-platform-features)允许chrome的“Experimental Web Platform features”选项

如何开发一个渐进式Web应用程序PWA

以下是如何实现此类后台传输的示例。

在你的index.html文件中添加ID为“ bgFetchButton”的按钮

<button id="bgFetchButton">Store assets locally</button>

然后,在加载事件处理程序中的app.js中添加用于执行后台传输的代码

window.addEventListener(‘load', () => {
...
       bgFetchButton = document.querySelector(‘#bgFetchButton');
       bgFetchButton.addEventListener(‘click', async event => {
         try {
            const registration = await navigator.serviceWorker.ready;
            registration.backgroundFetch.fetch(‘my-fetch', [new              Request(`${baseUrl}src/images/main-image-lg.jpg`)]);
         } catch (err) {
            console.error(err);
         }
     });
...
});

上面的代码在以下条件下开始执行后台传输:

  • 用户点击ID为bgFetchButton的按钮
  • SW已注册

后台传输必须在异步函数中执行,因为传输过程不能阻塞用户界面。

传输完成后放入缓存

self.addEventListener(‘backgroundfetchsuccess', event => {
  console.log(‘[Service Worker]: Background Fetch Success', event.registration);   event.waitUntil(
   (async function() {
     try {
     // Iterating the records to populate the cache
       const cache = await caches.open(event.registration.id); const records =          await event.registration.matchAll(); const promises = records.map(async          record => {
         const response = await record.responseReady;
         await cache.put(record.request, response);
       });
       await Promise.all(promises);
     } catch (err) {
       console.log(‘[Service Worker]: Caching error');
     }
   })()
  );
});

这段代码由以下步骤组成:

  • 当Background Fetch传输完成,你的SW将收到Background Fetch成功事件。
  • 创建并打开一个与registration.id同名的新缓存。
  • 通过registration.matchAll()获取所有记录并遍历。

最后,通过Promise.all(),执行所有的承诺。

如何开发一个渐进式Web应用程序PWA

总结

在本文中我们讨论了PWA的基础组成部分的其中两部分:Manifest、Service Worker的基础功能介绍,因为HTTPS之前我们已经有过一些讨论了https://www.cnblogs.com/powertoolsteam/p/http2https.html

以上就是如何开发一个渐进式Web应用程序PWA的详细内容,更多关于开发一个渐进式Web应用程序的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 Javascript
最新28个很棒的jQuery 教程
May 28 Javascript
stream.js 一个很小、完全独立的Javascript类库
Oct 28 Javascript
js模仿html5 placeholder适应于不支持的浏览器
Jan 13 Javascript
分享经典的JavaScript开发技巧
Nov 21 Javascript
Javascript中的arguments对象
Jun 20 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 Javascript
javascript监听页面刷新和页面关闭事件方法详解
Jan 09 Javascript
node.js入门学习之url模块
Feb 25 Javascript
JavaScript判断浏览器和hack滚动条的写法
Jul 23 Javascript
vue使用keep-alive实现数据缓存不刷新
Oct 21 Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 Javascript
Html5生成验证码的示例代码
May 10 #Javascript
Vue详细的入门笔记
如何理解Vue前后端数据交互与显示
Vue实现下拉加载更多
May 09 #Vue.js
微信小程序实现拍照和相册选取图片
微信小程序实现录音Record功能
如何用JavaScipt测网速
May 09 #Javascript
You might like
利用中国天气预报接口实现简单天气预报
2014/01/20 PHP
PHP中使用glob函数实现一句话删除某个目录下的所有文件
2014/07/22 PHP
php中magic_quotes_gpc对unserialize的影响分析
2014/12/16 PHP
javascript 图片上传预览-兼容标准
2009/06/01 Javascript
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
js实现人民币大写金额形式转换
2016/04/27 Javascript
jQuery中的ready函数与window.onload谁先执行
2016/06/21 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
详解Jquery Easyui的验证扩展
2017/01/09 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
2017/02/05 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
2017/12/31 Javascript
js隐式转换的知识实例讲解
2018/09/28 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
2019/04/09 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
2019/12/17 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
centos下更新Python版本的步骤
2013/02/12 Python
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
Python的Flask框架中配置多个子域名的方法讲解
2016/06/07 Python
Python安装模块的常见问题及解决方法
2018/02/05 Python
tensorflow构建BP神经网络的方法
2018/03/12 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
Python Django模板之模板过滤器与自定义模板过滤器示例
2019/10/18 Python
python ffmpeg任意提取视频帧的方法
2020/02/21 Python
python zip()函数的使用示例
2020/09/23 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
比利时家具购买网站:Home24
2019/01/03 全球购物
数据库的约束含义
2012/09/09 面试题
应届毕业生求职信范例分享
2013/12/17 职场文书
好听的队名和口号
2014/06/09 职场文书
班级学雷锋活动总结
2014/06/26 职场文书
教师工作证明范本
2015/06/12 职场文书
看古人们是如何赞美老师的?
2019/07/08 职场文书
Mysql中存储引擎的区别及比较
2021/06/04 MySQL