Initial updates

This commit is contained in:
Tony Air 2020-04-02 02:42:13 +07:00
parent e7c0f9b416
commit 10e7cb5977
8 changed files with 38 additions and 170 deletions

View File

@ -1,20 +1,28 @@
# SilverStripe Progressive Web App
Tools to add progressive web app functionality to your silverstripe website
And make it available offline
## Installation
```
composer require michelsteege/silverstripe-progressivewebapp
composer require a2nt/silverstripe-progressivewebapp
```
## Usage
- Install the module, run dev/build and fill in the settings in the siteconfig
- Include the required js to register the service worker
- Add js to register the service worker
```
Requirements::javascript('michelsteege/silverstripe-progressivewebapp:resources/js/progressivewebapp.js');
if ('serviceWorker' in navigator) {
var baseHref = (document.getElementsByTagName('base')[0] || {}).href;
if(baseHref){
navigator.serviceWorker.register(baseHref + 'service-worker.js').then(function() {
console.log('Service Worker Registered');
});
}
}
```
- Add the following tags to the head of your website
```
<meta name="theme-color" content="$SiteConfig.ManifestColor">
<link rel="manifest" href="{$BaseHref}manifest.json">
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="{$BaseHref}manifest.json" />
```

View File

@ -4,9 +4,5 @@ Name: progressivewebapp
SilverStripe\Control\Director:
rules:
'manifest.json': 'MichelSteege\ProgressiveWebApp\Controllers\ManifestController'
'service-worker.js': 'MichelSteege\ProgressiveWebApp\Controllers\ServiceWorkerController'
SilverStripe\SiteConfig\SiteConfig:
extensions:
- MichelSteege\ProgressiveWebApp\Extensions\ProgressiveWebAppSiteConfigExtension
'manifest.json': 'A2nt\ProgressiveWebApp\Controllers\ManifestController'
'service-worker.js': 'A2nt\ProgressiveWebApp\Controllers\ServiceWorkerController'

View File

@ -1,5 +1,5 @@
{
"name": "a2nt/silverstripe-progressivewebapp",
"name": "michelsteege/silverstripe-progressivewebapp",
"description": "Tools to add progressive web app functionality to your silverstripe website",
"type": "silverstripe-vendormodule",
"keywords": [
@ -15,17 +15,26 @@
"minimum-stability": "dev",
"prefer-stable": true,
"require": {
"silverstripe/cms": "^4.*"
"silverstripe/cms": "^4.0@dev",
"silverstripe/vendor-plugin": "^1.0",
"silverware/colorpicker": "^1.0"
},
"require-dev": {
"phpunit/phpunit": "^5.7",
"squizlabs/php_codesniffer": "^3.0"
},
"extra": {
"installer-name": "silverstripe-progressivewebapp",
"branch-alias": {
"dev-master": "2.x-dev"
}
},
"expose": [
"resources"
]
},
"autoload": {
"psr-4": {
"A2nt\\ProgressiveWebApp\\": "src/"
"Pixelspin\\ProgressiveWebApp\\": "src/"
}
}
}

View File

@ -1,8 +0,0 @@
if ('serviceWorker' in navigator) {
var baseHref = (document.getElementsByTagName('base')[0] || {}).href;
if(baseHref){
navigator.serviceWorker.register(baseHref + 'service-worker.js').then(function() {
//console.log('Service Worker Registered');
});
}
}

View File

