-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathhow-to-build-a-progressive-web-application.html
More file actions
287 lines (284 loc) · 25.2 KB
/
how-to-build-a-progressive-web-application.html
File metadata and controls
287 lines (284 loc) · 25.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
<!DOCTYPE html>
<html lang="en">
<head>
<title>Aione Framework | Responsive CSS Framework</title>
<!-- Aione framework website, 3D websites, Grid system -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="identifier-url" content="https://aioneframework.com/" />
<meta name="title" content="Aione Framework | Responsive CSS Framework" />
<meta name="description" content="Aione framework is responsive css framework to make responsive websites, web applications and mobile applications using 100 coulmn grid system" />
<meta name="abstract" content="all in one Responsive CSS Framework" />
<meta name="keywords" content="aione framework, Mobile first css framework, Web application framework, mobile application framework, editor, code, live, css, framework, css4, layout, playground, help" />
<meta name="author" content="OXO IT SOLUTIONS PRIVATE LIMITED" />
<meta name="revisit-after" content="10" />
<meta name="language" content="EN" />
<meta name="copyright" content="©2018 OXO IT SOLUTIONS PRIVATE LIMITED" />
<meta name="robots" content="All" />
<meta name="theme-color" content="#1570a6"/>
<meta name="application-name" content="Aione Framework">
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="https://aioneframework.com/assets/images/mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="https://aioneframework.com/assets/images/mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="https://aioneframework.com/assets/images/mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="https://aioneframework.com/assets/images/mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="https://aioneframework.com/assets/images/mstile-310x310.png" />
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="https://aioneframework.com/assets/images/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://aioneframework.com/assets/images/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://aioneframework.com/assets/images/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://aioneframework.com/assets/images/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="https://aioneframework.com/assets/images/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="https://aioneframework.com/assets/images/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="https://aioneframework.com/assets/images/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="https://aioneframework.com/assets/images/apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="https://aioneframework.com/assets/images/favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="https://aioneframework.com/assets/images/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="https://aioneframework.com/assets/images/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="https://aioneframework.com/assets/images/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="https://aioneframework.com/assets/images/favicon-128.png" sizes="128x128" />
<link rel="manifest" href="/manifest.json">
<link rel="stylesheet" type="text/css" href="https://cdn.aioneframework.com/assets/css/aione.min.css" >
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:100,300,400">
<style type="text/css">
/*.abt-after:after {
content: '';
position: absolute;
width: 100px;
height: 2px;
background-color: #dddddd;
top: 41%;
left: 46%;
}*/
.border-radius
{
border-radius: 5px;
}
.hover:hover
{
border-color: #03A9F4;
}
</style>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"name": "Aione Framework",
"url": "https://aioneframework.com/",
"logo": "https://cdn.aioneframework.com/assets/images/aione-framework-logo-small.png",
"contactPoint": [
{
"@type": "ContactPoint",
"telephone": "+91-183-2401000",
"contactType": "customer service"
}
],
"sameAs": [
"https://www.facebook.com/AioneFramework",
"https://twitter.com/AioneFramework"
],
"potentialAction": {
"@type": "SearchAction",
"target": "https://aioneframework.com/?q={search}",
"query-input": "required name=search"
}
}
</script>
</head>
<body>
<div id="aione_wrapper" class="aione-wrapper page-home layout-header-top aione-layout-wide aione-theme-arcane">
<div class="wrapper">
<div id="aione_header" class="aione-header light load-template">
</div>
<!-- #aione-header -->
<div id="aione_main" class="aione-main fullwidth">
<div class="wrapper">
<div id="aione_content" class="aione-content">
<div class="wrapper">
<div id="aione_page_content" class="aione-page-content">
<div class="wrapper">
<section>
<div class="ar" style="position: relative;">
<div class="ac l100 p-0">
<img src="image/workspace-01.jpg">
</div>
<div class="ac l100" style="position: absolute;background-color:black;opacity: 0.7;top: 0;bottom: 0;left: 0;right: 0;">
<h1 class="white aione-align-center mt-13p font-weight-300">Progressive Web Application</h1>
</div>
</div>
<div class="ar">
<div class="ac l10"></div>
<div class="ac l80">
<div class="pv-10">
<a href="https://manage.aioneframework.com/aioneframework.com/How-to-build-a-progressive-web-application.html"></a><h3 class="font-weight-300 blue-grey darken-2">How to build a progressive web application</h3>
</div>
<div>
<p class="font-weight-300 aione-align-justify font-size-17 line-height-27 blue-grey">Progressive Web Apps are considered as one of the best ways for the developers in order to make their web applications much more easily. By using progressive web applications one can very easily load and perform the tasks. They basically use the most accurate web standards so as to allow the installation on the personal computer, thereby delivering the better experience for the user. Recently Twitter has come up with PWAs which has gained lots of taxes among all the visitors. In order to build a progressive web application, you can follow this article as it gives you step-by-step information.</p>
</div>
<div class="pv-10">
<h3 class="font-weight-300 blue-grey darken-2">What is the progressive web application?</h3>
</div>
<div>
<p class="font-weight-300 aione-align-justify font-size-17 line-height-27 blue-grey">The progressive web application is experienced thereby combining the best results of the web and the best applications. In fact, they do not require any installation and are very easy to use.Building a good relationship with progressive web application will help you to become more powerful.</p>
</div>
<div class="">
<img class="pv-10" src="assets/images/progresive-app.jpeg" style="height: 380px;width: 100%;">
</div>
<div>
<p class="font-weight-300 aione-align-justify font-size-17 line-height-27 blue-grey">One of the main advantages is that it has the ability to load very quickly without sending any relevant push notifications. Additionally, there are a few things that you have to learn before understanding PWA.</p>
</div>
<div class="pv-10 pl-20">
<ol class="font-weight-300 font-size-17 line-height-27 blue-grey " style="list-style: disc;">
<li>
Know how to use the app manifest in order to make the web installation on your home screen.
</li>
<li>Make use of workers in order to ensure offline support by simply caching the assets.</li>
<li>Enhance the usability by using push notifications.</li>
<li>Exist with the data synchronization.</li>
<li>Learn how to access native devices with features like camera.</li>
</ol>
</div>
<!--How to build a progressive web app-->
<div>
<h3 class="font-weight-300 blue-grey darken-2">How to build a progressive web app</h3>
</div>
<div class="pv-10">
<p class="font-weight-300 font-size-17 line-height-27 blue-grey ">It is statically easy to build a progressive web app if one can follow the procedure given below.</p>
</div>
<div><img src="assets/images/build-prog-app.jpeg" style="height: 380px;width: 100%;"></div>
<div class="pv-10 pl-20">
<ol class="font-weight-300 font-size-17 line-height-27 blue-grey" style="list-style: disc;">
<li>If in case you are interested to build a progressive web app, then you should first enable the following flagship in your Google Chrome.</li>
<li>In order to do this, you have to simply copy and paste the URL in the Chrome.</li>
<li>After that, a Blue button will be represented as "Relaunch Now". Gently click on that once after the flagships are enabled.</li>
<li>Next, you have to visit https://hnpwa.com, website so that you will find an installation prompt in that URL.</li>
<li>Make sure to click on "Add" auction so as to see a dialogue box that specifies the name of the app.</li>
<li>By doing so the application will be added to the Chrome directly. If you start launching the app then it will be regenerated on the Google Chrome.</li>
<li>If in case you are an Android phone user then an icon will be represented symbolizing the significance of the application.</li>
<li>In order to reload the application you can simply check on Chrome's Developer Tools > Network tab to toggle "Offline.</li>
<li>The data will be loaded and once after the loading is completed a pop up notification will be generated.</li>
</ol>
</div>
<!--Web developer tools-->
<div>
<h3 class="font-weight-300 blue-grey darken-2">Web developer tools</h3>
</div>
<div class="pv-10">
<p class="font-weight-300 font-size-17 line-height-27 blue-grey">The extraordinary web developer tools will help you to easily build the web-based applications. Here are the 7 best tools for web developers.</p>
</div>
<!--Lighthouse-->
<div>
<h4 class="font-weight-300 blue-grey darken-2">1. Lighthouse</h4>
<p class="font-weight-300 font-size-17 line-height-27 blue-grey aione-align-justify"> One of the open source as well as the automated tool that easily helps in creating web applications. If you would like to have improved the quality of the web services then you should definitely opt for Lighthouse tool.</p>
</div>
<div class="pv-10"><img src="assets/images/light-house.png"></div>
<div>
<p class="font-weight-300 font-size-17 line-height-27 blue-grey aione-align-justify">This has become a part of Chrome DevTools Audits panel which can be executed from the command line. Alternatively, you can also install this on your Google Chrome after which it can be added as an extension.</p>
</div>
<!--Chrome dev tools-->
<div>
<h4 class="font-weight-300 blue-grey darken-2">2. Chrome dev tools</h4>
<p></p>
</div>
<div class="pv-10"><img src="assets/images/chrome-dev-tool.png"></div>
<div class="pv-10">
<p class="font-weight-300 font-size-17 line-height-27 blue-grey aione-align-justify">These are a type of web authentication as well as debugging tools that are available for the developers. Chrome Dev tools are mainly designed for Google Chrome users. The tools will enhance the usability thereby giving flexible ways to debug and create unique profiles.</p>
</div>
<!--Puppeteer-->
<div>
<h4 class="font-weight-300 blue-grey darken-2">3. Puppeteer</h4>
<p class="font-weight-300 font-size-17 line-height-27 blue-grey aione-align-justify">Puppeteer is most commonly preferred as a node library. In order to control the headless Chrome in the DevTools Protocol, you should make use of this Puppeteer tool. It is even more comfortable to configure the use of Google Chrome with a high-level application interface.</p>
</div>
<div class="center-align pv-10"><img src="assets/images/Puppeteer.png" style="height: 250px;"></div>
<!--4 Polymer-->
<div>
<h4 class="font-weight-300 blue-grey darken-2">4. Polymer</h4>
<p class="font-weight-300 font-size-17 line-height-27 blue-grey aione-align-justify">Considered as one of the most powerful tools in order to have the unique experience by simply blocking the complete potential of a web platform.It is implemented with interesting features that allow the web components to access each and every specification. Some of the features include the extension of HTML, building cut edge progressive web applications and componentizing of web applications.</p>
</div>
<div class="pv-10 center-align"><img src="assets/images/polymer.png" style="height: 250px;"></div>
<!--5 Workbox-->
<div>
<h4 class="font-weight-300 blue-grey darken-2">5. Workbox</h4>
</div>
<div><p class="font-weight-300 font-size-17 line-height-27 blue-grey aione-align-justify">In order to service worker libraries along with the tools, then Workbox is the best choice. It is even more compatible to build an offline progressive web application. It has many advantages thereby making the developer feel comfortable.</p></div>
<div class="pv-10 center-align"><img src="assets/images/workbox.png" style="height: 100px;"></div>
<!--6 Angular-->
<div><h4 class="font-weight-300 blue-grey darken-2">6. Angular</h4></div>
<div><p class="font-weight-300 font-size-17 line-height-27 blue-grey aione-align-justify">An already developed web platform along with extreme levels of unique tools. With the help of Angular2, you can easily build platforms across the web, personal computer, and mobile devices. The tool helps the developers to perform any sort of customizations very easily.</p></div>
<div class="pv-10 center-align"><img src="assets/images/angular.png" style="height: 150px;"></div>
<!--7 PageSpeed Module-->
<div><h4 class="font-weight-300 blue-grey darken-2">7. PageSpeed Module</h4></div>
<div><p class="font-weight-300 font-size-17 line-height-27 blue-grey aione-align-justify">Another interesting open source web tool that helps in customizing web in a unique pattern. The extraordinary feature is that it automatically optimizes your website. Its interface is also very easy and you will have a check on the speed of the page modular.</p></div>
<div class="center-align pv-10">
<img src="assets/images/PageSpeed-Module.png" style="height: 200px;">
</div>
<!--Reasons to build PWA-->
<div>
<h3 class="font-weight-300 blue-grey darken-2">Reasons to build PWA</h3>
</div>
<div>
<p class="font-weight-300 font-size-17 line-height-27 blue-grey aione-align-justify">There are many reasons why you have to build PWA and one of the most important reason is to make use of time in an affordable way. Therefore the time required to load is quite less and also and hence the experience of using the application. Even more, it has the ability to add better security to the system by adding signifying icons.In order to make your app work in offline, there is a necessity of using cache- first service. Because this is one of the biggest issues that is concerned in web applications. Alternatively, there are many other performances that enhance the use of an application. Dynamically it also accesses in understanding following considerations.</p>
</div>
<div class="pl-20 pv-10">
<ol class="font-weight-300 font-size-17 line-height-27 blue-grey" style="list-style: disc;">
<li>It enables critical resources so as to initiate the routers for the URL.</li>
<li>Helps in rendering the initial routers.</li>
<li>Also organizes the Pre-cache remaining routers.</li>
<li>Give feasibility in utilizing different types of rotors.</li>
</ol>
</div>
<div class="pb-20">
<p class="font-weight-300 font-size-17 line-height-27 blue-grey aione-align-justify">You can very easily use "<link rel="preload">" in order to make the browser to load all the required resources. In fact, this is one of the most strategic ways along with W3C Standard features.</p>
<br>
<p class="font-weight-300 font-size-17 line-height-27 blue-grey aione-align-justify">Apart from that using HTTP/2 as well as server push will help the browser without the need of user information.</p>
<br>
<p class="font-weight-300 font-size-17 line-height-27 blue-grey aione-align-justify">The basic use of code splitting as well as lazy loading he is also featured with the extremities of the applications.</p>
</div>
</div>
<div class="ac l10"></div>
</div>
</section>
</div>
</div>
</div>
<!-- .wrapper -->
</div>
<!-- .aione-content -->
</div>
<!-- .wrapper -->
</div>
<div id="aione_footer" class="aione-footer dark load-template">
</div>
<!-- .aione-footer -->
<div id="aione_copyright" class="aione-copyright dark load-template">
</div>
<!-- .aione-copyright -->
</div>
</div>
<!-- Core-->
<script type="text/javascript" src="https://cdn.aioneframework.com/assets/js/vendor.min.js"></script>
<script type="text/javascript" src="https://cdn.aioneframework.com/assets/js/aione.min.js"></script>
<!-- Google Analytics-->
<script type="text/javascript" src="assets/js/ga.min.js"></script>
<style type="text/css">
.counter {padding: 20px 0; border-radius: 5px;}
.count-title { font-size: 40px; font-weight: normal; margin-top: 10px; margin-bottom: 0; text-align: center; }
.count-text { font-weight: normal; margin-top: 10px; margin-bottom: 0; text-align: center; }
.tabs.tabs-transparent .tab a{color:#333}.page-home .aione-header{background-color:#e6e7f3}.aione-nav.horizontal{border-bottom:none}.aione-nav ul li a{padding:0 12px;font-size:18px}.aione-main{padding-top:0}.aione-page-content{margin:0;min-height:200px}.aione-footer{margin:0;border-top:none}.aione-footer.dark{background-color:#23282d}.aione-copyright{margin:0;border-top:none}.aione-copyright.dark{background-color:#121519}.intro{min-height:450px;height:100vh;background-color:#e6e6f2;background-image:url(https://cdn.aioneframework.com/assets/images/aione-framework-website-background.jpg);background-position:right bottom;background-size:contain;background-repeat:no-repeat}.intro-content{position:absolute;top:34%;left:5%;width:60%;z-index:9999;background-color:transparent}.oxo-color{color:#168dc5}.oxo-color:hover{color:#1570a6}.primary-color{color:#1570a6}.secondary-color{color:#414043}.section-ilivedesign{background-image:url(https://cdn.aioneframework.com/assets/images/oxo_bg.svg);background-repeat:repeat;background-position:0 0;background-color:#fff}.section-ilivedesign .aione-icon.animated{display:inline-block;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;animation-iteration-count:infinite}
}
</style>
<script type="text/javascript">
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/serviceworker.js', { scope: '/' }).then(function(reg) {
if(reg.installing) {
//console.log('Service worker installing');
} else if(reg.waiting) {
//console.log('Service worker installed');
} else if(reg.active) {
//console.log('Service worker active');
}
}).catch(function(error) {
//console.log('Registration failed with ' + error);
});
}
</script>
</body>
</html>