Skip to content

Commit

Permalink
Install app using manifest file
Browse files Browse the repository at this point in the history
  • Loading branch information
root authored and root committed Jan 5, 2018
1 parent 05f5b76 commit e72133c
Show file tree
Hide file tree
Showing 43 changed files with 11,009 additions and 10,853 deletions.
40 changes: 20 additions & 20 deletions .htaccess
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
# Apache configuration file (see httpd.apache.org/docs/2.2/mod/quickreference.html)

<ifModule mod_headers.c>
RequestHeader unset Cookie
Header unset Set-Cookie
</ifModule>

## Can be commented out if causes errors, see notes above.
Options +FollowSymLinks -Indexes

RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !^/index.php
#RewriteCond %{REQUEST_URI} (/|\.ttf|\.otf|\.svg|\.eot|\.woff|\.woff2|\.gif|\.png|\.jpg|\.pdf|\.jpeg|\.swf|\.css|\.js|\.ico|\.xml|\.txt|.map)$ [NC]
RewriteRule (.*) index.php
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization},L]
#
########## End - Joomla! core SEF Section
# Apache configuration file (see httpd.apache.org/docs/2.2/mod/quickreference.html)

<ifModule mod_headers.c>
RequestHeader unset Cookie
Header unset Set-Cookie
</ifModule>

## Can be commented out if causes errors, see notes above.
Options +FollowSymLinks -Indexes

RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !^/index.php
#RewriteCond %{REQUEST_URI} (/|\.ttf|\.otf|\.svg|\.eot|\.woff|\.woff2|\.gif|\.png|\.jpg|\.pdf|\.jpeg|\.swf|\.css|\.js|\.ico|\.xml|\.txt|.map)$ [NC]
RewriteRule (.*) index.php
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization},L]
#
########## End - Joomla! core SEF Section
181 changes: 96 additions & 85 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,85 +1,96 @@
## Page Optimizer Plugin

This plugin is complementary to [HTML Minifier](/projects/WO/repos/html-minifier/) plugin. It performs advanced page optimizations which drastically improve the page performance score over various tools. Here are some of them:

# Known issue

It looks like subresources integrity is broken when servuce worker is enabled

# General improvements

