资讯专栏INFORMATION COLUMN

30分钟从零开始教会你什么是PWA

30e8336b8229 / 941人阅读

摘要:前置知识储备是网络上谈论最多的技术变革之一,在界从业者中获得了前所未有的势头。如果你是为构建的,我相信是添加到你的工作词汇中的最新流行语。在这篇文章中,我想要以一个简单的案例来教会各位如何起步。

前置知识储备

PWA ( Progressive Web Apps )是网络上谈论最多的技术变革之一,在IT界从业者中获得了前所未有的势头。如果你是为web构建的,我相信PWA是添加到你的工作词汇中的最新“流行语”。这并不奇怪,因为PWA已经实现了在手机上安装web应用程序的遥不可及的梦想。

关于PWA的建设和它的优势,已经有了很多的焦点和“极客之谈”。大多数介绍PWA的尝试,特别是对新手来说,似乎都是行话,或者代码太多,可能会使他们不敢迈出第一步。在这篇文章中,我想要以一个简单的案例来教会各位如何起步。

关于PWA的概念以及前世今生我这边不会过多赘述,网络上有很多更加专业的文章供你学习,这篇文章只负责教会你如何使用它。

比起用一篇文章打消你的所有关于PWA的困惑来说我更希望你能简单了解概念之后将我的案例敲打一遍后再回过头去深入了解PWA。

什么是PWA
下一代 Web 应用模型 —— Progressive Web App
PWA官网

起步
// 创建一个简单的项目

mkdir pwa-project
cd pwa-project
touch index.html
touch app.js
touch style.css

相信各位都是使用chrome最新版的高端技术人才,这里为了省略webpack一些繁琐的配置我们直接编写es6代码运行在chrome即可

编写代码
假设我们有一个新闻站点,需要展示标题,图片,文章,并且根据不同的来源切换内容
根据这个要求我们可以编写以下代码
// index.html




    
    
    
    News
    


    

News

// style.css

html {
    line-height: 1.15;
    /* 1 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
}

body {
    margin: 0;
}

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

a {
    background-color: transparent;
    text-decoration: none;
}

button,
select {
    text-transform: none;
}

这里为了模拟真实用户数据我们可以去

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/110150.html

相关文章

  • 从零构建前后分离的web项目》实战 -5分钟快速构建炒鸡规范的VUE项目骨架

    摘要:可以使用或来安装我用来重新尝试一次对速度表示不理想的可以尝试淘宝的不要过度依赖中可以写成放哪都行,可以写成可以写成看到这个画面,安装完成了。 初步搭建脚手架 Tips 任何不错的开源项目都有 project-cli 脚手架、我们用它生成往往能快速配制出最佳的、理想的脚手架 我通常使用 cli 生成项目骨架再在之基础上进行个人修改。 什么是 CLI 命令行界面(英语:command-li...

    qieangel2013 评论0 收藏0
  • 从零构建前后分离的web项目》实战 -5分钟快速构建炒鸡规范的VUE项目骨架

    摘要:可以使用或来安装我用来重新尝试一次对速度表示不理想的可以尝试淘宝的不要过度依赖中可以写成放哪都行,可以写成可以写成看到这个画面,安装完成了。 初步搭建脚手架 Tips 任何不错的开源项目都有 project-cli 脚手架、我们用它生成往往能快速配制出最佳的、理想的脚手架 我通常使用 cli 生成项目骨架再在之基础上进行个人修改。 什么是 CLI 命令行界面(英语:command-li...

    kel 评论0 收藏0
  • 前端基础

    摘要:谈起闭包,它可是两个核心技术之一异步基于打造前端持续集成开发环境本文将以一个标准的项目为例,完全抛弃传统的前端项目开发部署方式,基于容器技术打造一个精简的前端持续集成的开发环境。 这一次,彻底弄懂 JavaScript 执行机制 本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我。 不论你是javascript新手还是老鸟,不论是面试求职,还是日...

    graf 评论0 收藏0
  • 用vue从零开发和部署一款移动端pwa单页应用

    摘要:另外,单页应用因为数据前置到了前端,不利于搜索引擎的抓取。所以我们需要对自己的单页应用进行一些优化。 前言 最近秋招之余空出时间来按自己的兴趣动手做了一个项目,一个基于vue-cli3.0, vue,typescript的移动端pwa,现在趁热打铁,将这个项目从开发到部署整个过程记录下来,并将从这个项目中学习到的东西分享出来,如果大家有什么意见或补充也可以在评论区提出。先介绍一下这个项...

    Channe 评论0 收藏0
  • net - 收藏集 - 掘金

    摘要:再者,现在互联网的面试中上点的都会涉及一下或者的问题个高级多线程面试题及回答后端掘金在任何面试当中多线程和并发方面的问题都是必不可少的一部分。假如源码分析之掘金概念是中集合的一种实现。 攻破 JAVA NIO 技术壁垒 - 后端 - 掘金现在使用NIO的场景越来越多,很多网上的技术框架或多或少的使用NIO技术,譬如Tomcat,Jetty。学习和掌握NIO技术已经不是一个JAVA攻城狮...

    岳光 评论0 收藏0

发表评论

0条评论

30e8336b8229

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<