@ -1,6 +1,6 @@
<?php
namespace MichelSteege\ProgressiveWebApp\Controllers;
namespace A2nt\ProgressiveWebApp\Controllers;
use SilverStripe\Control\Controller;
use SilverStripe\SiteConfig\SiteConfig;
@ -22,79 +22,10 @@ class ManifestController extends Controller {
public function index($url) {
$config = SiteConfig::current_site_config();
$manifestContent = [];
$manifestContent['start_url'] = '/';
if($config->ManifestName){
$manifestContent['name'] = $config->ManifestName;
}
if($config->ManifestShortName){
$manifestContent['short_name'] = $config->ManifestShortName;
}
if($config->ManifestDescription){
$manifestContent['description'] = $config->ManifestDescription;
}
if($config->ManifestColor){
$manifestContent['background_color'] = $config->ManifestColor;
$manifestContent['theme_color'] = $config->ManifestColor;
}
if($config->ManifestOrientation){
$manifestContent['orientation'] = $config->ManifestOrientation;
}
if($config->ManifestDisplay){
$manifestContent['display'] = $config->ManifestDisplay;
}
$logo = $config->ManifestLogo();
if($logo && $logo->exists()){
$mime = $logo->getMimeType();
$manifestContent['icons'] = [
[
'src' => $logo->Fill(48,48)->Link(),
'sizes' => '48x48',
'type' => $mime
],
[
'src' => $logo->Fill(72,72)->Link(),
'sizes' => '72x72',
'type' => $mime
],
[
'src' => $logo->Fill(96,96)->Link(),
'sizes' => '96x96',
'type' => $mime
],
[
'src' => $logo->Fill(144,144)->Link(),
'sizes' => '144x144',
'type' => $mime
],
[
'src' => $logo->Fill(168,168)->Link(),
'sizes' => '168x168',
'type' => $mime
],
[
'src' => $logo->Fill(192,192)->Link(),
'sizes' => '192x192',
'type' => $mime
],
[
'src' => $logo->Fill(256,256)->Link(),
'sizes' => '256x256',
'type' => $mime
],
[
'src' => $logo->Fill(512,512)->Link(),
'sizes' => '512x512',
'type' => $mime
]
];
}
$this->getResponse()->addHeader('Content-Type', 'application/manifest+json; charset="utf-8"');
return json_encode($manifestContent);
}
}

View File

@ -1,6 +1,6 @@
<?php
namespace MichelSteege\ProgressiveWebApp\Controllers;
namespace A2nt\ProgressiveWebApp\Controllers;
use SilverStripe\Control\Controller;
use SilverStripe\Control\Director;

View File

@ -1,68 +0,0 @@
<?php
namespace MichelSteege\ProgressiveWebApp\Extensions;
use SilverStripe\ORM\DataExtension;
use SilverWare\Colorpicker\ORM\FieldType\DBColor;
use SilverStripe\Assets\Image;
use SilverStripe\Forms\FieldList;
use SilverStripe\AssetAdmin\Forms\UploadField;
use SilverStripe\Forms\TextField;
use SilverStripe\Forms\DropdownField;
use SilverWare\Colorpicker\Forms\ColorField;
class ProgressiveWebAppSiteConfigExtension extends DataExtension {
private static $db = [
'ManifestName' => 'Varchar',
'ManifestShortName' => 'Varchar',
'ManifestDescription' => 'Varchar(255)',
'ManifestColor' => DBColor::class,
'ManifestOrientation' => 'Varchar',
'ManifestDisplay' => 'Varchar'
];
private static $displays = [
'fullscreen',
'standalone',
'minimal-ui',
'browser'
];
private static $orientations = [
'any',
'natural',
'landscape',
'landscape-primary',
'landscape-secondary',
'portrait',
'portrait-primary',
'portrait-secondary'
];
private static $has_one = [
'ManifestLogo' => Image::class
];
public function onAfterWrite() {
parent::onAfterWrite();
$manifestLogo = $this->owner->ManifestLogo();
if ($manifestLogo && $manifestLogo->exists()) {
$manifestLogo->doPublish();
}
}
public function updateCMSFields(FieldList $fields) {
$fields->addFieldToTab('Root.ProgressiveWebApp', TextField::create('ManifestName', 'Name')->setDescription('Application name'));
$fields->addFieldToTab('Root.ProgressiveWebApp', TextField::create('ManifestShortName', 'Short name')->setDescription('Short human-readable name for the application try to keep it at a maximum of 12 characters'));
$fields->addFieldToTab('Root.ProgressiveWebApp', TextField::create('ManifestDescription', 'Description')->setDescription('Short description about the app'));
$fields->addFieldToTab('Root.ProgressiveWebApp', ColorField::create('ManifestColor', 'Color')->setDescription('Color used for the splash screen and/or icon'));
$fields->addFieldToTab('Root.ProgressiveWebApp', DropdownField::create('ManifestOrientation', 'Orientation', array_combine(self::$orientations, self::$orientations))->setDescription('App orientation'));
$fields->addFieldToTab('Root.ProgressiveWebApp', DropdownField::create('ManifestDisplay', 'Display', array_combine(self::$displays, self::$displays))->setDescription('Display mode of the app'));
$fields->addFieldToTab('Root.ProgressiveWebApp', UploadField::create('ManifestLogo', 'Logo')->setDescription('This image must be square and at least 512x512px'));
}
}

View File

@ -1,6 +1,6 @@
<?php
namespace MichelSteege\ProgressiveWebApp\Interfaces;
namespace A2nt\ProgressiveWebApp\Interfaces;
interface ServiceWorkerCacheProvider {