* Sub-resources integrity check: computed for script and link (for now). see [here](https://hacks.mozilla.org/2015/09/subresource-integrity-in-firefox-43/)
* Push resources (require http 2 protocol). you can configure which resources will be pushed
* Efficiently cache resources using http caching headers. This requires apache mod_rewite. I have not tested on other web servers
* Range requests are supported for cached resources

# Javascript Improvements

* Fetch remote javascript files locally
* Merge javascript files
* Ignore javascript files that match a pattern
* Remove javascript files that match a pattern
* Move javascript at the bottom of the page

# CSS Improvements

* Fetch remote css files, images and fonts and store them locally
* Merge css files (this process @import directive)
* Do not process css files that match a pattern
* Remove css files that match a pattern
* Load css files in a non blocking way

# Critical CSS Path

See [here](https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery) for more info. The critical path enable instant page rendering by providing classes used to render the page before the stylesheets are loaded.
Any selector that affects the page rendering is a good candidate (set dimensions, define positioning, fonts, sections background color, etc..). There is no automatic extraction and you must provide these settings to extract css classes.

* CSS class definitions for critical css path
* A list of selectors to extract from the page css
* The web fonts are extracted automatically and preloaded

# Progressive Web App

Offline mode capabilities using one of these PWA network strategy:

0. Cache only (currently disabled in the settings page)
1. Network only
2. Cache first, falling back to network
3. Network first, falling back to cache
4. Cache, with network update - stale while revalidate <- this is the default

## Roadmap

0. Service worker cache expiration api (using localforage or another lightweight indexDb library)
1. Background Sync see [here](https://developers.google.com/web/updates/2015/12/background-sync)
2. Messaging API (broadcasting messages to and from all/single clients)
3. Remove <Link rel=preload> http header and use <link> HTML tag instead. see [here](https://jakearchibald.com/2017/h2-push-tougher-than-i-thought/)
4. PWA: Implement out of the box support for progressive web apps (provide a manifest, a skeleton, a start url?). see [here](https://techbeacon.com/how-use-service-workers-progressive-web-apps?utm_source=mobilewebweekly&utm_medium=email) - we need to define an app architecture
5. Create a standalone app a using android and chrome. see [here](https://developers.google.com/web/updates/2014/11/Support-for-installable-web-apps-with-webapp-manifest-in-chrome-38-for-Android)
6. IMAGES: read this [here](https://kinsta.com/blog/optimize-images-for-web/)
7. PWA: Deep links in pwa app or website. see [here](http://blog.teamtreehouse.com/registering-protocol-handlers-web-applications) and [here](https://developer.mozilla.org/en-US/docs/Web-based_protocol_handlers)
8. IMAGES: Implement progressive images loading [here](https://jmperezperez.com/medium-image-progressive-loading-placeholder/)
9. IMAGES: Implement images delivery optimization see [here](https://www.smashingmagazine.com/2017/04/content-delivery-network-optimize-images/) and [here](https://developers.google.com/web/updates/2015/09/automating-resource-selection-with-client-hints)
10. IMAGES: Implement support for <pictures> element see [here](https://www.smashingmagazine.com/2013/10/automate-your-responsive-images-with-mobify-js/)
11. CORS for PWA:https://filipbech.github.io/2017/02/service-worker-and-caching-from-other-origins | https://developers.google.com/web/updates/2016/09/foreign-fetch | https://stackoverflow.com/questions/35626269/how-to-use-service-worker-to-cache-cross-domain-resources-if-the-response-is-404
12. CSS: deduplicate, merge properties, rewrite rules, etc
13. PWA: Web Push Notification. see [here](https://serviceworke.rs/web-push.html)
14. Disk quota management see [here](https://developer.chrome.com/apps/offline_storage) and [here](https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria)
15. Clear Site Data api see [here](https://www.w3.org/TR/clear-site-data/)
16. Integrate https://www.xarg.org/project/php-facedetect/ and https://onthe.io/learn/en/category/analytic/How-to-detect-face-in-image-with-PHP for better image optimization

## Change History

# V2.0

0. PWA: implement network strategies:

* Cache only
* Network only
* Cache first, falling back to network
* Network first, falling back to cache
* Cache, with network update

# V1.1

0. CSS: preload web fonts
## Page Optimizer Plugin

This plugin is complementary to [HTML Minifier](/projects/WO/repos/html-minifier/) plugin. It performs advanced page optimizations which drastically improve the page performance score over various tools. Here are some of them:

# Known issue

It looks like subresources integrity is broken when servuce worker is enabled

# General improvements

* Sub-resources integrity check: computed for script and link (for now). see [here](https://hacks.mozilla.org/2015/09/subresource-integrity-in-firefox-43/)
* Push resources (require http 2 protocol). you can configure which resources will be pushed
* Efficiently cache resources using http caching headers. This requires apache mod_rewite. I have not tested on other web servers
* Range requests are supported for cached resources

# Javascript Improvements

* Fetch remote javascript files locally
* Merge javascript files
* Ignore javascript files that match a pattern
* Remove javascript files that match a pattern
* Move javascript at the bottom of the page

# CSS Improvements

* Fetch remote css files, images and fonts and store them locally
* Merge css files (this process @import directive)
* Do not process css files that match a pattern
* Remove css files that match a pattern
* Load css files in a non blocking way

# Critical CSS Path

See [here](https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery) for more info. The critical path enable instant page rendering by providing classes used to render the page before the stylesheets are loaded.
Any selector that affects the page rendering is a good candidate (set dimensions, define positioning, fonts, sections background color, etc..). There is no automatic extraction and you must provide these settings to extract css classes.

* CSS class definitions for critical css path
* A list of selectors to extract from the page css
* The web fonts are extracted automatically and preloaded

# Progressive Web App

Offline mode capabilities using one of these PWA network strategy:

### Network cache strategies

0. Cache only (currently disabled in the settings page)
1. Network only
1. Cache first, falling back to network
1. Network first, falling back to cache
1. Cache, with network update - stale while revalidate <- this is the default

### Installable web app

1. The app can be installed as a standalone web app with google chrome on android via the menu “Menu / Add to home page”. You need to configure the manifest file and provide icons first.
2. Alternative links to native mobile apps can be provided and the preference can be configured

## Roadmap

1. Mobile apps deep link?
1. Customize mobile app preference using the manifest file
1. Service worker cache expiration api (using localforage or another lightweight indexDb library)
1. Background Sync see [here](https://developers.google.com/web/updates/2015/12/background-sync)
1. Messaging API (broadcasting messages to and from all/single clients)
1. Remove <Link rel=preload> http header and use <link> HTML tag instead. see [here](https://jakearchibald.com/2017/h2-push-tougher-than-i-thought/)
1. IMAGES: read this [here](https://kinsta.com/blog/optimize-images-for-web/)
1. IMAGES: Implement progressive images loading [here](https://jmperezperez.com/medium-image-progressive-loading-placeholder/)
1. IMAGES: Implement images delivery optimization see [here](https://www.smashingmagazine.com/2017/04/content-delivery-network-optimize-images/) and [here](https://developers.google.com/web/updates/2015/09/automating-resource-selection-with-client-hints)
1. IMAGES: Implement support for <pictures> element see [here](https://www.smashingmagazine.com/2013/10/automate-your-responsive-images-with-mobify-js/)
1. CORS for PWA:https://filipbech.github.io/2017/02/service-worker-and-caching-from-other-origins | https://developers.google.com/web/updates/2016/09/foreign-fetch | https://stackoverflow.com/questions/35626269/how-to-use-service-worker-to-cache-cross-domain-resources-if-the-response-is-404
1. CSS: deduplicate, merge properties, rewrite rules, etc
1. PWA: Web Push Notification. see [here](https://serviceworke.rs/web-push.html)
1. Disk quota management see [here](https://developer.chrome.com/apps/offline_storage) and [here](https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria) and [here](https://gist.github.com/ebidel/188a513b1cd5e77d4d1453a4b6d060b0)
1. Clear Site Data api see [here](https://www.w3.org/TR/clear-site-data/)
1. Integrate https://www.xarg.org/project/php-facedetect/ and https://onthe.io/learn/en/category/analytic/How-to-detect-face-in-image-with-PHP for better image optimization?
1. PWA: Deep links in pwa app or website. see [here](http://blog.teamtreehouse.com/registering-protocol-handlers-web-applications) and [here](https://developer.mozilla.org/en-US/docs/Web-based_protocol_handlers)

## Change History

# V2.1

0. Added pwa manifest. The app is installable as a standalone application (tested on google chrome/android)

# V2.0

0. PWA: implement network strategies:

* Cache only (disabled)
* Network only
* Cache first, falling back to network
* Network first, falling back to cache
* Cache, with network update

# V1.1

0. CSS: preload web fonts
88 changes: 44 additions & 44 deletions build.sh
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,45 @@
#!/bin/sh -x
# npm install -g uglify-es
# npm install -g google-closure-compiler-js
DIR=$(cd -P -- "$(dirname -- "$0")" && pwd -P)
cd $DIR
cd ./js
# client side javascript
uglifyjs --warn --comments all --beautify beautify=true,preamble='"/* do not edit this file! */"' --output ./dist/bundle.js -- ./lib/lib.js ./lib/lib.ready.js\
./lib/lib.utils.js ./lib/lib.event.js ./lib/lib.options.js ./lib/lib.sw.js
#./localforage-all.js
uglifyjs --compress unsafe=true,passes=3,ecma=6,toplevel=true,unsafe_comps=true,unsafe_proto=true,warnings=true --warn --mangle -- ./dist/bundle.js > ./dist/bundle.min.js
#google-closure-compiler-js --compilationLevel=SIMPLE --languageOut=ES6 ./dist/bundle.min.js > ./dist/bundle.g.min.js
#rm ./lib-all.js
# echo "/* do not edit! */" > ./localforage-all.js
uglifyjs --warn --comments all --beautify beautify=true,preamble='"/* do not edit this file! */"' --output ./dist/localforage.js -- ./localforage/localforage.js ./localforage/localforage-getitems.js\
./localforage/localforage-setitems.js ./localforage/localforage-removeitems.js
uglifyjs --compress unsafe=true,passes=3,ecma=6,toplevel=true,unsafe_comps=true,unsafe_proto=true,warnings=true --warn --mangle -- ./dist/localforage.js > ./dist/localforage.min.js
#google-closure-compiler-js --compilationLevel=SIMPLE --languageOut=ES6 ./dist/localforage.min.js > ./dist/localforage.g.min.js
#
# rm ./localforage-all.js
#
#
#
cd ../worker
#sed 's/LIB/SW/g' ../js/lib/lib.utils.js > utils/sw.utils.js
#sed 's/LIB/SW/g' ../js/lib/lib.event.js > network/sw.event.js
uglifyjs --warn --comments all --beautify beautify=true,preamble='"/* do not edit! */"' --output ./dist/browser.js -- ./browser.js
uglifyjs --compress unsafe=true,passes=3,toplevel=true,unsafe_comps=true,unsafe_proto=true,warnings=true --warn --mangle toplevel=true -- ./dist/browser.js > ./dist/browser.min.js
# google-closure-compiler-js --compilationLevel=ADVANCED --assumeFunctionWrapper=false --languageOut=ES6 ./dist/browser.js > ./dist/browser.g.min.js
#
#
#
uglifyjs --warn --comments all --beautify beautify=true,preamble='"/* do not edit! */"' --ecma=6 --output ./dist/serviceworker.js\
-- ./serviceworker.js ./utils/sw.utils.js ./event/sw.event.promise.js\
./network/sw.strategies.js ./network/sw.strategies.network_first.js ./network/sw.strategies.cache_first.js ./network/sw.strategies.cache_network.js\
./network/sw.strategies.network_only.js ./network/sw.strategies.cache_only.js\
./filter/sw.filter.js\
./serviceworker.config.js
uglifyjs --ecma=6 --compress unsafe=true,passes=3,toplevel=true,unsafe_comps=true,unsafe_proto=true,warnings=true,drop_console=true\
--warn --mangle toplevel=true -- ./dist/serviceworker.js > ./dist/serviceworker.min.js
# --mangle-props
#google-closure-compiler-js --compilationLevel=ADVANCED --assumeFunctionWrapper=true --languageOut=ES6 ./dist/serviceworker.min.js > ./dist/serviceworker.g.min.js
#
cd ..
#!/bin/sh -x
# npm install -g uglify-es
# npm install -g google-closure-compiler-js
DIR=$(cd -P -- "$(dirname -- "$0")" && pwd -P)
cd $DIR
cd ./js
# client side javascript
uglifyjs --warn --comments all --beautify beautify=true,preamble='"/* do not edit this file! */"' --output ./dist/bundle.js -- ./lib/lib.js ./lib/lib.ready.js\
./lib/lib.utils.js ./lib/lib.event.js ./lib/lib.options.js ./lib/lib.sw.js
#./localforage-all.js
uglifyjs --compress unsafe=true,passes=3,ecma=6,toplevel=true,unsafe_comps=true,unsafe_proto=true,warnings=true --warn --mangle -- ./dist/bundle.js > ./dist/bundle.min.js
#google-closure-compiler-js --compilationLevel=SIMPLE --languageOut=ES6 ./dist/bundle.min.js > ./dist/bundle.g.min.js
#rm ./lib-all.js
# echo "/* do not edit! */" > ./localforage-all.js
uglifyjs --warn --comments all --beautify beautify=true,preamble='"/* do not edit this file! */"' --output ./dist/localforage.js -- ./localforage/localforage.js ./localforage/localforage-getitems.js\
./localforage/localforage-setitems.js ./localforage/localforage-removeitems.js
uglifyjs --compress unsafe=true,passes=3,ecma=6,toplevel=true,unsafe_comps=true,unsafe_proto=true,warnings=true --warn --mangle -- ./dist/localforage.js > ./dist/localforage.min.js
#google-closure-compiler-js --compilationLevel=SIMPLE --languageOut=ES6 ./dist/localforage.min.js > ./dist/localforage.g.min.js
#
# rm ./localforage-all.js
#
#
#
cd ../worker
#sed 's/LIB/SW/g' ../js/lib/lib.utils.js > utils/sw.utils.js
#sed 's/LIB/SW/g' ../js/lib/lib.event.js > network/sw.event.js
uglifyjs --warn --comments all --beautify beautify=true,preamble='"/* do not edit! */"' --output ./dist/browser.js -- ./browser.js
uglifyjs --compress unsafe=true,passes=3,toplevel=true,unsafe_comps=true,unsafe_proto=true,warnings=true --warn --mangle toplevel=true -- ./dist/browser.js > ./dist/browser.min.js
# google-closure-compiler-js --compilationLevel=ADVANCED --assumeFunctionWrapper=false --languageOut=ES6 ./dist/browser.js > ./dist/browser.g.min.js
#
#
#
uglifyjs --warn --comments all --beautify beautify=true,preamble='"/* do not edit! */"' --ecma=6 --output ./dist/serviceworker.js\
-- ./serviceworker.js ./utils/sw.utils.js ./event/sw.event.promise.js\
./network/sw.strategies.js ./network/sw.strategies.network_first.js ./network/sw.strategies.cache_first.js ./network/sw.strategies.cache_network.js\
./network/sw.strategies.network_only.js ./network/sw.strategies.cache_only.js\
./filter/sw.filter.js\
./serviceworker.config.js
uglifyjs --ecma=6 --compress unsafe=true,passes=3,toplevel=true,unsafe_comps=true,unsafe_proto=true,warnings=true,drop_console=true\
--warn --mangle toplevel=true -- ./dist/serviceworker.js > ./dist/serviceworker.min.js
# --mangle-props
#google-closure-compiler-js --compilationLevel=ADVANCED --assumeFunctionWrapper=true --languageOut=ES6 ./dist/serviceworker.min.js > ./dist/serviceworker.g.min.js
#
cd ..
php -r 'file_put_contents("worker_version", hash_file("sha1", "worker/dist/serviceworker.min.js"));'
Loading

0 comments on commit e72133c

Please sign in to comment.