Giter Site home page Giter Site logo

8ctopotamus / pwa-tutorial Goto Github PK

View Code? Open in Web Editor NEW

This project forked from incredibleweb/pwa-tutorial

0.0 1.0 0.0 516 KB

A demo application that serves as a tutorial for Progressive Web Applications

Home Page: https://incredibleweb.github.io/pwa-tutorial/

License: MIT License

JavaScript 49.63% CSS 41.89% HTML 8.48%

pwa-tutorial's Introduction

PWA Tutorial

A simple progressive web application that demonstrates the use of Service Workers, Cache API and offline functionality; the use of a Manifest for Web and Add to Homescreen.

Progressive Web Apps

Progressive Web Applications take advantage of the latest technologies to combine the best of web and mobile apps; think of it as a website built using web technologies but which acts and feels like an app. Recent advancements in the browser and the availability of service workers, the Cache and the Push APIs, have given web developers the possibility to install web apps to the home screen, receive push notifications and even work offline.

Service Workers

Event-driven scripts (written in JavaScript) that have access to domain-wide events, including network fetches. Through service workers, it's possible to cache all static resources, which could drastically reduce network requests and have considerable performance improvements too.

Manifest

A simple JSON file that must follow the specification available on [W3C](a href="https://w3c.github.io/manifest/" target="_blank"), it is possible to run the web app in full-screen as a standalone application, assign an icon which will be displayed once the application is installed onto the device or assign a theme and background colour to your app. In addition, Chrome on Android also proactively suggests to the user to install the web app using Web App install banners.

Technology

Built using traditional HTML5 and vanilla JavaScript that simulates the retrieval of data from a mock API. Throughout the application we use small bits of KnockoutJS to handle our model-view-viewmodel (MVVM) bindings; a lightweight JavaScript framework that allow us to bind our JavaScript models to our HTML views. You may replace this with any other framework such as React or AngularJS.

API

For the scope of this demo, we will be retrieving a static JSON file instead of a real API. This is only to keep things simple and in the real world you would query an API or use web sockets.

Demo

Demo: https://incredibleweb.github.io/pwa-tutorial/

pwa-tutorial's People

Contributors

kevinfarrugia avatar

Watchers

Josh avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.